Payment Request API 的運作方式

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

Eiji Kitamura

Payment Request API

客戶嘗試在您的網站上購物時，網站必須詢問 客戶提供付款資訊，並視需要提供其他資訊 例如運送偏好設定可以輕鬆快速地使用 Payment Request API (PR API)：

基本結構

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

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() 方法，以顯示付款應用程式使用者 存取 API

，瞭解如何調查及移除這項存取權。 
request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

付款應用程式使用者介面的外觀，取決於付款應用程式 。客戶同意付款後，系統就會傳送 JSON 物件 並附上所有轉帳必要資訊。 接著，商家可將證件傳送給 PSP 處理付款。

最後，您可以透過 response.complete('success')或 response.complete('fail')，視 PSP 傳回的結果

下一步

進一步瞭解網路付款。