PaymentRequest：paymentmethodchange 事件

安全上下文：此功能仅在 安全上下文 (HTTPS) 中可用，在一些或所有 支持的浏览器 中可用。

当用户在给定支付处理程序中更改支付方式时，paymentmethodchange 事件将传递到 支付请求 API 的 PaymentRequest 对象。

例如，如果用户在他们的 Apple Pay 帐户中从一张信用卡切换到另一张信用卡，则会触发 paymentmethodchange 事件，以通知您更改情况。

此事件不可取消，也不冒泡。

语法

在 addEventListener() 等方法中使用事件名称，或设置事件处理程序属性。

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

onpaymentmethodchange = (event) => {};

事件类型

一个 PaymentMethodChangeEvent。继承自 Event。

Event PaymentRequestUpdateEvent PaymentMethodChangeEvent

事件属性

除了以下属性之外，此接口还包括从 PaymentRequestUpdateEvent 继承的属性。

methodDetails 只读

一个包含特定于支付方式的数据的对象，在处理支付方式更改时很有用。如果没有此类信息可用，则此值为 null。

methodName 只读

一个包含支付方式标识符的字符串，该字符串唯一地标识特定的支付方式。此标识符通常是支付过程中使用的 URL，但也可能是标准化的非 URL 字符串，例如 basic-card。默认值为空字符串，""。

示例

让我们看一个例子。这段代码创建一个新的 PaymentRequest，通过调用请求的 addEventListener() 为 paymentmethodchange 事件添加一个处理程序，然后调用 show() 将支付界面呈现给用户。

该代码假设存在一个名为 detailsForTransaction() 的方法，该方法将返回一个对象，可以将其作为 details 参数传递给 PaymentRequest 构造函数。

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}`));

事件处理程序函数本身，handlePaymentChange()，如下所示

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);
};

这首先查看事件的 methodName 属性；如果这表示用户试图使用 Apple Pay，我们将 methodDetails 传递给一个名为 calculateServiceFee() 的函数，我们可以创建该函数来获取有关交易的信息，例如用于服务 Apple Pay 请求的底层信用卡，并计算并返回一个对象，该对象指定要应用于 PaymentRequest 的更改，以便添加支付方式可能需要的任何服务费。

在事件处理程序返回之前，它调用事件的 updateWith() 方法，以将更改集成到请求中。

规范

规范
支付请求 API
# dfn-paymentmethodchange
支付请求 API
# onpaymentmethodchange-attribute

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅