Chrome 62
PaymentDetailsModifier 现已可用
在付款请求中,在某些情况下,您可能希望根据客户选择的付款方式提供折扣或额外费用。PaymentDetailsModifier
是可用于实现这一点的功能。
将 modifiers
属性以及 PaymentDetailsModifier
对象数组添加到 PaymentRequest
构造函数的第二个参数中,该对象是关于应如何根据客户选择的付款方式修改显示项数和总数的声明性规则。
以下示例展示了如何声明用户因选择信用卡付款而需要支付 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 | 添加 AdditionalDisplayItem 后的总价。 |
data | 对于 basic-card 付款,这将用作通过 supportedTypes 过滤特定卡类型的方法。除此之外,此参数的使用取决于付款方式(付款应用)。请参阅每种付款方式提供的文档。 |
当具有运费选项时,情况就会有些棘手,因为 modifiers
的总价不能是静态的,并且需要动态修改。
为此,您需要根据 shippingaddresschange
和 shippingoptionchange
事件修改 modifiers
属性的 additionalDisplayItems
和 total
,就像修改 PaymentDetails
对象的 displayItems
属性一样。
supportedMethods 属性现在接受字符串
PaymentMethodData
对象中的 supportedMethods
属性(PaymentRequest
构造函数的第一个参数)已获取表示付款方式的字符串数组。它现在接受一个字符串作为参数。
请注意,指定数组目前仍然有效。
旧版 - 目前仍可使用。
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
基本卡片中的 supportedType 可用
当 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
现在可在 iframe 中使用 PaymentRequest
现在,可以通过将 allowpaymentrequest
属性添加到 iframe
元素,从 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 会在界面中显示付款请求的待处理字段。
requestPayerName
作为运费选项(PaymentRequest
的第三个参数)的一部分,开发者现在可以添加 requestPayerName
,以请求除了送货地址信息之外的付款人姓名。requestPayerName
接受布尔值。
shippingType
作为运费选项(PaymentRequest
的第三个参数)的一部分,开发者现在可以添加 shippingType
以请求界面显示“送货”或“自提”,而不是“运费”。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 之前检查用户是否拥有有效的付款方式。请注意,此操作是可选的,因为用户仍然可以在付款界面中添加新的付款方式。
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.
});
}