PaymentRequest: paymentmethodchange event

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

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

onpaymentmethodchange = (event) => {};

A PaymentMethodChangeEvent. Inherits from Event.

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

methodDetails Read only Secure context

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 Secure context

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, "".

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 an 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.error(`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);
};

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

• Payment Request API
• Using the Payment Request API
• merchantvalidation event
• payerdetailchange event
• shippingaddresschange event
• shippingoptionchange event