ServiceWorkerGlobalScope:paymentrequest 事件

实验性: 这是一个 实验性技术
在生产环境中使用此功能之前,请仔细查看 浏览器兼容性表

安全上下文: 此功能仅在 安全上下文(HTTPS)中可用,且仅在某些或所有 支持的浏览器 中可用。

注意: 此功能仅在 Service Workers 中可用。

paymentrequest 事件是 ServiceWorkerGlobalScope 接口的事件,当通过 PaymentRequest.show() 方法在商家网站上启动支付流程时,会在支付应用上触发。

语法

在诸如 addEventListener() 之类的方法中使用事件名称,或设置事件处理程序属性。

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

onpaymentrequest = (event) => {};

事件类型

示例

当调用 PaymentRequest.show() 方法时,会在支付应用的 Service Worker 上触发 paymentrequest 事件。支付应用的 Service Worker 在内部侦听此事件,以开始支付流程的下一阶段。

js
let payment_request_event;
let resolver;
let client;

// `self` is the global object in service worker
self.addEventListener("paymentrequest", async (e) => {
  if (payment_request_event) {
    // If there's an ongoing payment transaction, reject it.
    resolver.reject();
  }
  // Preserve the event for future use
  payment_request_event = e;

  // ...
});

收到 paymentrequest 事件后,支付应用可以通过调用 PaymentRequestEvent.openWindow() 打开支付处理程序窗口。支付处理程序窗口将向客户显示支付应用界面,他们可以在其中进行身份验证、选择送货地址和选项,以及授权支付。

处理完支付后,使用 PaymentRequestEvent.respondWith() 将支付结果传回商家网站。

有关此阶段的更多详细信息,请参阅 从商家接收支付请求事件

规范

规范
支付处理程序 API
# the-paymentrequestevent

浏览器兼容性

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

另请参阅