Accepter un paiement avec Express Checkout Element
Utilisez une seule intégration pour accepter les paiements par le biais de boutons de paiement en un clic.
Le composant Element Express Checkout vous offre une intégration unique pour accepter des paiements à l’aide de différents boutons de paiement en un clic, dont Link, PayPal, Apple Pay, Google Pay et Amazon Pay.
En fonction des moyens de paiement pris en charge par leur appareil et leur navigateur, les clients voient des boutons différents. Les appareils compatibles prennent automatiquement en charge Google Pay et Link. La prise en charge d’Apple Pay et de PayPal nécessite des étapes supplémentaires.
Nous vous recommandons de collecter les informations de paiement avant de créer un Intent lorsque vous utilisez le composant Express Checkout Element. Si vous avez déjà effectué une intégration avec le composant Payment Element, vous devrez peut-être mettre à jour votre intégration.
Avant de commencer![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
- Ajoutez un moyen de paiement à votre navigateur. Par exemple, vous pouvez ajouter une carte à votre compte Google Pay ou à Cartes pour Safari.
- Fournir votre application via HTTPS. Cette exigence s’applique à la fois en développement et en production. Vous pouvez également utiliser un service comme ngrok.
- Enregistrez et vérifiez votre domaine en mode test et en mode production.
- Créez un compte d’environnement de test PayPal pour tester votre intégration.
Configurer StripeCôté serveur![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Tout d’abord, créez un compte Stripe ou connectez-vous.
Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :
Activer des moyens de paiement![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Activez les moyens de paiement que vous souhaitez prendre en charge dans vos paramètres des moyens de paiement. Vous devez activer au moins un moyen de paiement.
Par défaut, Stripe active les cartes bancaires et autres moyens de paiement courants. Vous pouvez activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page des options d’intégration des moyens de paiement pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre page tarifaire pour prendre connaissance des frais que nous appliquons.
Créer et intégrer l'Express Checkout ElementCôté client![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
L’Express Checkout Element contient une balise iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de la page de paiement doit également commencer par https://
et non http://
.
Collecter les informations des clients et afficher des postes de factureCôté client![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Gérez l’événement de clic pour transmettre les options à l’Express Checkout Element. Après avoir reçu l’événement de clic, désactivez l’interaction sur votre page de paiement.
Créer un PaymentIntentCôté serveur![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet PaymentIntent, qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus.
Créez un PaymentIntent sur votre serveur avec un montant et une devise. Ces informations doivent correspondre à celles définies sur l’instance stripe.
à l’étape 3. Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela empêchera les clients malintentionnés de fixer leurs propres tarifs.
Le PaymentIntent renvoyé inclut une clé secrète à utiliser côté client pour mener à bien le processus de paiement en toute sécurité, plutôt que de transmettre l’objet PaymentIntent dans son intégralité. Vous pouvez utiliser différentes approches pour transmettre cette clé secrète côté client.
Envoyer le paiement à StripeCôté client![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Utilisez stripe.confirmPayment pour finaliser le paiement à l’aide des informations de l’Express Checkout Element.
Note
For Amazon Pay, the amount you confirm in the PaymentIntent must match the amount the buyer pre-authorized to prevent the payment from being declined.
Fournissez une return_url à cette fonction pour indiquer où Stripe doit rediriger l’utilisateur une fois le paiement effectué. Votre utilisateur peut être redirigé vers un site intermédiaire avant d’être redirigé vers la return_
. Payments redirige immédiatement l’utilisateur vers la return_
lorsqu’un paiement aboutit.
Si vous ne souhaitez pas effectuer de redirection une fois le paiement effectué, vous pouvez définir la redirection sur if_
. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.
Tester l'intégration![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Avant de passer en mode production, testez l’intégration de chaque moyen de paiement. Pour déterminer la compatibilité d’un moyen de paiement avec un navigateur, consultez les navigateurs pris en charge. Si vous utilisez Express Checkout Element dans un iframe, l’attribut allow de cet iframe doit être défini sur payment *
.
Mentionner le fonctionnement de Stripe à vos clients![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Stripe recueille des informations sur les interactions des clients avec Elements afin de vous fournir des services, de prévenir la fraude et d’améliorer ses services. Cela inclut l’utilisation de cookies et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une même session Checkout. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour que Stripe puisse utiliser les données à cette fin. Pour en savoir plus, visitez notre Centre de confidentialité.