Payment Request API 的工作原理

大致了解 Payment Request API 的运作方式。

Eiji Kitamura

Payment Request API

当客户尝试从您的网站购物时，网站必须询问 客户提供付款信息和其他信息（可选） 例如运费偏好设置您可以使用 Payment Request API (PR API)。

基本结构

构建 PaymentRequest 对象需要两个参数：payment 方法和付款信息。此外，第三个 payment options 参数 是可选属性。可以创建如下所示的基本请求：

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')，具体取决于 返回的结果。

后续步骤

详细了解网络付款。