註冊網頁式付款應用程式

瞭解如何在註冊期間設定網頁版付款應用程式。

以網頁為基礎的付款應用程式屬於漸進式網頁應用程式 (PWA),並在服務 worker 上執行。付款應用程式中的服務工作者扮演重要角色,因為它會擷取商家的付款要求、啟動付款應用程式,並協調與商家的通訊。

如要設定以網頁為基礎的付款應用程式,您必須註冊可用的付款方式和服務工作站。您可以使用網頁應用程式資訊清單,以宣告式方式設定網頁版付款應用程式。

Web Payments 包含幾個不同的技術,支援狀態則視瀏覽器而定。

Safari Firefox
電腦 Android 電腦 行動裝置 電腦/行動裝置
Payment Request API
付款處理常式 API
iOS/Android 付款應用程式 ✔* ✔*

使用網頁應用程式資訊清單設定付款應用程式

如要透過宣告方式設定網頁式付款應用程式,請提供網頁應用程式資訊清單

網頁應用程式資訊清單中的下列屬性與網站式付款應用程式相關:

  • name
  • icons
  • serviceworker
    • src
    • scope
    • use_cache

請參閱「設定付款方式」,確保付款方式資訊清單正確指向網頁應用程式資訊清單。

註冊 Service Worker Just-In-Time (JIT)

JIT 註冊只需提供網頁應用程式資訊清單,不需要額外編碼。如果您已設定 Web 應用程式資訊清單,且正確提供服務,應該就沒有問題了。瀏覽器會處理其餘部分。

對以網頁為基礎的付款應用程式進行偵錯

開發網頁式付款應用程式前端時,您可能會在商家內容與付款應用程式環境之間來回切換。下列偵錯提示可改善您在 Chrome 上的開發體驗。

在本機伺服器上開發

您使用哪個伺服器進行開發?許多開發人員傾向使用 localhost 或公司內部伺服器環境,這點相當有挑戰性,因為瀏覽器的強大功能往往需要安全的環境 (HTTPS) 和有效的憑證。Payment Request API 和 Payment Handler API 無例外,而且 localhost 或公司內部伺服器通常未提供有效的憑證。

好消息是,某些瀏覽器 (包括 Chrome) 預設免除 http://localhost 的憑證。在 Chrome 中,您也可以透過啟動 Chrome 例項,免除憑證規定。舉例來說,如要將 http://*.corp.company.com 排除在要求之外,請使用下列旗標:

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

Windows

chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

如要進一步瞭解如何透過執行階段旗標執行 Chrome,請參閱「使用旗標執行 Chromium」。

為本機伺服器轉送通訊埠

您可以使用 Chrome 開發人員工具將本機網路伺服器轉送至 Android 裝置,並透過行動瀏覽器測試運作情形。如需操作說明,請參閱「存取本機伺服器」一文。

透過電腦版開發人員工具,對 Android Chrome 上的網站進行遠端偵錯

您也可以在電腦版 DevTools 上對 Android Chrome 進行偵錯。如要瞭解如何操作,請參閱「開始使用 Android 裝置的遠端偵錯功能」。

付款處理常式事件記錄

開發人員工具可以顯示 Payment Handler API 事件,方便您在本機上進行開發。在商家情境中開啟「DevTools」,然後前往「Application」窗格下方的「Payment Handler」專區。勾選「顯示其他網域的事件」,然後按一下「記錄」按鈕,即可開始擷取傳送至處理付款的服務工作站的事件。

付款處理常式事件記錄的螢幕截圖。
付款處理常式事件記錄。

後續步驟

接下來,我們將說明服務工作者如何在執行階段協調付款交易。