L'API Payment Handler permet aux fournisseurs de paiement de mettre leur expérience de paiement personnalisée à la disposition des marchands, avec l'API Payment Request.
Les informations de cette page ne s'appliquent qu'aux sites Web qui utilisent à la fois la CSP (Content-Security-Policy) et l'API Payment Request. Si vous n'utilisez ni l'un ni l'autre, ou seulement l'un d'eux, vous pouvez ignorer ces instructions.
Pour savoir si votre fournisseur de services de paiement utilise l'API Payment Handler, contactez-le et suivez ses instructions.
Si vous utilisez l'API Payment Handler et le CSP (Content-Security-Policy) pour une meilleure protection, vous devez vous assurer que les domaines des requêtes HTTP envoyées depuis le navigateur sont ajoutés à la directive connect-src de l'en-tête CSP.
Par exemple, si votre code JavaScript appelle new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), votre connect-src CSP doit inclure https://example.com ou https://example.com/pay:
Content-Security-Policy: connect-src https://example.com/pay
Si https://example.com/pay est une redirection inter-origine, l'origine de destination doit également être incluse dans le CSP. Par exemple, si https://example.com/pay redirige vers https://pay.example.com, les deux origines doivent être incluses dans le CSP:
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
Essayer en local
Pour activer la fonctionnalité localement avant qu'elle ne soit déployée:
- Accédez à
chrome://flags/#web-payment-api-cspdans Chrome. - Remplacez "Default" (Par défaut) par "Enabled" (Activé) pour "CSP policy for Web Payment API" (Règle du CSP pour l'API Web Payment).
- Redémarrez Chrome.
Vérifier les URL de requête
Pour vérifier les URL des requêtes envoyées à partir de l'API Payment Handler:
- Activez
chrome://flags/#web-payment-api-csp. - Accédez à votre page de paiement, puis ouvrez les outils pour les développeurs de Chrome.
- Recherchez des messages d'erreur tels que les suivants :
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy. - Ajoutez l'identifiant de méthode spécifié à votre CSP.
Photo par Eduardo Soares sur Unsplash