2018-06-14 支付处理器 API ：将你的支付应用带到 Web 中来

原文地址：https://juejin.im/post/5b1cd158e51d4506cc69d458

原文：Bring your payment method to the web with the Payment Handler API（需越墙）
作者：Eiji Kitamura
译者：西楼听雨
原文是谷歌开发者网站发布的关于基于 Web 的标准化支付 API 系列文章之一。(转载请注明出处)

什么是支付处理器 API ？

支付请求 API 为浏览器带来了一个开放的、标准化的用于处理支付请求的方式。通过一个简单、快捷的用户界面，即可采集到付款人的寄送信息、联系方式和支付凭据。

而支付处理器 API 则为支付方式提供商（译注：即支付类的应用）打开了一个全新的生态。它可以让那些基于 Web 的支付类应用(采用 service worker 支撑)通过支付请求 API 将自己作为一种支付方式整合到商家的网站中。

用户体验

从用户角度看，它带来的用户体验是这样子的：

视频演示：v.youku.com/v_show/id_X…

（译注：下面是操作流程）

用户决定好了购买一款商品，然后在商品详情页点击“Buy Now（立刻购买）”
弹出支付请求的表单界面
用户选择一种支付方式（支付方式提供商的 URL 会列在支付方式名称的下面）
打开一个新窗口进入支付应用，在那里用户完成认证和支付授权
支付请求受理成功，支付应用的窗口关闭
完成支付，支付请求的表单界面关闭
这个时候网站可以展示出订单已确认的信息

你可以用 Chrome 68 beta 版本在这里尝试下。

注意，整个流程涉及到的三方有：终端用户，商家网站，支付方式提供商。

商家开发者的体验

对于商家的网站来说，要将一个支付应用整合进来，只需在支付请求 API 的第一个参数中的 supportedMethods 中将其添加进去(支付方法 ID)即可，同时可以有选择性地携带一个 data 数据。例如，要添加一个名叫 BobPay，支付方式 ID 为https://bobpay.xyz/pay 的支付应用，其实现如下：

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: ‘总额’,
    amount: { value: '10', currency: 'USD' }
  }
});

如果可以处理 BobPay 支付方式的 service worker 已经安装，那么这个支付应用就会出现在支付请求的界面中供用户选择。在某些情况下，Chrome 还会跳过跳转到支付处理商一块的操作步骤，以此带来一种轻快的支付体验。

Chrome 支持一个非标准的特性，我们称之为 just-in-time (JIT) 安装(译注：即时安装）。在我们的这个例子中，这个特性可以让 BobPay 信任的支付处理器进行即时安装，不需要用户在事先有对 BobPay 网站进行过访问。不过只有用户在支付请求界面中明确选择了 BobPay 作为支付方式时才会开始安装；而且一种支付方式只可以指定最多一个信任的支付处理方。

如何开发一个支付请求处理器

要开发一个支付请求处理器，我们需要在除了实现支付处理器 API 之外再做一点额外的工作。

安装一个 Service Worker 并添加支付指令

支付处理器 API 的关键点就是 Service Worker。你需要在你的支付应用网站上注册一个 Service Worker 并在 ServiceWorkerRegistration 对象下的 paymentManger 中将支付指令添加进去。

if ('serviceWorker' in navigator) {
  // 注册一个 service worker
  const registratoin = await navigator.serviceWorker.register(
    // service worker 是一个单独的 js 文件
    'service-worker.js'
  );
  // 检查支付处理器 API 是否可用
  if (!registration.paymentManager) return;

  registration.paymentManager.instruments.set(
    // 支付指令的 key 可是任意字符串
    "https://bobpay.xyz",
    // 支付指令的详情
    {
      name: '支付处理器示例',
      method: 'https://bobpay.xyz/pay'
    }
  )
}

监听 paymentrequest 事件来申请用户授权

要处理支付请求，需要对在 service worker 中对 paymentrequest 进行监听；然后当我们收到这样一个事件时，打开一个窗口并等待其在用户授权进行支付之后返回一个支付凭据。

const origin = 'https://bobpay.xyz';
const methodName = `${origin}/pay`;
const checkoutURL = `${origin}/checkout`;
let resolver;
let payment_request_event;

self.addEventListener('paymentrequest', e => {
  // 保存这个事件，以便之后使用
  payment_request_event = e;
  // 另外你还需要提供一个 `PromiseResolver` 垫片，
  // 因为目前 Chrome 还未实现
  resolver = new PromiseResolver();

  e.respondWith(resolver.promise);
  e.openWindow(checkoutURL).then(client => {
    if (client === null) {
      resolver.reject('Failed to open window');
    }
  }).catch(err => {
    resolver.reject(err);
  });
});

self.addEventListener('message', e => {
  console.log('A message received:', e);
  if (e.data === "payment_app_window_ready") {
    sendPaymentRequest();
    return;
  }

  if (e.data.methodName === methodName) {
    resolver.resolve(e.data);
  } else {
    resolver.reject(e.data);
  }
});

const sendPaymentRequest = () => {
  if (!payment_request_event) return;
  clients.matchAll({
    includeUncontrolled: false,
    type: 'window'
  }).then(clientList => {
    for (let client of clientList) {
      client.postMessage(payment_request_event.total);
    }
  });
}

支付方式举例

因为支付处理器 API 的设计理念就是保持最大的灵活性，以支持任意类型的支付方式，所以它所支持的包含了：

银行
加密数字货币
电子货币
运营商账单（译注：话费代扣）
商家积分系统
货到付款（商家的自助服务）

扩展链接

(译注：以下链接均需越墙)

Introducing the Payment Request API（支付请求 API 介绍）
Deep Dive into the Payment Request API（深入理解支付请求 API）
Payment Handler API（支付处理器 API）
Quick guide to implementing a payment app with the Payment Handler API（快速实现一款支持支付处理器 API 的支付应用）
Example payment app - BobPay（支付应用案例——BobPay）

作者：西楼听雨
链接：https://juejin.im/post/5b1cd158e51d4506cc69d458
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。