PaymentRequest: paymentmethodchange event
=========================================

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

The **`paymentmethodchange`** event is delivered the Payment Request API to a `PaymentRequest` object when the user changes the payment method 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.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("paymentmethodchange", (event) => {});

onpaymentmethodchange = (event) => {};
```

Event type
----------

A `PaymentMethodChangeEvent`. Inherits from `Event`.

Event

PaymentRequestUpdateEvent

PaymentMethodChangeEventEvent properties
----------------

*In addition to the properties below, this interface includes properties inherited from `PaymentRequestUpdateEvent`.*

`methodDetails` Read only 

An object containing payment method-specific data useful when handling a payment method change. If no such information is available, this value is `null`.

`methodName` Read only 

A string containing the payment method identifier, a string which uniquely identifies a particular payment method. This identifier is usually a URL used during the payment process, but may be a standardized non-URL string as well, such as `basic-card`. The default value is the empty string, `""`.

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 `detailsForTransaction()`, which will return an object that can be passed as the `details` argument to the `PaymentRequest` constructor.


```js
const paymentRequest = new PaymentRequest(
  paymentMethods,
  detailsForTransaction(),
);

paymentRequest.addEventListener(
  "paymentmethodchange",
  handlePaymentChange,
  false,
);

paymentRequest
  .show()
  .then((response) => response.complete("success"))
  .catch((err) => console.error(`Error handling payment request: ${err}`));
```


The event handler function itself, `handlePaymentChange()`, looks like this:


```js
handlePaymentChange = (event) => {
  const detailsUpdate = {};

  if (event.methodName === "https://apple.com/apple-pay") {
    const serviceFeeInfo = calculateServiceFee(event.methodDetails);
    Object.assign(detailsUpdate, serviceFeeInfo);
  }

  event.updateWith(detailsUpdate);
};
```


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 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 `updateWith()` method to integrate the changes into the request.

Specifications
--------------

| Specification |
| --- |
| Payment Request API 1.1 # dfn-paymentmethodchange |
| Payment Request API 1.1 # onpaymentmethodchange-attribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Payment Request API
* Using the Payment Request API
* `merchantvalidation` event
* `shippingaddresschange` event
* `shippingoptionchange` event