Payment Handler API 可讓付款服務供應商搭配 Payment Request API 為商家提供自訂付款體驗。
本頁資訊僅適用於使用 CSP (Content-Security-Policy) 和 Payment Request API 的網站。如果您同時使用兩者,或只使用其中一種,可以略過這些操作說明。
如要檢查您的付款服務供應商是否正在使用 Payment Handler API,請與該供應商聯絡,並按照對方的指示操作。
如果您使用 Payment Handler API 和 CSP (Content-Security-Policy) 提高保護力,就必須確保從瀏覽器傳送的 HTTP 要求網域已新增至 CSP 標頭的 connect-src
指令。
例如,如果您的 JavaScript 程式碼叫用 new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details)
,則 CSP connect-src
必須包含 https://example.com
或 https://example.com/pay
:
Content-Security-Policy: connect-src https://example.com/pay
如果 https://example.com/pay
是跨來源重新導向,則目的地來源也應包含在 CSP 中。舉例來說,如果 https://example.com/pay
重新導向至 https://pay.example.com
,則這兩個來源都必須包含在 CSP 中:
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
在本機試用
如何在出貨前先在本機啟用這項功能:
- 透過 Chrome 前往
chrome://flags/#web-payment-api-csp
。 - 將 Web Payment API 的「CSP 政策」從「預設」變更為「已啟用」。
- 重新啟動 Chrome。
檢查要求網址
如要查看透過 Payment Handler API 傳送的要求網址,請按照下列步驟操作:
- 啟用
chrome://flags/#web-payment-api-csp
。 - 前往結帳頁面,然後開啟 Chrome 開發人員工具。
- 尋找類似下列的錯誤訊息:
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
- 將指定方法的 ID 新增至您的 CSP。
相片來源:Eduardo Soares 在 Unsplash 網站上