Для API обработчика платежей потребуется CSP connect-src.

Эйдзи Китамура
Руслан Соломахин
Rouslan Solomakhin
GitHub

API обработчика платежей позволяет поставщикам платежных услуг предоставлять продавцам индивидуальный платежный интерфейс, а также API запроса платежей .

Информация на этой странице применима только к веб-сайтам, которые используют как CSP (Content-Security-Policy) , так и API запроса платежа. Если вы не используете ни один из них или используете только один из них, то вы можете пропустить эти инструкции.

Чтобы проверить, использует ли ваш поставщик платежных услуг API обработчика платежей, свяжитесь с ним и следуйте его инструкциям.

Если вы используете API обработчика платежей и CSP (Content-Security-Policy) для лучшей защиты, вам необходимо убедиться, что домены HTTP-запросов, отправляемых из браузера, добавлены в директиву connect-src заголовка CSP .

Например, если ваш код 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://flags/#web-payment-api-csp в Chrome.
  2. Измените «Политику CSP для API веб-платежей» с «По умолчанию» на «Включено».
  3. Перезапустите Chrome.

Проверьте URL-адреса запросов

Чтобы проверить URL-адреса запросов, отправленных из 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.

Фото Эдуардо Соареса на Unsplash