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)， 因此您需要確保 瀏覽器會加入 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. 變更「CSP 的 Web Payment API 政策」從「預設」設為「已啟用」
  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 相片