PaymentMethodChangeEvent: methodDetails property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The read-only methodDetails property of the PaymentMethodChangeEvent interface is an object containing any data the payment handler may provide to describe the change the user has made to their payment method. The value is null if no details are available.

Value

An object containing any data needed to describe the changes made to the payment method. The contents vary depending on the actual payment method chosen, so you will need to refer to the methodName property first, then interpret the methodDetails after that.

The default value is null, indicating that no additional details are available.

Examples

This example uses the paymentmethodchange event to watch for changes to the payment method selected for Apple Pay, in order to compute a discount if the user chooses to use a Visa card as their payment method.

js
request.onpaymentmethodchange = (ev) => {
  const { type: cardType } = ev.methodDetails;
  const newStuff = {};
  if (ev.methodName === "https://apple.com/apple-pay") {
    switch (cardType) {
      case "visa": {
        // do Apple Pay specific handling for Visa card…
        // methodDetails contains the card information
        const discount = calculateDiscount(ev.methodDetails);
        Object.assign(newStuff, discount);
        break;
      }
    }
  }
  // finally…
  ev.updateWith(newStuff);
};
const response = await request.show();

Note that the methodDetails property is being used by the calculateDiscount() function to compute any payment discount, then updateWith() is called to update the event with the computed update.

Specifications

Specification
Payment Request API
# dom-paymentmethodchangeevent-methoddetails

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
methodDetails
Chrome – Full support
Chrome 76 (Release date: 2019-07-30)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – No support
Firefox 55 (Release date: 2017-08-08)
disabled
disabled From version 55 users must explicitly set the dom.payments.request.enabled preference to true. To change preferences in Firefox, visit about:config.
disabled From version 55 users must explicitly set the dom.payments.request.supportedRegions preference to A comma-delimited list of one or more 2-character ISO country codes indicating the countries in which to support payments (for example, US,CA).. To change preferences in Firefox, visit about:config.
Opera – Full support
Opera 63 (Release date: 2019-08-20)
footnote Full support
Safari – Full support
Safari 12.1 (Release date: 2019-03-25)
footnote Full support
Chrome Android – Full support
Chrome Android 76 (Release date: 2019-07-30)
footnote Full support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – Full support
Opera Android 54 (Release date: 2019-10-18)
footnote Full support
Safari on iOS – Full support
Safari on iOS 12.2 (Release date: 2019-03-25)
footnote Full support
Samsung Internet – Full support
Samsung Internet 12 (Release date: 2020-06-19)
footnote Full support
WebView Android – Full support
WebView Android 136 (Release date: 2025-04-29)
footnote Full support
WebView on iOS – Full support
WebView on iOS 12.2 (Release date: 2019-03-25)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
User must explicitly enable this feature.