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. Découvrez comment cette intégration se compare 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 divers modes de paiement.
Effort d'intégration
Type d'intégration
Combiner les composants d’interface utilisateur dans un flux de paiement personnalisé
Personnalisation de l'interface utilisateur
Personnalisation au niveau CSS avec l’API Apparence
Vous souhaitez utiliser Stripe Tax, les réductions, l'expédition ou la conversion de devises?
Nous développons une intégration du Payment Element qui gère les taxes, les remises, la livraison et la conversion des devises. Consultez la page Créer un paiement pour en savoir plus.
Configurer StripeCôté serveur
Tout d’abord, créez un compte Stripe ou connectez-vous à votre compte.
Utilisez nos bibliothèques officielles pour accéder à l’API de Stripe depuis votre application :
Créer un PaymentIntentCôté serveur
Remarques
Si vous souhaitez effectuer le rendu du Payment Element sans créer un PaymentIntent au préalable, consultez la documentation sur comment Collecter les informations de paiement avant de créer un Intent.
L’objet PaymentIntent représente votre intention de collecter le paiement d’un client et suit les tentatives de débit et les changements d’état tout au long du processus de paiement.
Créer le PaymentIntent
Créez un PaymentIntent sur votre serveur avec un montant et une devise. Dans la dernière version de l’API, la définition du paramètre automatic_payment_methods
est facultative, car Stripe active sa fonctionnalité par défaut. Vous pouvez gérer les moyens de paiement à partir du Dashboard. Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant, la devise et le flux de paiement de la transaction.
Stripe utilise vos paramètres de moyens de paiement pour afficher les moyens de paiement que vous avez activés. Pour voir comment vos moyens de paiement apparaissent aux clients, saisissez un numéro de transaction ou définissez un montant et une devise de commande dans le Dashboard. Pour remplacer 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 définition du paramètre automatic_payment_methods
est facultative, car Stripe active sa fonctionnalité par défaut.
Remarques
Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela permet d’éviter que des clients malveillants puissent définir leurs propres prix.
Récupérer la clé secrète du client
L’objet PaymentIntent comprend une clé secrète du client utilisée côté client pour effectuer le processus de paiement en toute sécurité. Vous pouvez utiliser différentes approches pour transmettre cette clé au côté client.
Collecter les informations de paiementCôté client
Collectez les informations de paiement de votre client à l’aide du Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui facilite la collecte des informations de paiement pour de nombreux moyens de paiement.
Le Payment Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Évitez de placer le Payment Element dans une autre balise iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour obtenir 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://
plutôt que http://
. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’activer lorsque tout est prêt pour accepter des paiements réels.
Le 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 remplir toutes les informations de paiement nécessaires.
Personnaliser l’apparence
Personnalisez le Payment Element pour l’adapter à l’apparence 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 recueille uniquement les informations de facturation nécessaires. Pour collecter l’adresse de facturation complète d’un client (par exemple, pour calculer les taxes sur les biens et services numériques) ou l’adresse de livraison, utilisez l’Address Element.
Demander le jeton marchand d’Apple Pay
Si vous avez configuré votre intégration pour accepter les paiements Apple Pay, nous vous recommandons de configurer l’interface Apple Pay pour retourner un jeton marchand afin d’activer les transactions initiées par le marchand. Demander le type de jeton marchand approprié dans Payment Element.
Envoyer le paiement à StripeCôté client
Utilisez stripe.confirmPayment pour effectuer le paiement à l’aide des informations de l’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.
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 . |
Avertissement
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 la requête pour récupérer le PaymentIntent. Examinez l’état du PaymentIntent pour décider de ce que vous voulez montrer à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez return_url
, qui perdureront sur tout le 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 courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.
Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient 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 intégration.
En plus de gérer l’événement payment_intent.succeeded
, nous vous recommandons de gérer les autres événements suivants lorsque vous encaissez des paiements à l’aide du Payment Element :
Événement | Description | Action |
---|---|---|
payment_intent.succeeded | Envoyé lorsqu’un client a effectué un paiement. | Envoyez au client une confirmation de commande et traitez sa commande. |
payment_intent.processing | Envoyé lorsqu’un client a entrepris un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client entreprend 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, nous vous recommandons de traiter la commande sans attendre que le paiement soit effectué. |
payment_intent.payment_failed | Envoyé lorsqu’un client tente d’effectuer un paiement, mais que le paiement échoue. | Si un paiement passe de l’état processing à l’état payment_failed , proposez au client de retenter le paiement. |
Testez votre intégration
Pour tester votre intégration de paiement personnalisée :
- Créez un Payment Intent et récupérez la clé secrète du client.
- Remplissez le formulaire de paiement et indiquez-y une méthode qui provient 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.
- Soumettez le paiement à Stripe. Vous êtes alors redirigé vers votre
return_url
. - Accédez au Dashboard et cherchez le paiement dans la page des paiements. Si votre paiement a été effectué, vous le verrez dans cette liste.
- Cliquez sur votre paiement pour voir plus d’informations, comme les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour traiter la commande.
Découvrez comment tester votre intégration.
Consultez la section Test pour obtenir des informations supplémentaires sur la manière de tester votre intégration.
Présenter les informations de Stripe à vos clients
Stripe recueille des informations sur les interactions des clients avec Elements pour vous fournir des services, prévenir la fraude et améliorer ses services. Cela inclut l’utilisation de témoins et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une seule session de paiement. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour permettre à Stripe d’utiliser les données de cette manière. Pour en savoir plus, rendez-vous sur notre centre de confidentialité.