paymentmethodchange
events are delivered by the Payment Request API to a PaymentRequest
object when the user changes payment methods within a given payment handler. For example, if the user switches from one credit card to another on their Apple Pay account, a paymentmethodchange
event is fired to let you know about the change.
Bubbles | No |
---|---|
Cancelable | No |
Interface | PaymentMethodChangeEvent |
Event handler property | onpaymentmethodchange |
Examples
Let's take a look at an example. This code creates a new PaymentRequest
, adds a handler for the paymentmethodchange
event by calling the request's addEventListener()
, then calls show()
to present the payment interface to the user.
The code assumes the existence of a method detailsForShipping()
, which returns a PaymentDetailsUpdate
object containing the shipping options for the ground
shipping method, in the form found in the PaymentShippingOption
dictionary. By doing so, the payment form defaults to the ground shipping method.
const options = { requestShipping: true }; const paymentRequest = new PaymentRequest(paymentMethods, detailsForShipping("ground"), options); paymentRequest.addEventListener("paymentmethodchange", handlePaymentChange, false); paymentRequest.show() .then(response => response.complete("success")) .catch(err => console.log("Error handling payment request: " + err));
The event handler function itself, handlePaymentChange()
, looks like this:
handlePaymentChange = event => { const detailsUpdate = {}; if (event.methodName === "https://apple.com/apple-pay") { const serviceFeeInfo = calculateServiceFee(event.methodDetails); Object.assign(detailsUpdate, serviceFeeInfo); } event.updateWith(detailsUpdate); }, false);
This begins by looking at the event's methodName
property; if that indicates that the user is trying to use Apple Pay, we pass the methodDetails
into a function called calculateServiceFee()
, which we might create to take the information about the transaction, such as the underlying credit card being used to service the Apple Pay request, and compute and return an PaymentDetailsUpdate
object that specifies changes to be applied to the PaymentRequest
in order to add any service fees that the payment method might require.
Before the event handler returns, it calls the event's PaymentMethodChangeEvent.updateWith.updateWith()
method to integrate the changes into the request.
Related events
Specifications
Specification | Status | Comment |
---|---|---|
Payment Request API The definition of 'paymentmethodchange' in that specification. |
Candidate Recommendation |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
paymentmethodchange event | Chrome No support No | Edge No support No | Firefox
Full support
63
| IE No support No | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
63
| Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
See also
- Payment Request API
- Using the Payment Request API
onpaymentmethodchange
event handler property- Related events:
merchantvalidation
,payerdetailchange
,shippingaddresschange
,shippingoptionchange