Для 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) , то ваш connect-src CSP должен включать 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. Перезапустите Хром.

Проверьте 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