瞭解如何在註冊期間設定網頁版付款應用程式。
以網頁為基礎的付款應用程式屬於漸進式網頁應用程式 (PWA),並在服務 worker 上執行。付款應用程式中的服務工作者扮演重要角色,因為它會擷取商家的付款要求、啟動付款應用程式,並協調與商家的通訊。
如要設定以網頁為基礎的付款應用程式,您必須註冊可用的付款方式和服務工作站。您可以使用網頁應用程式資訊清單,以宣告式方式設定網頁版付款應用程式。
瀏覽器支援
Web Payments 包含幾個不同的技術,支援狀態則視瀏覽器而定。
使用網頁應用程式資訊清單設定付款應用程式
如要透過宣告方式設定網頁式付款應用程式,請提供網頁應用程式資訊清單。
網頁應用程式資訊清單中的下列屬性與網站式付款應用程式相關:
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」專區。勾選「顯示其他網域的事件」,然後按一下「記錄」按鈕,即可開始擷取傳送至處理付款的服務工作站的事件。
後續步驟
接下來,我們將說明服務工作者如何在執行階段協調付款交易。