PaymentRequest: paymentmethodchange event

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.

Specifications

Specification Status Comment
Payment Request API
The definition of 'paymentmethodchange' in that specification.
Candidate Recommendation  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
paymentmethodchange eventChrome No support NoEdge ? Firefox Full support 63
Notes Disabled
Full support 63
Notes Disabled
Notes Available only in nightly builds.
Disabled From version 63: this feature is behind the dom.payments.request.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android Full support 63
Notes Disabled
Full support 63
Notes Disabled
Notes Available only in nightly builds.
Disabled From version 63: this feature is behind the dom.payments.request.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS ? Samsung Internet Android ?

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

Document Tags and Contributors

Contributors to this page: wbamberg, Sheppy, mdnwebdocs-bot
Last updated by: wbamberg,