Payment Handler API 将需要 CSP connect-src

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

Payment Handler API 允许付款服务机构针对 以及 Payment Request API。

此页面上的信息仅适用于同时使用 CSP（内容安全政策）的网站 和 Payment Request API。如果你不加使用或只用其中一种 可以跳过这些说明

如需查看您的付款服务机构是否在使用 Payment Handler API，请与他们联系 然后按照说明操作。

如果您对付款处理程序 API 和 CSP（内容安全政策）使用 您需要确保从服务器发出的 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. 将指定的方法标识符添加到您的 CSP。

照片由 Eduardo Soares 提供，由 Unsplash 提供