Mit der Payment Handler API und der Payment Request API können Zahlungsanbieter ihren Händlern benutzerdefinierte Zahlungsoptionen anbieten.
Die Informationen auf dieser Seite gelten nur für Websites, die sowohl die CSP (Content Security Policy) als auch die Payment Request API verwenden. Wenn Sie keine oder nur eine der beiden Optionen verwenden, können Sie diese Anleitung überspringen.
Wenn Sie wissen möchten, ob Ihr Zahlungsanbieter die Payment Handler API verwendet, wenden Sie sich an ihn und folgen Sie der Anleitung.
Wenn Sie die Payment Handler API und CSP (Content-Security-Policy) für einen besseren Schutz verwenden, müssen Sie darauf achten, dass die Domains der vom Browser gesendeten HTTP-Anfragen der connect-src-Anweisung des CSP-Headers hinzugefügt werden.
Wenn Ihr JavaScript-Code beispielsweise new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details) aufruft, muss Ihre CSP connect-src https://example.com oder https://example.com/pay enthalten:
Content-Security-Policy: connect-src https://example.com/pay
Wenn https://example.com/pay eine plattformübergreifende Weiterleitung ist, muss auch die Zielquelle in der CSP enthalten sein. Wenn https://example.com/pay beispielsweise zu https://pay.example.com weiterleitet, müssen beide Ursprünge in der CSP enthalten sein:
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
Lokal testen
So aktivieren Sie die Funktion lokal, bevor sie bereitgestellt wird:
- Rufen Sie in Chrome
chrome://flags/#web-payment-api-cspauf. - Ändern Sie die „CSP-Richtlinie für die Web Payment API“ von „Standard“ zu „Aktiviert“.
- Starten Sie Chrome neu.
Anfrage-URLs prüfen
So prüfen Sie die URLs der Anfragen, die von der Payment Handler API gesendet wurden:
- Aktivieren Sie
chrome://flags/#web-payment-api-csp. - Rufen Sie die Zahlungsseite auf und öffnen Sie die Chrome-Entwicklertools.
- Suchen Sie nach Fehlermeldungen wie der folgenden:
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy. - Fügen Sie der CSP die angegebene Methodenkennung hinzu.
Foto von Eduardo Soares auf Unsplash