Collecter les informations de paiement avant de créer un Intent
Développez une intégration dans laquelle vous pouvez afficher l'Element Payment avant de créer un objet PaymentIntent ou SetupIntent.
Le Payment Element vous permet d’accepter plusieurs moyens de paiement à l’aide d’une seule intégration. Vous allez créer un tunnel de paiement personnalisé dans lequel vous afficherez le Payment Element, créerez le PaymentIntent et confirmerez le paiement depuis le navigateur du client. Si vous préférez confirmer le paiement depuis le serveur, consultez la page Finaliser les paiements sur le serveur.
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 :
Mise en garde
Ce chemin d’intégration ne prend pas en charge BLIK ou les prélèvements automatiques qui utilisent le Système automatisé de compensation et de règlement (SACR).
Affichez vos paramètres des moyens de paiement et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un PaymentIntent.
Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page Prise en charge des moyens de paiement pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre page des tarifs pour prendre connaissance des frais que nous appliquons.
Utilisez le Payment Element pour envoyer en toute sécurité les informations de paiement collectées dans un iFrame à Stripe via une connexion HTTPS.
Conflits entre les iFrames
Évitez de placer le Payment Element dans un autre iframe, car il entre en conflit avec les moyens de paiement qui nécessitent une redirection vers une autre page pour confirmer le paiement.
Your checkout page URL must start with https:// rather than http:// for your integration to work. You can test your integration without using HTTPS, but remember to enable it when you’re ready to accept live payments.
Le composant Element Payment affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le moyen de paiement sélectionné par le client.
Vous pouvez personnaliser le Payment Element pour l’adapter au design de votre site en transmettant l’objet Appearance dans les options lors de la création du fournisseur Elements.
Collecter les adresses
Par défaut, le Payment Element ne collecte que les informations nécessaires à la facturation. Certaines opérations, telles que le calcul des taxes ou la saisie des informations de livraison, nécessitent l’adresse complète de votre client. Vous pouvez :
- Utilisez l’Address Element pour tirer parti des fonctionnalités de saisie automatique et de localisation et recueillir l’adresse complète de votre client. Cela permet de garantir un calcul des taxes le plus précis possible.
- Recueillez l’adresse à l’aide de votre propre formulaire personnalisé.
Vous pouvez adapter la mise en page du composant Payment Element (en accordéon ou en onglets) à votre interface de paiement. Pour plus d’informations sur chacune des propriétés, consultez la section elements.create.
L’image suivante illustre différents affichages du même composant Element Payment correspondant à différentes configurations de mise en page :
Mise en page du composant Element Payment
Maintenant que vous avez ajouté le composant Payment Element à votre page, vous pouvez personnaliser son apparence pour l’adapter à votre design. Pour en savoir plus sur la personnalisation de ce composant, consultez la page dédiée à l’API Elements Appearance.
Personnaliser le Payment Element
Vous pouvez configurer le composant Payment Element de façon à enregistrer les moyens de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la fonctionnalité d’enregistrement des moyens de paiement, qui permet à Payment Element de :
- De demander aux acheteurs s’ils consentent à ce que leur moyen de paiement soit enregistré
- Enregistrer les moyens de paiement lorsque les clients y consentent
- Afficher les moyens de paiement enregistrés des acheteurs lors de leurs futurs achats
- Mise à jour automatique des cartes perdues ou expirées lorsque les clients les remplacent
Enregistrez les moyens de paiement.
Réutilisez un moyen de paiement précédemment enregistré.
Activer l’enregistrement du moyen de paiement dans le composant Payment Element
Créez une session CustomerSession sur votre serveur en fournissant un ID d’objet Customer et en activant le composant payment_element pour votre session. Configurez les fonctionnalités des moyens de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de payment_method_save vous permet d’afficher une case à cocher invitant les clients à enregistrer leurs informations de paiement pour une utilisation ultérieure.
Vous pouvez spécifier setup_ sur un PaymentIntent ou une session Checkout pour remplacer le comportement par défaut à l’enregistrement d’un moyen de paiement. Ainsi, vous enregistrez automatiquement le moyen de paiement en vue d’une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer.
Mise en garde
Autoriser vos clients à supprimer les moyens de paiement qu’ils ont enregistrés en activant payment_method_remove a une incidence sur les abonnements qui dépendent de ce moyen de paiement. La suppression du moyen de paiement dissocie le PaymentMethod de cet objet Customer.
Votre instance Elements utilise la clé secrète du client de la session Client pour accéder aux moyens de paiement enregistrés de ce client. Gérez les erreurs correctement lorsque vous créez la session Client. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session Client à l’instance Elements, car elle est facultative.
Créez l’instance Elements à l’aide de la clé secrète du client de la session Client. Ensuite, utilisez l’instance Elements pour créer un Payment Element.
Lors de la confirmation du PaymentIntent, Stripe.js contrôle automatiquement le paramètre setup_future_usage sur le PaymentIntent et le paramètre allow_redisplay sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement.
Exiger la collecte du CVC
Vous pouvez également spécifier require_ à la fois lors de la création du PaymentIntent et lors de la création d’Elements pour appliquer la collecte du CVC lorsqu’un client paie par carte.
Détecter la sélection d’un moyen de paiement enregistré
Pour contrôler le contenu dynamique qui s’affiche lors de la sélection d’un moyen de paiement enregistré, écoutez l’événement change du composant Element Payment, qui contient le moyen de paiement sélectionné.
Lorsque le client effectue des actions qui modifient les informations du paiement (par exemple s’il applique un code de réduction), mettez à jour l’instance d’Elements afin de prendre en compte les nouvelles valeurs. Certains moyens de paiement, comme Apple Pay et Google Pay, affichent le montant dans l’interface utilisateur, vous devez donc veiller à ce que celui-ci soit toujours exact et à jour.
L’objet Elements accepte des options supplémentaires qui ont une incidence sur l’encaissement des paiements. En fonction des options proposées, le Payment Element affiche les moyens de paiement disponibles parmi ceux que vous avez activés. En savoir plus sur la prise en charge des moyens de paiement.
| Propriété | Type | Description | Obligatoire |
|---|---|---|---|
mode |
| Indique si l’Payment Element est utilisé avec un PaymentIntent, un SetupIntent ou un abonnement. | Oui |
currency | string | La devise du montant à facturer au client. | Oui |
amount | number | Le montant à débiter au client, indiqué dans les interfaces utilisateur Apple Pay, Google Pay ou BNPL. | Pour les modes payment et subscription |
setupFutureUsage |
| Indique que vous avez l’intention d’effectuer des paiements ultérieurs avec les informations de paiement collectées par l’Payment Element. | Non |
captureMethod |
| Détermine à quel moment capturer les fonds sur le compte du client. | Non |
onBehalfOf | string | Connect uniquement. L’ID de compte Stripe qui correspond à l’entreprise de référence. Consultez les cas d’usage pour déterminer si cette option est pertinente pour votre intégration. | Non |
paymentMethodTypes | string[] | Liste des types de moyens de paiement à afficher. Vous pouvez omettre cet attribut pour gérer vos moyens de paiement dans le Dashboard Stripe. | Non |
paymentMethodConfiguration | string | La configuration des moyens de paiement à utiliser lors de la gestion de vos moyens de paiement dans le Dashboard Stripe. Si aucune configuration n’est spécifiée, votre configuration par défaut sera utilisée. | Non |
paymentMethodCreation | manual | Autorise la création d’objets PaymentMethod à partir de l’instance Elements à l’aide de stripe.createPaymentMethod. | Non |
paymentMethodOptions | {us_ | Options de vérification pour le moyen de paiement us_. Accepte les mêmes méthodes de vérification que les Payment Intents. | Non |
paymentMethodOptions | {card: {installments: {enabled: boolean}}} | Permet d’activer manuellement l’interface utilisateur de sélection du calendrier de versements échelonnés par carte, le cas échéant, lorsque vous ne gérez pas vos moyens de paiement dans le Dashboard Stripe. Vous devez définir mode='payment' et spécifier explicitement des paymentMethodTypes. Dans le cas contraire, une erreur est générée. Non compatible avec paymentMethodCreation='manual'. | Non |
Si vous souhaitez créer un tunnel de paiement sur plusieurs pages ou collecter des informations de moyen de paiement avant d’effectuer des validations supplémentaires, consultez la section Créer un tunnel de paiement en deux étapes. Grâce à ce tunnel, vous pouvez créer un ConfirmationToken côté client afin de recueillir les informations de paiement, puis utiliser celui-ci pour créer un PaymentIntent côté serveur.
Exécuter une logique métier personnalisée immédiatement avant la confirmation du paiement
Accédez à l’étape 5 du guide « Finaliser » les paiements pour exécuter votre logique métier personnalisée immédiatement avant la confirmation du paiement. Sinon, suivez la procédure ci-dessous pour une intégration plus simple, qui utilise stripe. au niveau du client afin de confirmer le paiement et gérer les actions qui pourraient suivre.
Lorsque le client envoie votre formulaire de paiement, créez un PaymentIntent sur votre serveur avec un montant et une devise activés.
Renvoyez la valeur clé secrète du client à votre client pour que Stripe.js l’utilise afin de finaliser le processus de paiement.
L’exemple suivant comprend du code commenté pour illustrer le Calcul facultatif des taxes.
Utilisez stripe.confirmPayment pour finaliser le paiement à l’aide des informations du composant Payment Element.
Ajoutez un paramètre return_url à cette fonction pour indiquer à Stripe où rediriger l’utilisateur une fois le paiement effectué. Dans un premier temps, votre utilisateur sera peut-être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers l’URL return_. Les utilisateurs qui effectuent des paiements par carte sont immédiatement redirigés vers l’URL return_ à la réussite du paiement.
Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez assigner au paramètre redirect la valeur if_. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.
Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez le Dashboard, un webhook personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.
Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les différences entre les différents moyens de paiement pris en charge.
Gérer les événements manuellement dans le Dashboard
Utilisez le Dashboard pour afficher vos paiements de test dans le Dashboard, envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.
Créer un webhook personnalisé
Créez un gestionnaire de webhook personnalisé pour écouter les événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhook localement avec la CLI Stripe.
Intégrer une application prédéfinie
Gérez les événements commerciaux courants, tels que l’automatisation ou le marketing et les ventes, en intégrant une application partenaire.