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

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

Interfejs Payment Handler API umożliwia dostawcom usług płatniczych udostępnianie sprzedawcom ich własnych rozwiązań płatności, a także korzystanie z interfejsu Payment Request API.

Informacje na tej stronie dotyczą tylko witryn, które korzystają zarówno z standardu CSP (Content Security Policy), jak i z interfejsu Payment Request API. Jeśli nie używasz żadnej z tych usług lub używasz tylko jednej z nich, możesz pominąć te instrukcje.

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

Jeśli korzystasz z interfejsu Payment Handler API i standardu CSP (Content-Security-Policy), aby zapewnić lepszą ochronę, musisz upewnić się, że domeny żądań HTTP wysyłanych z przeglądarki zostały dodane do dyrektywy connect-src nagłówka CSP.

Jeśli na przykład kod JavaScript wywołuje funkcję new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), nagłówek CSP connect-src musi zawierać element 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 między domenami, w zasadach CSP należy też uwzględnić domenę docelową. Jeśli na przykład https://example.com/pay przekierowuje do https://pay.example.com, w nagłówku CSP należy uwzględnić oba źródła:

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

Wypróbuj lokalnie

Aby włączyć funkcję lokalnie przed jej udostępnieniem:

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

Sprawdź adresy URL żądań

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

  1. Włącz chrome://flags/#web-payment-api-csp.
  2. Otwórz stronę płatności i Narzędzia deweloperskie w Chrome.
  3. Wyświetlają się komunikaty o błędach o takim brzmieniu:text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. Dodaj do CSP określony identyfikator metody.

Zdjęcie autorstwa Eduardo Soares z Unsplash