Die Payment Handler API ermöglicht es Zahlungsdienstleistern, Händler und die Payment Request API.
Die Informationen auf dieser Seite gelten nur für Websites, die sowohl Content-Security-Policy (CSP) und die Payment Request API. Wenn Sie keine der beiden oder nur eine der beiden Methoden verwenden, können Sie diese Anleitung überspringen.
Wenn du prüfen möchtest, ob dein Zahlungsanbieter die Payment Handler API verwendet, wende dich an ihn und folgen Sie der jeweiligen Anleitung.
Wenn Sie die Payment Handler API und CSP (Content-Security-Policy) für
besser geschützt werden, müssen Sie dafür sorgen, dass die Domains der von
werden der Anweisung connect-src
des CSP-Headers hinzugefügt.
Wenn Ihr JavaScript-Code beispielsweise new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details)
aufruft, dann:
Ihre CSP-connect-src
muss https://example.com
enthalten oder
https://example.com/pay
:
Content-Security-Policy: connect-src https://example.com/pay
Wenn https://example.com/pay
eine ursprungsübergreifende Weiterleitung ist, hat das Ziel
„origin“ auch in der CSP enthalten sein. Wenn beispielsweise
https://example.com/pay
leitet zu https://pay.example.com
weiter, dann beide
müssen 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 ausgeliefert wird:
- Rufen Sie in Chrome
chrome://flags/#web-payment-api-csp
auf. - Änderung der CSP-Richtlinie für die Web Payment API von „Standard“ auf „Aktiviert“.
- Starten Sie Chrome neu.
Anfrage-URLs prüfen
So überprüfen Sie die URLs der Anfragen, die von der Payment Handler API gesendet wurden:
chrome://flags/#web-payment-api-csp
aktivieren.- Rufen Sie die Zahlungsseite auf und öffnen Sie die Entwicklertools von Chrome.
- Suchen Sie nach Fehlermeldungen wie den folgenden:
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
- Fügt Ihrer CSP die angegebene Methodenkennung hinzu.
Foto von Eduardo Soares auf Unsplash