及时掌握网络付款的最新动态。
自 2016 年以来,Web Payments 已面向浏览器公开提供。核心功能 Payment Request API 现可在多种浏览器(Chrome、Safari、Edge 和 Firefox 即将推出)上使用。如果您刚开始接触网站付款,请先参阅“网站付款概览”。
自 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 中已实现该 API,但在任何其他浏览器中均无法实现。请务必先检查 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.");
}
已从“basic-card
”付款方式中移除“languageCode
”
已从“basic-card
”的送货地址和账单邮寄地址中移除“PaymentAddress.languageCode
”。其他付款方式(例如 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()
Payment Handler API 功能 PaymentRequestEvent.changePaymentMethod()
支持使用Google Pay)来触发 onpaymentmethodchange
事件处理脚本。changePaymentMethod()
会返回一个解析为商家响应的 promise,其中包含更新后的价格信息(例如重新计算税费)。
PaymentRequestEvent.changePaymentMethod()
和 paymentmethodchange
事件在 Chrome 76 中均可用,并且 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
命令行标记让 Chrome 在您的开发环境中允许 Web Payments API。如果您使用不支持 HTTPS 的本地 Web 服务器进行开发,则还可以使用 --unsafely-treat-insecure-origin-as-secure=<origin>
标志,使 Chrome 将 HTTP 来源视为 HTTPS。