Payment Handler API 需要 CSP connect-src

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

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

在本機試用

如要在功能推出前在本地啟用，請按照下列步驟操作：

  1. 前往 Chrome 的 chrome://flags/#web-payment-api-csp。
  2. 將「Web Payment API 的 CSP 政策」從「預設」變更為「已啟用」。
  3. 重新啟動 Chrome。

檢查要求網址

如要檢查從 Payment Handler API 傳送的要求網址，請按照下列步驟操作：

  1. 啟用 chrome://flags/#web-payment-api-csp。
  2. 前往結帳頁面，並開啟 Chrome 的開發人員工具。
  3. 請留意以下類型的錯誤訊息： text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. 將指定的方法 ID 新增至 CSP。

相片來源：Eduardo Soares 在 Unsplash 網站上提供