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 即將推出。如果您是網路付款新手，請參閱「網路付款總覽」一文，瞭解如何開始使用。

自 Payment Request API 和 Payment Handler API 推出後，其規格有多項變更。這些變更不會導致工作程式碼中斷，但建議您留意這一點。本文將摘要說明這些更新，並繼續累積 API 變更。

新方法：hasEnrolledInstrument()

在舊版 Payment Request API 中，canMakePayment() 用於檢查使用者是否存在使用者的付款方式。在最近規格的更新中，canMakePayment() 已替換為 hasEnrolledInstrument()，但功能維持不變。

hasEnrolledInstrument() 方法具有所有主要瀏覽器的共識。Chrome 已在 74 版中實作此 API，且 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.");
}

已從「basic-card」付款方式中移除 languageCode

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()

Payment Handler API 功能 PaymentRequestEvent.changePaymentMethod() 則允許使用付款處理常式 (例如Google Pay) 來觸發 onpaymentmethodchange 事件處理常式。changePaymentMethod() 會傳回承諾，可解析為包含最新價格資訊 (例如重新計算稅金) 的商家回應。

Chrome 76 提供 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 指令列旗標，在開發環境中設定 Chrome 允許 Web Payments API。如果您使用不支援 HTTPS 的本機網路伺服器進行開發，則可使用 --unsafely-treat-insecure-origin-as-secure=<origin> 旗標，讓 Chrome 將 HTTP 來源視為 HTTPS。