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' }
  }
};

檢查付款方式是否可用

Chrome 會在建構 PaymentRequest 物件時，檢查使用者和環境是否已準備好付款。

如要確認使用者和環境是否已準備好付款，請在叫用付款程序前呼叫 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。

下一步

進一步瞭解網路付款。