Interfejs Payment Handler API będzie wymagać CSP connect-src

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

Interfejs Payment Handler API pozwala dostawcom usług płatniczych na udostępnianie sprzedawców oraz interfejs Payment Request API.

Informacje na tej stronie dotyczą tylko witryn, które korzystają z zasad Content-Security-Policy oraz Payment Request API. Jeśli nie używasz żadnego z tych rozwiązań lub używasz jednego z nich, mogą pominąć te instrukcje.

Aby sprawdzić, czy Twój dostawca usług płatniczych korzysta z interfejsu Payment Handler API, skontaktuj się z nim i postępuj zgodnie z jego instrukcjami.

Jeśli używasz interfejsu Payment Handler API i CSP (Content-Security-Policy) lepszą ochronę, musisz upewnić się, że domeny żądań HTTP wysyłanych z przeglądarka jest dodana do dyrektywy connect-src w nagłówku CSP.

Jeśli na przykład Twój kod JavaScript wywołuje new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), to CSP connect-src musi zawierać https://example.com lub https://example.com/pay:

Content-Security-Policy: connect-src https://example.com/pay

Jeśli https://example.com/pay to przekierowanie z innej domeny, miejsce docelowe punkt początkowy powinien być także uwzględniony w CSP. Na przykład, jeśli https://example.com/pay przekierowuje na stronę https://pay.example.com, a potem obie źródła muszą być uwzględnione w CSP:

Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com

Wypróbuj lokalnie

Aby włączyć tę funkcję lokalnie przed jej wysyłką:

  1. Otwórz chrome://flags/#web-payment-api-csp w Chrome.
  2. Zmiana „zasad CSP dla interfejsu Web Payment API” z „Domyślne” na „Włączone”.
  3. Uruchom ponownie Chrome.

Sprawdzanie adresów URL żądań

Aby sprawdzić adresy URL żądań wysłanych z interfejsu Payment Handler API:

  1. Włącz chrome://flags/#web-payment-api-csp.
  2. Wejdź na stronę płatności i otwórz Narzędzia dla deweloperów w Chrome.
  3. Poszukaj komunikatów o błędach podobnych do tych: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. Dodaj podany identyfikator metody do CSP.

Zdjęcie: Eduardo Soares, Unsplash