Met de Payment Handler API kunnen betalingsproviders hun aangepaste betalingservaring beschikbaar maken voor verkopers, samen met de Payment Request API .
De informatie op deze pagina is alleen van toepassing op websites die zowel CSP (Content-Security-Policy) als de Payment Request API gebruiken. Als u geen van beide of slechts één van de twee gebruikt, kunt u deze instructies overslaan.
Als u wilt controleren of uw betalingsprovider de Payment Handler API gebruikt, neemt u contact met hen op en volgt u hun instructies.
Als u de Payment Handler API en CSP (Content-Security-Policy) gebruikt voor een betere bescherming, moet u ervoor zorgen dat de domeinen van HTTP-verzoeken die vanuit de browser worden verzonden, worden toegevoegd aan de connect-src richtlijn van de CSP-header .
Als uw JavaScript-code bijvoorbeeld new PaymentRequest([{supportedOrigins: 'https://example.com/pay'}], details) aanroept, moet uw CSP connect-src https://example.com of https://example.com/pay :
Content-Security-Policy: connect-src https://example.com/pay
Als https://example.com/pay een cross-origin-omleiding is, moet de bestemmingsoorsprong ook in de CSP worden opgenomen. Als https://example.com/pay bijvoorbeeld omleidt naar https://pay.example.com , moeten beide oorsprongen worden opgenomen in de CSP:
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
Probeer het lokaal uit
Om de functie lokaal in te schakelen voordat deze wordt verzonden:
- Ga naar
chrome://flags/#web-payment-api-cspin Chrome. - Wijzig 'CSP-beleid voor Web Payment API' van 'Standaard' in 'Ingeschakeld'.
- Start Chrome opnieuw.
Controleer de verzoek-URL's
Om de URL's te controleren van de verzoeken die zijn verzonden vanuit de Payment Handler API:
- Schakel
chrome://flags/#web-payment-api-csp. - Ga naar uw betaalpagina en open de ontwikkelaarstools van Chrome.
- Zoek naar foutmeldingen zoals de volgende:
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy. - Voeg de opgegeven methode-ID toe aan uw CSP.
Foto door Eduardo Soares op Unsplash