PaymentMethodChangeEvent: methodName 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 methodName property of the PaymentMethodChangeEvent interface is a string which uniquely identifies the payment handler currently selected by the user. The payment handler may be a payment technology, such as Apple Pay or Android Pay, and each payment handler may support multiple payment methods; changes to the payment method within the payment handler are described by the PaymentMethodChangeEvent.

Value

A string which uniquely identifies the currently-selected payment handler. This may be a string chosen from the list of standardized payment method identifiers, or a URL used by the payment processing service. See Payment method identifiers for more information.

The default value is the empty string, "".

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-methodname

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
methodName
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.