Interfejs Payment Handler API, wraz z interfejsem Payment Request API, umożliwia dostawcom usług płatniczych udostępnianie sprzedawcom niestandardowych metod płatności.
Informacje na tej stronie dotyczą tylko witryn, które korzystają zarówno z CSP (Content-Security-Policy), jak i Payment Request API. Jeśli korzystasz z żadnej z nich lub tylko z jednego, możesz pominąć te instrukcje.
Aby sprawdzić, czy Twój dostawca usług płatniczych używa interfejsu Payment Handler API, skontaktuj się z nim i postępuj zgodnie z jego instrukcjami.
Jeśli do zapewnienia lepszej ochrony używasz interfejsu Payment Handler API i CSP (Content-Security-Policy), musisz się upewnić, że domeny żądań HTTP wysyłanych z przeglądarki są dodane 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), Twój 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 między domenami, w CSP należy też uwzględnić źródło docelowe. Jeśli np. https://example.com/pay przekierowuje do https://pay.example.com, w CSP muszą być uwzględnione obie źródła:
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
Wypróbuj lokalnie
Aby włączyć tę funkcję lokalnie, przed jej wysłaniem:
- Otwórz
chrome://flags/#web-payment-api-cspw Chrome. - Zmień „Zasady CSP dla interfejsu API płatności internetowych” z „Domyślne” na „Włączone”.
- Uruchom ponownie Chrome.
Sprawdź adresy URL żądań
Aby sprawdzić adresy URL żądań wysłanych z interfejsu Payment Handler API:
- Włącz
chrome://flags/#web-payment-api-csp. - Przejdź na stronę płatności i otwórz Narzędzia dla deweloperów w Chrome.
- 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. - Dodaj określony identyfikator metody do CSP.
Zdjęcie: Eduardo Soares, Unsplash