瞭解如何在註冊期間設定網頁式付款應用程式。
網站式付款應用程式屬於漸進式網頁應用程式 (PWA),並在服務上執行 工作站。 付款應用程式中的 Service Worker 扮演著重要的角色,因為他們可以收取付款 啟動付款應用程式,然後調解 與商家之間的通訊
您需要註冊可用的付款方式,才能設定網站式付款應用程式 以及 Service Worker您可以設定網站式付款應用程式 透過網頁應用程式資訊清單宣告。
瀏覽器支援
「網頁付款」功能結合了幾項不同的技術和支援服務 狀態取決於瀏覽器。
使用網頁應用程式資訊清單設定付款應用程式
如要透過宣告方式設定網頁式付款應用程式,請提供網頁應用程式 資訊清單。
網頁應用程式資訊清單中的下列屬性與網站式付款應用程式相關:
name
icons
serviceworker
src
scope
use_cache
請參閱「設定付款」一節 方法 確保付款方式資訊清單指向網頁應用程式資訊清單 正確做法。
及時註冊服務工作處理程序 (JIT)
JIT 註冊作業只需提供網頁應用程式 資訊清單 完全不需要額外編碼如果您已設定網頁應用程式資訊清單 應該就可以了瀏覽器會處理 休息。
對網路式付款應用程式進行偵錯
開發網頁式付款應用程式前端時,您或許會需要 商家情境和付款應用程式情境。下列偵錯提示 以及您的 Chrome 開發使用體驗
在本機伺服器上開發
您使用哪個伺服器進行開發?許多開發人員傾向使用 localhost 或公司內部伺服器環境 這仍然是一項挑戰 瀏覽器強大的功能,往往需要安全的環境 (HTTPS) 和有效的憑證Payment Request API 和 Payment Handler API 沒有例外狀況,而且本機伺服器或公司內部伺服器通常都沒有 有效的憑證
好消息是部分瀏覽器 (包括 Chrome) 免除
預設為 http://localhost
。另外,您也可以在 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 Chrome 上從遠端對網站進行偵錯
此外,您也可以使用電腦版開發人員工具對 Android Chrome 進行偵錯。如要瞭解具體做法 請參閱「開始使用 Android 遠端偵錯 裝置:
付款處理常式事件記錄
開發人員工具可以顯示 Payment Handler API 事件 可以更輕鬆地進行本機開發作業在商家情境中開啟開發人員工具,然後前往 「付款處理常式」在「Application」窗格下。勾選「顯示活動」 從其他網域匯入然後按一下「Record」這個按鈕可用來開始擷取已傳送的事件 您向負責處理付款的 Service Worker 傳送要求
![Payment Handler 事件記錄的螢幕截圖。](https://web.dev/static/articles/registering-a-web-based-payment-app/image/a-screenshot-payment-han-2353defdf5615.png?authuser=002&hl=zh-tw)
後續步驟
下一步是瞭解服務工作處理程序如何自動化調度管理付款 進行測試