Payment Request API 的運作方式

瞭解 Payment Request API 的概要運作方式。

Eiji Kitamura

Payment Request API

當客戶嘗試在您的網站上購買商品時，網站必須要求客戶提供付款資訊，並視需要提供其他資訊，例如運送偏好設定。您可以使用 Payment Request API (PR API) 輕鬆快速地完成這項作業。

基本結構

建構 PaymentRequest 物件需要兩個參數：付款方式和付款詳情。此外，第三個 payment options 參數為選用參數，建立基本要求的方式如下：

const request = new PaymentRequest(paymentMethods, paymentDetails);

接下來說明每個參數的建構和使用方式。

付款方式

第一個參數 paymentMethods 是陣列變數支援付款方式的清單。陣列中的每個元素都包含兩個元件：supportedMethods，以及選用的 data。

針對 supportedMethods，商家需要指定付款方式 ID，例如 https://bobbucks.dev/pay。data 的存在和內容取決於 supportedMethods 的內容，以及付款應用程式供應商的設計。

這兩項資訊應由付款應用程式供應商提供。

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

付款資料

第二個參數 paymentDetails 會做為物件傳遞，並指定該筆交易的付款詳情。其中包含必要值 total，指定客戶應支付的總金額。您也可以使用這個參數，視需要列出已購買的商品。

在以下範例中，系統會顯示選用的已購買商品清單 (本例中只有一個商品) 與必要的應付總額。在這兩種情況下，貨幣單位都是個別金額。

const paymentDetails = {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
};

檢查付款方式是否可用

在建立 PaymentRequest 物件期間，Chrome 會檢查使用者和環境是否已準備就緒，可以進行付款。

如要檢查使用者和環境是否準備好進行付款，請在叫用付款程序之前呼叫 canMakePayment()。如果瀏覽器支援物件中指定的至少一種付款方式，呼叫 canMakePayment() 會傳回 true。

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

進一步瞭解 MDN 上的 PaymentRequest.canMakePayment()

show() 方法

如上所示，設定兩個參數並建立 request 物件後，您可以呼叫顯示付款應用程式使用者介面的 show() 方法。

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

付款應用程式使用者介面的外觀，將由付款應用程式供應商全權決定。客戶同意付款後，系統會將 JSON 物件傳送給商家，其中包含轉帳所需的所有資訊。接著，商家可將證件傳送給 PSP 處理付款。

最後，您可以根據 PSP 傳回的結果，使用 response.complete('success') 或 response.complete('fail') 完成付款要求 UI，藉此關閉付款要求 UI。

下一步

進一步瞭解網路付款。