L'API du gestionnaire de paiement nécessite CSP connect-src

Eiji Kitamura

Rouslan Solomakhin

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 si vous n'utilisez qu'un seul d'entre 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

Remarque:Un identifiant de mode de paiement d'URL est autorisé à effectuer jusqu'à trois redirections sur le même site. Si des redirections se produisent, toutes les URL doivent figurer dans le CSP.

Essayer en local

Pour activer la fonctionnalité localement avant qu'elle ne soit déployée:

1. Accédez à chrome://flags/#web-payment-api-csp dans Chrome.
2. Remplacez "Default" (Par défaut) par "Enabled" (Activé) pour "CSP policy for Web Payment API" (Règle du CSP pour l'API Web Payment).
3. 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:

1. Activez chrome://flags/#web-payment-api-csp.
2. Accédez à votre page de paiement, puis ouvrez les outils pour les développeurs de Chrome.
3. 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.
4. Ajoutez l'identifiant de méthode spécifié à votre CSP.

Photo par Eduardo Soares sur Unsplash