Payment Request API の変更点

Eiji Kitamura

Chrome 62

PaymentDetailsModifier が利用可能に

支払いリクエストで、顧客が選択したお支払い方法に応じて割引や追加料金を提供する場合があります。PaymentDetailsModifier は、この目的に使用できる機能です。

PaymentRequest コンストラクタの 2 番目の引数に modifiers プロパティと、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 には次のパラメータが含まれます。

配送オプションがある場合、modifiers の合計金額は静的ではなく動的変更が必要になるため、状況は少し複雑になります。

そのためには、PaymentDetails オブジェクトの displayItems プロパティに対して行うのと同様に、shippingaddresschange イベントと shippingoptionchange イベントで modifiers プロパティの additionalDisplayItems と total を変更します。

supportedMethods プロパティが文字列を受け取るようになりました

PaymentMethodData オブジェクト（PaymentRequest コンストラクタの最初の引数）の supportedMethods プロパティは、支払い方法を表す文字列の配列を受け取っています。引数として単一の文字列を受け取るようにしました。

当面は、配列を指定しても機能します。

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

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);

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

data プロパティの形式は supportedMethods の値によって異なり、基本カードの仕様に基づいています。仕様には、credit、debit、prepaid を受け入れる supportedTypes が含まれていますが、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 に pending フィールドが表示されます。

requestPayerName

配送オプション（PaymentRequest の 3 番目の引数）の一部として、デベロッパーは requestPayerName を追加して、配送先住所情報とは別に支払者の氏名をリクエストできるようになりました。requestPayerName はブール値を受け入れます。

shippingType

配送オプション（PaymentRequest の 3 番目の引数）の一部として、デベロッパーは shippingType を追加して、UI に「配送」ではなく「配達」または「集荷」を表示するようリクエストできるようになりました。shippingType には、shipping（デフォルト）、delivery、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.
     });
}