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
を受け入れます。
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.
});
}