Accepter un paiement
Créez un formulaire de paiement ou utilisez une page de paiement préconfigurée pour commencer à accepter les paiements en ligne.
Créez une intégration de paiement personnalisée en intégrant des composants d’interface utilisateur sur votre site, à l’aide de Stripe Elements. Comparez cette intégration aux autres types d’intégration de Stripe.
Le code côté client et côté serveur crée un formulaire de paiement qui accepte différents moyens de paiement.
Effort d'intégration
Type d'intégration
Combinez des composants d’interface utilisateur dans un tunnel de paiement personnalisé
Personnalisation de l'interface utilisateur
Personnalisation au niveau CSS avec l’API Appearance
Vous souhaitez utiliser Stripe Tax, les réductions, les frais de livraison ou la conversion de devises ?
Nous développons une intégration pour le composant Payment Element qui gère les taxes, les remises, les frais de livraison et la conversion des devises. Pour en savoir plus, consultez le guide dédié à la création d’une page de paiement.
Configurer StripeCôté 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 :
Créer un PaymentIntentCôté serveur
Note
Si vous souhaitez afficher le Payment Element sans créer au préalable de PaymentIntent, consultez Collecter les informations de paiement avant de créer un Intent.
L’objet PaymentIntent représente votre intention d’encaisser le paiement d’un client et suit les tentatives de débit et changements d’état tout au long du processus de paiement.
Créer le PaymentIntent
Créez un PaymentIntent sur votre serveur avec les attribut amount et currency (devise). Dans la dernière version de l’API, le paramètre automatic_payment_methods
est facultatif, car Stripe active déjà cette fonctionnalité par défaut. Vous pouvez gérer les moyens de paiement depuis le Dashboard. Stripe gère le renvoi des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement.
Stripe s’appuie sur vos paramètres de moyens de paiement pour afficher les moyens de paiement que vous avez activés. Pour visualiser l’affichage des moyens de paiement pour les clients, saisissez un ID de transaction ou définissez le montant et la devise d’une commande dans le Dashboard. Pour ignorer les moyens de paiement, répertoriez manuellement ceux que vous souhaitez activer à l’aide de l’attribut payment_method_types.
Dans la dernière version de l’API, la spécification du paramètre automatic_payment_methods
est facultative, car Stripe active sa fonctionnalité par défaut.
Note
Définissez toujours le montant à débiter côté serveur car il s’agit d’un environnement sécurisé contrairement à l’environnement client. De cette façon un client malveillant ne pourra pas fixer son propre tarif.
Récupérer la clé secrète du client
Le PaymentIntent contient une clé secrète à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.
Collecter les données de paiementCôté client
Collectez les informations de paiement du client avec le Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.
Le Payment Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.
If you do choose to use an iframe and want to accept Apple Pay or Google Pay, the iframe must have the allow attribute set to equal "payment *"
.
Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par https://
et non par http://
. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’activer lorsque le moment sera venu d’accepter les paiements en mode production.
Le composant Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Pour chaque moyen de paiement, le formulaire demande automatiquement au client de renseigner toutes les informations de paiement nécessaires.
Personnaliser l’apparence
Personnalisez le Payment Element pour qu’il corresponde à l’apparence de votre site en ajoutant l’objet Appearance dans options
lors de la création du fournisseur Elements
.
Collecter les adresses
Par défaut, le composant Payment Element ne collecte que les informations nécessaires relatives à l’adresse de facturation. Si vous souhaitez obtenir l’adresse de facturation (par exemple, pour calculer la taxe sur les biens et services numériques) ou l’adresse de livraison complètes d’un client, utilisez le composant Address Element.
Demander un token de marchand Apple Pay
Si vous avez configuré votre intégration afin d’accepter les paiements Apple Pay, nous vous recommandons de configurer l’interface Apple Pay de manière à renvoyer un token de marchand pour activer les transactions initiées par les marchands. Demandez le type de token de marchand approprié dans le Payment Element.
Soumettre le paiement à StripeCôté client
Utilisez stripe.confirmPayment pour effectuer le paiement à l’aide des informations du composant Element Payment. Ajoutez un paramètre return_url à cette fonction pour indiquer la page vers laquelle Stripe doit rediriger l’utilisateur à l’issue du paiement. Votre utilisateur peut être redirigé en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre return_url
. L’utilisateur sera immédiatement redirigé vers la page return_url
après un paiement réussi par carte bancaire.
Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez définir redirect sur if_required
. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.
Veillez à ce que le paramètre return_url
corresponde à une page de votre site web qui indique l’état du paiement. Lorsque Stripe redirige le client vers la page return_url
, nous fournissons les paramètres de requête d’URL suivants :
Paramètre | Description |
---|---|
payment_intent | L’identifiant unique du PaymentIntent . |
payment_intent_client_secret | La clé secrète du client de l’objet PaymentIntent . |
Mise en garde
Si vous disposez d’outils qui assurent le suivi de la session navigateur du client, vous devrez peut-être ajouter le domaine stripe.com
à la liste d’exclusion des sites référents. Les redirections font que certains outils créent de nouvelles sessions, ce qui empêche le suivi de la session dans son ensemble.
Utilisez l’un des paramètres de requête pour récupérer le PaymentIntent. Consultez l’état du PaymentIntent afin de déterminer les informations à afficher pour vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous ajoutez l’URL return_url
; ils seront conservés tout au long du processus de redirection.
Gérer les événements post-paiementCôté serveur
Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez l’outil de webhook du Dashboard ou suivez le guide consacré aux webhooks 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 flux de livraison.
Plutôt que d’attendre un rappel de votre client, écoutez ces événements. Côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel. Certains clients malintentionnés peuvent d’autre part tenter de manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter plusieurs types de moyens de paiement avec une seule et même intégration.
En plus de l’événement payment_intent.succeeded
, nous vous recommandons de gérer ces autres événements lorsque vous encaissez des paiements à l’aide de l’Element Payment :
Événement | Description | Action |
---|---|---|
payment_intent.succeeded | Envoyé lorsqu’un client effectue un paiement avec succès. | Envoyez au client une confirmation de commande et traitez sa commande. |
payment_intent.processing | Envoyé lorsqu’un client initie un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client initie un prélèvement bancaire. Il est suivi par un événement payment_intent.succeeded ou payment_intent.payment_failed . | Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, vous pourrez traiter la commande sans attendre que le paiement soit effectué. |
payment_intent.payment_failed | Envoyé lorsqu’un client effectue une tentative de paiement qui se solde par un échec. | Si un paiement passe de l’état processing à payment_failed , proposez au client de retenter le paiement. |
Tester votre intégration
Pour tester votre intégration de paiement personnalisée :
- Créez un Paiement Intent et récupérez la clé secrète du client.
- Renseignez les informations d’un moyen de paiement du tableau suivant.
- Saisissez une date d’expiration postérieure à la date du jour.
- Saisissez un code CVC à 3 chiffres.
- Saisissez un code postal de facturation.
- Envoyez le paiement à Stripe. Vous êtes redirigé(e) vers votre
return_url
. - Accédez au Dashboard et recherchez le paiement sur la page des paiements. Si votre paiement a abouti, il apparaîtra dans cette liste.
- Cliquez sur votre paiement afin d’afficher plus d’informations, par exemple les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour traiter votre commande.
En savoir plus sur le test de votre intégration.
Consultez la section consacrée aux tests pour obtenir des informations supplémentaires sur la manière de tester votre intégration.
Mentionner le fonctionnement de Stripe à vos clients
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é.