Interfejs Payment Handler API umożliwia dostawcom usług płatniczych udostępnianie sprzedawcom ich własnych rozwiązań płatności, wraz z interfejsem 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:
- Otwórz
chrome://flags/#web-payment-api-cspw Chrome. - Zmień ustawienie „Zasady CSP dotyczące interfejsu Web Payment API” z „Domyślne” na „Włączone”.
- Uruchom ponownie Chrome.
Sprawdź adresy URL żądań
Aby sprawdzić adresy URL żądań wysyłanych z interfejsu Payment Handler API:
- Włącz
chrome://flags/#web-payment-api-csp. - Otwórz stronę płatności i Narzędzia deweloperskie w Chrome.
- Poszukaj komunikatów o błędach takich jak:
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy. - Dodaj do CSP określony identyfikator metody.
Zdjęcie autorstwa Eduardo Soares z Unsplash