此页面由 Cloud Translation API 翻译。

使用 Service Worker 编排付款事务

如何使基于网络的付款应用改用 Web Payments，并为客户提供更好的体验。

北村永二

注册付款应用后，您就可以接受来自商家的付款请求了。这篇博文介绍了如何在运行时（即，显示窗口且用户与之互动）期间编排来自 Service Worker 的付款交易。

使用 Service Worker 编排付款事务 — 使用 Service Worker 编排付款交易

“运行时付款参数更改”是指一组允许商家和付款处理程序在用户与付款处理程序互动时交换消息的事件。如需了解详情，请参阅使用 Service Worker 处理可选付款信息。

接收来自商家的付款请求事件

当客户选择使用基于网络的付款应用付款时，商家调用 PaymentRequest.show()，您的 Service Worker 将收到 paymentrequest 事件。向 Service Worker 添加事件监听器，以捕获事件并为下一项操作做好准备。

[付款处理程序] 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;
…

保留的 PaymentRequestEvent 包含有关此事务的重要信息：

属性名称	说明
`topOrigin`	指明顶级网页来源（通常是收款人商家）的字符串。用于识别商家来源。
`paymentRequestOrigin`	指示调用方来源的字符串。当商家直接调用 Payment Request API 时，此 API 可与 `topOrigin` 相同；但如果第三方（如支付网关）在 iframe 中调用该 API，则此 API 可能会不同。
`paymentRequestId`	提供给 Payment Request API 的 `PaymentDetailsInit` 的 `id` 属性。如果商家省略，浏览器将提供一个自动生成的 ID。
`methodData`	商家在 `PaymentMethodData` 中提供的付款方式专用数据。此样本可用于确定付款交易详情。
`total`	商家在 `PaymentDetailsInit` 中提供的总金额。使用此参数构建一个界面，让客户知道要支付的总金额。
`instrumentKey`	用户选择的插桩键。此信息反映的是您提前提供的`instrumentKey`。空字符串表示用户未指定任何付款方式。

打开付款处理程序窗口，以显示基于网络的付款应用前端

收到 paymentrequest 事件后，付款应用可以通过调用 PaymentRequestEvent.openWindow() 来打开付款处理程序窗口。付款处理程序窗口将向客户显示您的付款应用的界面，客户可以在该界面上进行身份验证，选择送货地址和选项，以及授权付款。我们将在处理付款前端上的付款（即将推出）中介绍如何编写前端代码。

采用基于网络的付款应用的结账流程。

将保留的 promise 传递给 PaymentRequestEvent.respondWith()，以便将来可以使用付款结果对其进行解析。

[付款处理程序] service-worker.js：

…
self.addEventListener('paymentrequest', async e => {
…
  // Retain a promise for future resolution
  // Polyfill for PromiseResolver is provided below.
  resolver = new PromiseResolver();

  // Pass a promise that resolves when payment is done.
  e.respondWith(resolver.promise);
  // Open the checkout page.
  try {
    // Open the window and preserve the client
    client = await e.openWindow(checkoutURL);
    if (!client) {
      // Reject if the window fails to open
      throw 'Failed to open window';
    }
  } catch (err) {
    // Reject the promise on failure
    resolver.reject(err);
  };
});
…

您可以使用方便的 PromiseResolver polyfill 在任何时间解析 promise。

class PromiseResolver {
  constructor() {
    this.promise_ = new Promise((resolve, reject) => {
      this.resolve_ = resolve;
      this.reject_ = reject;
    })
  }
  get promise() { return this.promise_ }
  get resolve() { return this.resolve_ }
  get reject() { return this.reject_ }
}

与前端交换信息

付款应用的 Service Worker 可以通过 ServiceWorkerController.postMessage() 与付款应用的前端交换消息。如需从前端接收消息，请监听 message 事件。

[付款处理程序] service-worker.js：

// Define a convenient `postMessage()` method
const postMessage = (type, contents = {}) => {
  if (client) client.postMessage({ type, ...contents });
}

从前端接收就绪信号

打开付款处理程序窗口后，Service Worker 应等待来自付款应用前端的就绪状态信号。Service Worker 可以在准备就绪后将重要信息传递给前端。

[付款处理程序] 前端：

navigator.serviceWorker.controller.postMessage({
  type: 'WINDOW_IS_READY'
});

[付款处理程序] service-worker.js：

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      // `WINDOW_IS_READY` is a frontend's ready state signal
      case 'WINDOW_IS_READY':
        const { total } = payment_request_event;
…

将事务详情传递给前端

现在，请发回付款信息。在这种情况下，您只发送付款请求总额，但可以根据需要传递更多详细信息。

[付款处理程序] service-worker.js：

…
        // Pass the payment details to the frontend
        postMessage('PAYMENT_IS_READY', { total });
        break;
…

[付款处理程序] 前端：

let total;

navigator.serviceWorker.addEventListener('message', async e => {
  switch (e.data.type) {
      case 'PAYMENT_IS_READY':
        ({ total } = e.data);
        // Update the UI
        renderHTML(total);
        break;
…

返回客户的付款凭据

当客户授权付款时，前端可以向 Service Worker 发送帖子以继续操作。您可以解析传递给 PaymentRequestEvent.respondWith() 的 promise，以将结果发送回商家。传递 PaymentHandlerResponse 对象。

属性名称	说明
`methodName`	用于付款的付款方式标识符。
`details`	特定于付款方式的数据，用于为商家处理付款提供必要信息。

[付款处理程序] 前端：

  const paymentMethod = …

  postMessage('PAYMENT_AUTHORIZED', {
    paymentMethod,              // Payment method identifier
  });

[付款处理程序] service-worker.js：

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'PAYMENT_AUTHORIZED':
        // Resolve the payment request event promise
        // with a payment response object
        const response = {
          methodName: e.data.paymentMethod,
          details: { id: 'put payment credential here' },
        }
        resolver.resolve(response);
        // Don't forget to initialize.
        payment_request_event = null;
        break;
      …

取消付款交易

为了允许客户取消交易，前端可以向 Service Worker 发送一条后续消息来取消交易。然后，Service Worker 可以使用 null 解析传递给 PaymentRequestEvent.respondWith() 的 promise，以向商家表明交易已取消。

[付款处理程序] 前端：

  postMessage('CANCEL_PAYMENT');

[付款处理程序] service-worker.js：

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'CANCEL_PAYMENT':
        // Resolve the payment request event promise
        // with null
        resolver.resolve(null);
        // Don't forget to initialize.
        payment_request_event = null;
        break;
      …

示例代码

您在本文档中看到的所有示例代码均摘自以下正常运行的示例应用：

https://paymenthandler-demo.glitch.me

[付款处理程序] Service Worker

[付款处理程序] 前端

若要试用，请执行以下操作：

前往 https://paymentrequest-demo.glitch.me/。
转到网页底部。
按添加付款按钮。
在付款方式标识符字段中输入 https://paymenthandler-demo.glitch.me。
按字段旁边的付款按钮。

后续步骤

在本文中，我们学习了如何通过 Service Worker 编排付款事务。下一步是学习如何向 Service Worker 添加一些更高级的功能。

使用 Service Worker 处理可选的付款信息