隨時掌握 Web Payments 的最新消息。
自 2016 年起,網頁付款功能已在瀏覽器中公開提供。核心功能「Payment Request API」現已支援多個瀏覽器,包括 Chrome、Safari、Edge,以及即將推出的 Firefox。如果您是 Web Payments 新手,請參閱「Web Payments 總覽」一文,瞭解如何開始使用。
自推出付款要求 API 和付款處理器 API 以來,兩者的規格已進行不少變更。這些變更不會破壞您的運作程式碼,但建議您留意這些變更。本篇文章將總結這些更新,並持續累積這些 API 變更。
新方法:hasEnrolledInstrument()
在舊版 Payment Request API 中,canMakePayment()
會用於檢查使用者是否有付款工具。在規格最近的更新中,canMakePayment()
已由 hasEnrolledInstrument()
取代,但功能並未改變。
hasEnrolledInstrument()
方法已獲得所有主要瀏覽器的共識。Chrome 已在 74 版中導入此方法,而 Webkit 和 Gecko 都存在追蹤錯誤,但截至 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()
可讓商家在得知最終總價前,先顯示付款要求 UI。商家有 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()
會傳回承諾,將解析為含有更新價格資訊 (例如重新計算稅金) 的商家回應。
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 的本機網路伺服器進行開發,也可以使用 --unsafely-treat-insecure-origin-as-secure=<origin>
標記,讓 Chrome 將 HTTP 來源視為 HTTPS。