本頁面由 Cloud Translation API 翻譯而成。

付款要求 API 的異動

Eiji Kitamura

Chrome 62

PaymentDetailsModifier 現已推出

在付款要求中，您可能會根據客戶選擇的付款方式提供折扣或額外收費。PaymentDetailsModifier 就是用來達成這項目標的功能。

將 modifiers 屬性新增至 PaymentRequest 建構函式的第二個引數，以及 PaymentDetailsModifier 物件的陣列，後者是宣告式規則，說明如何根據客戶選擇的付款方式修改顯示項目和總額。

以下範例說明如何宣告使用者選擇信用卡付款時，會被收取 $3 美元的處理費用。

let methods = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard']
   supportedTypes: ['credit', 'debit']
 }
}];

let details = {
 displayItems: [{
   label: 'T-shirt',
   amount: { currency: 'USD', value: '68.00' }
 }],
 total: {
   label: 'Total price',
   amount: { currency: 'USD', value: '68.00' }
 },
 modifiers: [{
   supportedMethods: 'basic-card',
   data: {
     supportedTypes: ['credit']
   },
   additionalDisplayItems: [{
     label: 'Processing fee',
     amount: { currency: 'USD', value: '3.00' }
   }],
   total: {
     label: 'Credit card price',
     amount: {currency: ‘USD’, value: ‘71.00’}}
 }]
};

let options = {};

let request = new PaymentRequest(methods, details, options);

在實際的付款要求工作表中，只要選擇信用卡付款，使用者就會看到額外顯示項目「處理費」，收費 $3 美元，總價 $71.00 美元。

PaymentDetailsModifier 包含下列參數：

屬性名稱
`supportedMethods`	指定哪些付款方式適用此規則。
`additionalDisplayItems`	你想新增折扣或額外費用的其他顯示項目。
`total`	加入 additionalDisplayItems 後的總價。
`data`	對於 `basic-card` 付款，這會用於篩選使用 `supportedTypes` 的特定卡片類型。否則，這個參數的使用方式取決於付款方式 (付款應用程式)。請參閱各付款方式提供的說明文件。

當有運送選項時，情況就會變得複雜，因為 modifiers 的總價無法是靜態，需要動態修改。

如要達成這項目標，您必須修改 modifiers 屬性的 additionalDisplayItems 和 total，就像處理 PaymentDetails 物件的 displayItems 屬性一樣，在 shippingaddresschange 和 shippingoptionchange 事件上進行修改。

supportedMethods 屬性現在會採用字串

PaymentMethodData 物件中的 supportedMethods 屬性 (PaymentRequest 建構函式的首個引數) 已採用表示付款方式的字串陣列。它現在會將單一字串做為引數。

請注意，目前提供陣列仍可正常運作。

錯誤做法

舊版 - 目前仍可運作。

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: ['https://bobpay.xyz']
}];

正確做法

New - 新做法。

var methodData = [{
     supportedMethods: 'basic-card',
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: 'https://bobpay.xyz'
}];

Chrome 61

可使用基本資訊卡中的 supportedTypes

當 supportedMethods 為「basic-card」時，您現在可以提供 supportedTypes，指出「credit」、「debit」和「prepaid」支援哪些類型的資訊卡。

var methodData = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
     'diners', 'discover', 'mir', 'unionpay']
   supportedTypes: ['credit', 'debit', 'prepaid']
 }
}];

請務必向付款網關確認卡片類型，因為這項篩選功能可能無法根據來源正確運作。

Chrome 57

PaymentRequest 現已支援 iframe

只要在 iframe 元素中新增 allowpaymentrequest 屬性，現在就能從 iframe 中呼叫 Payment Request API。

<iframe src="/totally/fake/url" allowpaymentrequest></iframe>

PaymentMethodData 支援「basic-card」

PaymentRequest() 建構函式的首個引數是付款方式資料的陣列。這個版本已變更 PaymentMethodData 格式。

錯誤做法

舊版 - 目前仍可運作。

var methodData = [{
     supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);

正確做法

New - 新結構。

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}];
var request = new PaymentRequest(methodData, details, options);

data 屬性的格式取決於 supportedMethods 中的值，並根據基本資訊卡規格。請注意，規格包含 supportedTypes，可接受 credit、debit 或 prepaid，但 Chrome 57 會忽略這項屬性，並將 supoprtedNetworks 中的任何值視為信用卡。

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay'],
       supportedTypes: ['credit'] <= not available
     }
}];

Chrome 56

待處理

開發人員可以新增 pending，做為付款項目資訊的一部分，表示價格尚未完全確定。pending 欄位會接受布林值。

    {
      label: "State tax",
      amount: { currency: "USD", value : "5.00" },
      pending: true
    },

這項功能通常用於顯示明細項目，例如運費或稅金金額，這兩者取決於所選的運送地址或運送選項。Chrome 會在付款要求的 UI 中標示待處理欄位。

requestPayerName

開發人員現在可以新增 requestPayerName，在運送選項 (PaymentRequest 的第三個引數) 中，要求付款者姓名，而非運送地址資訊。requestPayerName 會接受布林值。

shippingType

開發人員現在可以新增 shippingType，要求 UI 顯示「delivery」或「pickup」，而非「shipping」，這是運送選項 (PaymentRequest 的第 3 個引數) 的一部分。shippingType 可接受字串 shipping (預設值)、delivery 或 pickup。

shippingType='pickup' — shippingType="pickup"

可用於 PaymentResponse 和 PaymentAddress 的序列化函式

PaymentResponse 物件和 PaymentAddress 物件現在可序列化為 JSON。開發人員可以呼叫 toJSON() 函式，將其中一個轉換為 JSON 物件，並避免建立繁瑣的 toDict() 函式。

request.show().then(response => {
     let res = response.toJSON();
});

canMakePayment

除了確認 API 是否可用之外，您也可以在叫用 Payment Request API 之前，檢查使用者是否有有效的付款方式。請注意，這項功能屬於選用功能，因為使用者仍可在付款 UI 中新增付款方式。

let request = new PaymentRequest(methods, details, options);
if (request.canMakePayment) {
     request.canMakePayment().then(result => {
       if (result) {
         // Payment methods are available.
       } else {
         // Payment methods are not available, but users can still add
        // a new payment method in Payment UI.
       }
     }).catch(error => {
       // Unable to determine.
     });
}