註冊網頁式付款應用程式

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

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

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

瀏覽器支援

Web Payments 包含幾個不同的技術,支援狀態則取決於瀏覽器。

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

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

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

下列網頁應用程式資訊清單中的屬性與以網路為基礎的付款應用程式相關:

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

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

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

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

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

開發以網頁為基礎的付款應用程式前端時,您可能會在商家情境和付款應用程式情境之間切換。下列偵錯提示可改善您在 Chrome 上的開發體驗。

在本機伺服器上開發

您使用哪個伺服器進行開發?許多開發人員傾向使用 localhost 或公司內部伺服器環境,但這可能會帶來挑戰,因為瀏覽器中的強大功能通常需要安全環境 (HTTPS) 和有效憑證。付款要求 API 和付款處理程式 API 也不例外,而本機或公司內部伺服器通常不會提供有效的憑證。

好消息是,部分瀏覽器 (包括 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 的 DevTools 將本機網頁伺服器轉送至 Android 裝置,並透過行動瀏覽器測試其運作方式。如需操作說明,請參閱「存取本機伺服器」一文。

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

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

付款處理常式事件記錄

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

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

後續步驟

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