Accepter les paiements par carte sans webhooks
Mise en garde
Au lieu du générateur d’intégration Card Element, Stripe recommande d’utiliser le générateur plus récent, Payment Element. Celui-ci vous permet d’accepter plusieurs moyens de paiement avec un seul Element. En savoir plus sur l’utilisation de Card Element et de Payment Element.
Pour une prise en charge plus complète et pérenne, utilisez notre intégration standard pour les paiements asynchrones.
Cette intégration vous permet d’attendre la réponse du client et de finaliser un paiement côté serveur sans utiliser de webhooks ni traiter d’événements hors ligne. Même si cette intégration semble plus simple, elle est difficile à adapter à la croissance de votre entreprise, et présente plusieurs restrictions :
- Prise en charge des cartes uniquement : Vous devrez rédiger du code pour prendre en charge séparément les paiements ACH et d’autres moyens de paiement régionaux populaires.
- Risque de double paiement : en créant un nouveau PaymentIntent de manière synchrone chaque fois que votre client tente de payer, vous risquez involontairement de le faire payer deux fois. Veillez à respecter les bonnes pratiques.
- Étape supplémentaire pour le client : les cartes sujettes au protocole 3D Secure ou à des réglementations telles que l’authentification forte du client nécessitent des étapes supplémentaires côté client.
Gardez ces restrictions à l’esprit si vous décidez de déployer cette intégration. Si elles vous posent problème, utilisez plutôt l’intégration standard.
Configurer Stripe
Tout d’abord, il vous faut un compte Stripe. S’inscrire.
Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre application :
Collecter les informations de carte bancaireCôté client
Collectez les informations de carte bancaire côté client avec Stripe.js et Stripe Elements. Elements est un ensemble de composants d’interface utilisateur conçu pour recueillir et valider le numéro de carte bancaire, le code postal et la date d’expiration.
Un composant Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de règlement doit aussi commencer par https:// au lieu de http://.
Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez-le quand vous souhaitez commencer à accepter des paiements réels.
Envoyer le PaymentMethod à votre serveurCôté client
Une fois le PaymentMethod créé avec succès, envoyez l’identifiant qui en résulte à votre serveur.
const stripePaymentMethodHandler = async (result) => { if (result.error) { // Show error in payment form } else { // Otherwise send paymentMethod.id to your server (see Step 4) const res = await fetch('/pay', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ payment_method_id: result.paymentMethod.id, }), }) const paymentResponse = await res.json(); // Handle server response (see Step 4) handleServerResponse(paymentResponse); } }
Reconfirmer le PaymentIntentCôté serveur
Ce code est exécuté uniquement lorsqu’un paiement nécessite une authentification supplémentaire, comme c’était le cas à l’étape précédente. Ce code n’est pas facultatif, car n’importe quel paiement peut nécessiter cette étape supplémentaire.
À l’aide du même endpoint que celui configuré plus tôt, reconfirmez le PaymentIntent pour mener à bien le paiement et traiter la commande. Veillez à ce que cette confirmation survienne dans l’heure qui suit la tentative de paiement. À défaut, le paiement échouera et repassera à l’état requires_payment_method
.
Gérer les actions suivantesCôté client
Rédigez du code pour gérer les situations qui nécessitent l’intervention de votre client. En règle générale, un paiement aboutit une fois que vous l’avez confirmé sur le serveur à l’étape 4. Cependant, lorsque le PaymentIntent exige une action supplémentaire de la part du client, telle que l’authentification 3D Secure, ce code est alors utilisé.
Utilisez stripe.handleCardAction pour déclencher l’interface utilisateur qui traite les actions du client. Si l’authentification réussit, l’état du PaymentIntent bascule sur requires_confirmation
. Reconfirmez le PaymentIntent sur votre serveur pour finaliser le paiement.
Pour tester votre intégration, utilisez un numéro de carte de test nécessitant une authentification (par exemple, ) afin de forcer ce flux. Si vous utilisez une carte qui ne nécessite aucune authentification (par exemple, ), cette partie du flux sera ignorée et le flux se terminera à l’étape 4.
const handleServerResponse = async (response) => { if (response.error) { // Show error from server on payment form } else if (response.requires_action) { // Use Stripe.js to handle the required card action const { error: errorAction, paymentIntent } = await stripe.handleCardAction(response.payment_intent_client_secret); if (errorAction) { // Show error from Stripe.js in payment form } else { // The card action has been handled // The PaymentIntent can be confirmed again on the server const serverResponse = await fetch('/pay', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ payment_intent_id: paymentIntent.id }) }); handleServerResponse(await serverResponse.json()); } } else { // Show success message } }
Note
L’exécution de stripe.handleCardAction
peut prendre plusieurs secondes. Pendant ce temps, bloquez le renvoi de votre formulaire et affichez un indicateur d’attente comme une boucle de progression. Si vous recevez une erreur, montrez-la au client, réactivez le formulaire et masquez l’indicateur d’attente. Si le client doit effectuer des actions supplémentaires pour finaliser le paiement, comme une authentification, Stripe.js le guide tout au long de ce processus.
Reconfirmer le PaymentIntentCôté serveur
Ce code est exécuté uniquement lorsqu’un paiement nécessite une authentification supplémentaire, comme c’était le cas à l’étape précédente. Ce code n’est pas facultatif, car n’importe quel paiement peut nécessiter cette étape supplémentaire.
À l’aide du même endpoint que celui configuré plus tôt, reconfirmez le PaymentIntent pour mener à bien le paiement et traiter la commande. Veillez à ce que cette confirmation survienne dans l’heure qui suit la tentative de paiement. À défaut, le paiement échouera et repassera à l’état requires_payment_method
.
Tester l'intégration
Pour vérifier que votre intégration est prête, vous avez à votre disposition plusieurs cartes de test. Vous pouvez les utiliser en mode test avec n’importe quel CVC et une date d’expiration non échue.
Numéro | Description |
---|---|
Réussite de la transaction et traitement immédiat du paiement. | |
Authentification requise. Stripe déclenche l’ouverture d’une fenêtre modale demandant au client de s’authentifier. | |
Échec systématique avec le code de refus de paiement insufficient_funds . |
Pour obtenir la liste complète de nos cartes de test, consultez notre guide des tests.