Payment Request API 的工作原理

了解 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/paydata 的存在和内容取决于 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') 完成该过程来关闭 Payment Request UI,具体取决于 PSP 返回的结果。

下一步

详细了解Web Payments