大致了解 Payment Request API 的运作方式。
Payment Request API
当客户尝试从您的网站购买商品时,该网站必须要求客户提供付款信息,以及可选的其他信息(例如配送偏好)。您可以使用 Payment Request API (PR API) 轻松快速地实现这一点。
基本结构
构建 PaymentRequest
对象需要两个参数:付款方式和付款详情。此外,第三个付款选项参数是可选的。您可以按如下方式创建基本请求:
const request = new PaymentRequest(paymentMethods, paymentDetails);
我们来看看如何构建和使用每个参数。
付款方式
第一个参数 paymentMethods 是数组变量中支持的付款方式的列表。数组中的每个元素都由两个组件组成,即 supportedMethods
和可选的 data
。
对于 supportedMethods
,商家需要指定付款方式标识符,例如 https://bobbucks.dev/pay
。data
的存在和内容取决于 supportedMethods
的内容和付款应用提供商的设计。
这两项信息都应由付款应用提供商提供。
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
付款详细信息
第二个参数 paymentDetails 会作为对象传递,用于指定交易的付款详情。它包含必需的值 total
,用于指定客户应付的总金额。此参数还可以选择列出已购买的商品。
在以下示例中,系统会显示可选的已购商品列表(在本例中只有一件商品),以及必需的应付总金额。在这两种情况下,货币单位都与每个单独的金额一起指定。
const paymentDetails = {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
};
检查付款方式是否可用
Chrome 会在构建 PaymentRequest
对象期间检查用户和环境是否已准备好付款。
如需检查用户和环境是否已准备好付款,请在调用付款流程之前调用 canMakePayment()
。如果浏览器支持对象中指定的至少一种付款方式,则调用 canMakePayment()
会返回 true
。
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});
详细了解 MDN 上的 PaymentRequest.canMakePayment()
show()
方法
设置这两个参数并创建 request
对象(如上所示)后,您可以调用 show()
方法,该方法会显示付款应用界面。
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
付款应用界面的外观完全取决于付款应用提供商。客户同意付款后,系统会将一个 JSON 对象传递给商家,其中包含转账所需的所有信息。然后,商家可以将其发送给 PSP 以处理付款。
最后,您可以使用 response.complete('success')
或 response.complete('fail')
完成流程,从而关闭付款请求界面,具体取决于 PSP 返回的结果。
后续步骤
详细了解网站付款。