Web Payments API 更新

及时了解 Web Payments 中的最新动态。

Eiji Kitamura
Danyao Wang
Danyao Wang
X
Rouslan Solomakhin
Rouslan Solomakhin
X

自 2016 年以来，网络付款功能已在浏览器中公开发布。核心 功能（Payment Request API） 现已支持多种浏览器：Chrome、Safari、Edge，很快还将支持 Firefox。 如果您刚开始接触 Web Payments，请参阅 “Web Payments 概览”，了解如何开始使用。

自 Payment Request API 和 Payment Handler API 发布以来，其各自的规范发生了许多变化。这些更改不会破坏您的有效代码，但我们建议您留意这些更改。本文总结了 并且将继续累积这些 API 更改。

新方法：hasEnrolledInstrument()

在旧版 Payment Request API 中，canMakePayment() 用于检查用户是否拥有付款工具。在规范的近期更新中，canMakePayment() 已替换为 hasEnrolledInstrument()，但其功能没有变化。

hasEnrolledInstrument() 方法已获得所有主流浏览器的一致认可。Chrome 在 74 版中实现了该方法，Webkit 和 Gecko 都存在跟踪 bug，但截至 2019 年 6 月，尚未实现该方法。

如需使用新的 hasEnrolledInstrument() 方法，请替换如下代码：

// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);

代码如下所示：

// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
  // hasEnrolledInstrument() is available.
  request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
  request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}

canMakePayment() 不再检查付款方式是否存在

因为 hasEnrolledInstrument() 现在负责检查用户的付款 插桩 canMakePayment() 已更新为仅检查付款应用的可用性。

对 canMakePayment() 的这项更改会绑定到 hasEnrolledInstrument()。自 2019 年 6 月起，此功能已在 Chrome 74 中实现，但 无法在任何其他浏览器中打开。请务必检查 hasEnrolledInstrument() 方法，然后再尝试使用。

// Checking for payment app availability without checking for instrument presence.
if (request.hasEnrolledInstrument) {
  // `canMakePayment()` behavior change corresponds to
  // `hasEnrolledInstrument()` availability.
  request.canMakePayment().then(handlePaymentAppAvailable).catch(handleError);
} else {
  console.log("Cannot check for payment app availability without checking for instrument presence.");
}

languageCode 已从 basic-card 付款方式中移除

PaymentAddress.languageCode 已从送货地址中移除，并且 basic-card的账单邮寄地址。其他付款的账单邮寄地址 方法（例如 Google Pay）不受影响。

此更改已在 Chrome 74、Firefox 和 Safari 中实施。

PaymentRequest.show() 现在接受可选的 detailsPromise

PaymentRequest.show() 允许商家在最终总金额未知的情况下显示付款请求界面。商家有 10 秒的时间来解析 detailsPromise，否则会超时。此功能旨在实现快速服务器端往返。

Chrome 75 和 Safari 中已提供此功能。

// Not implemented in Chrome 74 and older.
// There's no way to feature-detect this, so check a few
// older versions of Chrome that you're seeing hit your servers.
if (/Chrome\/((6[0-9])|(7[0-4]))/g.exec(navigator.userAgent) !== null) {
  return;
}

// Supported in Chrome 75+.
request.show(new Promise(function(resolveDetailsPromise, rejectDetailsPromise) {
  // Find out the exact total amount and call
  // `resolveDetailsPromise(details)`.
  // Use a 3 second timeout as an example.
  window.setTimeout(function() {
    resolveDetailsPromise(details);
  }, 3000); // 3 seconds.
}))
.then(handleResponse)
.catch(handleError);

PaymentRequestEvent.changePaymentMethod()

付款处理程序 API 功能 PaymentRequestEvent.changePaymentMethod() 允许付款处理程序（例如Google Pay）触发 onpaymentmethodchange 事件处理脚本。changePaymentMethod() 会返回一个 Promise，该 Promise 会解析为包含更新后的价格信息（例如重新计算税费）的商家响应。

PaymentRequestEvent.changePaymentMethod() 和 paymentmethodchange 事件，并且 Webkit 已经实施了 “技术”类别中的“paymentmethodchange”活动 预览。

// In service worker context, `self` is the global object.
self.addEventListener('paymentrequest', (evt) => {
  evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {
    if (evt.changePaymentMethod === undefined) {
      // Not implemented in this version of Chrome.
      return;
    }
    // Notify merchant that the user selected a different payment method.
    evt.changePaymentMethod('https://paymentapp.com', {country: 'US'})
    .then((responseFromMerchant) => {
      if (responseFromMerchant === null) {
        // Merchant ignored the 'paymentmethodchange' event.
        return;
      }
      handleResponseFromMerchant(responseFromMerchant);
    })
    .catch((error) => {
      handleError(error);
    });
  }));
});

商家示例：

if (request.onpaymentmethodchange === undefined) {
  // Feature not available in this browser.
  return;
}

request.addEventListener('paymentmethodchange', (evt) => {
  evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});

改进了本地开发

Chrome 76 添加了两项小改进，以提高开发者的效率。如果您本地的 使用自签名证书，您现在可以使用 --ignore-certificate-errors 命令行 flag，用于将 Chrome 设为允许网页 Payments API。如果您使用不支持 HTTPS 的本地 Web 服务器进行开发，还可以使用 --unsafely-treat-insecure-origin-as-secure=<origin> 标志让 Chrome 将 HTTP 源站视为 HTTPS。