在此页

• 范例
• Related events
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

paymentmethodchange events are delivered by the 支付请求 API 到 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.

冒泡	No
可取消	No
接口	PaymentMethodChangeEvent
事件处理程序特性	onpaymentmethodchange

范例

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() ，其返回 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() ，看起来像这样：

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.

Related events

• merchantvalidation , shippingaddresschange , shippingoptionchange ，和 payerdetailchange

规范

规范	状态	注释
支付请求 API The definition of 'paymentmethodchange' in that specification.	候选推荐

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
paymentmethodchange event	Chrome No	Edge No	Firefox 63 Disabled 63 Disabled Available only in nightly builds. Disabled ). To change preferences in Firefox, visit about:config.	IE No	Opera No	Safari ?	WebView Android No	Chrome Android No	Firefox Android 63 Disabled 63 Disabled Available only in nightly builds. Disabled ). To change preferences in Firefox, visit about:config.	Opera Android No	Safari iOS ?	Samsung Internet Android No

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• 支付请求 API
• Using the Payment Request API
• onpaymentmethodchange event handler property
• 相关事件： merchantvalidation , payerdetailchange , shippingaddresschange , shippingoptionchange

元数据

• 最后修改： Apr 30, 2019

相关话题

1. PaymentRequest
2. 构造函数

   1. PaymentRequest()
3. 特性

   1. onmerchantvalidation
   2. onpaymentmethodchange
   3. onshippingaddresschange
   4. shippingAddress
   5. shippingOption
4. 方法

   1. canMakePayment()
   2. show()
5. 事件

   1. paymentmethodchange
6. 继承：

   1. EventTarget