このページは Cloud Translation API によって翻訳されました。

Payment Request API の変更点

Eiji Kitamura

Twitter GitHub Glitch Mastodon

Chrome 62

PaymentDetailsModifier を利用できるようになりました

支払いリクエストでは、顧客が選択したお支払い方法に応じて割引や追加料金が必要になることがあります。PaymentDetailsModifier は、これを行うために使用できる機能です。

modifiers プロパティを、PaymentDetailsModifier オブジェクトの配列とともに PaymentRequest コンストラクタの 2 番目の引数に追加します。これは、ユーザーが選択したお支払い方法に応じて表示アイテムと合計を変更する方法の宣言ルールです。

次の例は、クレジットカードによる支払いを選択する際に、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 の合計金額は静的でなく、動的な変更が必要になるため、手順が少し複雑になります。

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

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

PaymentMethodData オブジェクトの supportedMethods プロパティ（PaymentRequest コンストラクタの最初の引数）が、お支払い方法を示す文字列の配列を受け取っています。引数として 1 つの文字列を取ります。

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

すべきでないこと

旧バージョン - 当面は機能します。

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 が iframes 内で利用できるようになりました

Payment Request API を iframe 内から呼び出せるようになりました。そのためには、allowpaymentrequest 属性を iframe 要素に追加します。

<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 に保留中のフィールドが表示されます。

requestPayerName

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

shippingType

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