PaymentRequest: paymentmethodchange 事件
当用户在给定的支付处理程序内更改支付方式时，paymentmethodchange 事件会被发送到 Payment Request API 的 PaymentRequest 对象。
例如，如果用户在他们的 Apple Pay 账户中从一张信用卡切换到另一张，则会触发 paymentmethodchange 事件，告知您此更改。
此事件不可取消，也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
addEventListener("paymentmethodchange", (event) => { })
onpaymentmethodchange = (event) => { }
事件类型
一个 PaymentMethodChangeEvent。继承自 Event。
事件属性
除了以下属性之外，此接口还包含从 PaymentRequestUpdateEvent 继承的属性。
methodDetails只读-
一个包含支付方法特定数据的对象，在处理支付方法更改时很有用。如果没有此类信息，则此值为
null。 methodName只读-
一个字符串，包含支付方法标识符，该字符串唯一标识特定的支付方法。此标识符通常是在支付过程中使用的 URL，但也可以是标准化的非 URL 字符串，例如
basic-card。默认值为为空字符串""。
示例
让我们来看一个例子。此代码创建了一个新的 PaymentRequest，通过调用请求的 addEventListener() 来添加 paymentmethodchange 事件的处理程序，然后调用 show() 向用户显示支付界面。
该代码假定存在一个 detailsForTransaction() 方法，该方法将返回一个对象，该对象可以作为 PaymentRequest 构造函数的 details 参数传递。
const paymentRequest = new PaymentRequest(
paymentMethods,
detailsForTransaction(),
);
paymentRequest.addEventListener("paymentmethodchange", handlePaymentChange);
paymentRequest
.show()
.then((response) => response.complete("success"))
.catch((err) => console.error(`Error handling payment request: ${err}`));
事件处理程序本身 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);
};
首先查看事件的 methodName 属性；如果该属性指示用户正尝试使用 Apple Pay，我们将 methodDetails 传递给一个名为 calculateServiceFee() 的函数。我们可以创建该函数来接收有关交易的信息，例如用于服务 Apple Pay 请求的底层信用卡，并计算并返回一个对象，该对象指定将应用于 PaymentRequest 的更改，以添加支付方法可能需要的任何服务费。
在事件处理程序返回之前，它会调用事件的 updateWith() 方法，将更改集成到请求中。
规范
| 规范 |
|---|
| Payment Request API # dfn-paymentmethodchange |
| Payment Request API # onpaymentmethodchange 属性 |
浏览器兼容性
加载中…