支付處理器 API ：將你的支付應用帶到 Web 中來

西樓聽雨發表於2018-06-10
APIWeb

原文：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…

（譯註：下面是操作流程）

  1. 使用者決定好了購買一款商品，然後在商品詳情頁點選“Buy Now（立刻購買）”
  2. 彈出支付請求的表單介面
  3. 使用者選擇一種支付方式（支付方式提供商的 URL 會列在支付方式名稱的下面）
  4. 開啟一個新視窗進入支付應用，在那裡使用者完成認證和支付授權
  5. 支付請求受理成功，支付應用的視窗關閉
  6. 完成支付，支付請求的表單介面關閉
  7. 這個時候網站可以展示出訂單已確認的資訊

你可以用 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 的設計理念就是保持最大的靈活性，以支援任意型別的支付方式，所以它所支援的包含了：

  • 銀行
  • 加密數字貨幣
  • 電子貨幣
  • 運營商賬單（譯註：話費代扣）
  • 商家積分系統
  • 貨到付款（商家的自助服務）

擴充套件連結

(譯註：以下連結均需越牆)

相關文章