Payment Request API 概览

Eiji Kitamura

当客户尝试从您的网站购买商品时，网站必须要求客户提供付款信息，还可以选择性地要求客户提供其他信息，例如配送偏好设置。您可以使用 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' }
  }
};

检查付款方式是否可用

在构建 PaymentRequest 对象期间，Chrome 会检查用户和环境是否已准备好进行付款。

如需检查用户和环境是否已准备好进行付款，请在调用付款程序之前调用 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
});

如需详细了解 PaymentRequest.canMakePayment()，请访问 MDN

show() 方法

设置这两个参数并创建 request 对象后，您可以调用 show() 方法，该方法会显示支付应用界面。

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

支付应用界面的外观完全取决于支付应用提供商。客户同意付款后，系统会将一个 JSON 对象传递给商家，其中包含转账所需的所有信息。然后，商家可以将其发送给 PSP 以处理付款。

最后，您可以根据 PSP 返回的结果，通过完成 response.complete('success') 或 response.complete('fail') 流程来关闭付款请求界面。

后续步骤

详细了解 Web Payments。