Payment Request API 的運作方式

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

當消費者嘗試透過網站購物時,網站必須要求消費者提供付款資訊,並視需要提供其他資訊,例如運送偏好設定。您可以使用Payment Request API (PR API) 輕鬆快速地完成這項操作。

基本結構

建構 PaymentRequest 物件需要兩個參數:付款方式付款詳情。此外,第三個付款選項參數為選用參數。您可以建立基本要求,如下所示:

const request = new PaymentRequest(paymentMethods, paymentDetails);

我們來看看如何建構及使用各個參數。

付款方式

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

針對 supportedMethods,商家需要指定付款方式 ID,例如 https://bobbucks.dev/paydata 的存在與內容取決於 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。

下一步

進一步瞭解網頁付款