Payment Handler API 将需要 CSP connect-src

Rouslan Solomakhin
Rouslan Solomakhin

借助 Payment Handler APIPayment Request API,付款服务提供商可以为商家提供自定义付款体验。

本页中的信息仅适用于同时使用 CSP (Content-Security-Policy) 和 Payment Request API 的网站。如果您不使用这两种方法,或者只使用其中一种方法,则可以跳过这些说明。

如需检查您的付款服务提供商是否在使用 Payment Handler API,请与其联系并按照其说明操作。

如果您要使用 Payment Handler API 和 CSP(内容安全政策)来加强保护,则需要确保从浏览器发送的 HTTP 请求的域名已添加到 CSP 标头的 connect-src 指令中。

例如,如果您的 JavaScript 代码调用 new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details),则您的 CSP connect-src 必须包含 https://example.comhttps://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 SoaresUnsplash 上发布