Mit der Payment Handler API können Zahlungsanbieter ihr benutzerdefiniertes Zahlungserlebnis für Händler zusammen mit der Payment Request API verfügbar machen.
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 verwenden, können Sie diese Anleitung überspringen.
Wenn du prüfen möchtest, ob dein Zahlungsdienstleister die Payment Handler API verwendet, wende dich an ihn und folge der Anleitung.
Wenn du die Payment Handler API und CSP (Content-Security-Policy) für einen besseren Schutz verwendest, musst du dafür sorgen, dass die Domains von HTTP-Anfragen, die vom Browser gesendet werden, 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 die CSP connect-src entweder https://example.com oder https://example.com/pay enthalten:
Content-Security-Policy: connect-src https://example.com/pay
Wenn https://example.com/pay eine ursprungsübergreifende Weiterleitung ist, sollte auch der Zielursprung in die CSP aufgenommen werden. 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
Vor Ort ausprobieren
So aktivieren Sie die Funktion vor dem Versand lokal:
- Rufen Sie
chrome://flags/#web-payment-api-cspin Chrome auf. - Ändern Sie die „CSP-Richtlinie für die Web Payment API“ von „Standard“ in „Aktiviert“.
- Starten Sie Chrome neu.
Anfrage-URLs prüfen
So überprüfst du die URLs der Anfragen, die von der Payment Handler API gesendet wurden:
chrome://flags/#web-payment-api-cspaktivieren.- Gehen Sie zur Zahlungsseite und öffnen Sie die Entwicklertools von Chrome.
- 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 Ihrer CSP die angegebene Methoden-ID hinzu.
Foto von Eduardo Soares bei Unsplash