Créer une page de paiement personnalisée incluant Link
Ce guide vous explique comment accepter des paiements avec Link en combinant l’API Payment Intents avec le composant Payment Element ou Link Authentication Element.
Il existe trois manières d’obtenir l’adresse e-mail d’un client pour l’authentification ou l’inscription Link :
- Transmettre une adresse e-mail : vous pouvez transmettre une adresse e-mail au composant Payment Element à l’aide de defaultValues. Cette méthode est recommandée si vous recueillez déjà l’adresse e-mail ou le numéro de téléphone du client dans le tunnel de paiement.
- Collecter une adresse e-mail : vous pouvez collecter une adresse e-mail directement dans le composant Payment Element. Cette méthode est recommandée si vous ne recueillez d’adresse e-mail à aucune étape du tunnel de paiement.
- Link Authentication Element : vous pouvez utiliser le composant Link Authentication Element pour créer un champ de saisie d’adresse e-mail unique pour la collecte de l’adresse e-mail et pour l’authentification Link. Cette méthode est recommandée si vous utilisez le composant Address Element.
Collecter l’adresse e-mail du client pour l’authentification ou l’inscription Link
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
Pour représenter votre intention de collecter 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.
Vous pouvez accepter des paiements avec Link sur la base des informations enregistrées par vos clients dans l’application Link. Étant donné que vous n’utilisez pas le payment_method.type
Link, lorsque vous recevez un paiement d’un client qui utilise Link dans le Payment Element, le payment_method.type
indiqué pour le paiement est card
.
Pour utiliser le paramètre payment_method.type
de Link, mettez à jour votre intégration pour définir payment_method_types
sur link
. Vous pouvez également définir automatic_payment_methods
sur enabled
et laisser Stripe afficher les moyens de paiement les plus pertinents pour vos clients de façon dynamique.
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 e-mails des clients
Link authentifie un client à l’aide de son adresse e-mail. En fonction de votre tunnel de paiement, vous disposez des options suivantes : transmettre une adresse e-mail au composant Payment Element, la collecter directement dans le composant Payment Element ou utiliser le composant Link Authentication Element. Stripe vous recommande, si possible, de transmettre l’adresse e-mail du client au composant Payment Element.
Configurer votre formulaire de paiementCôté client
Vous pouvez désormais personnaliser votre formulaire de paiement grâce aux composants d’interface utilisateur préconfigurés d’Elements. Pour que votre intégration fonctionne, l’adresse de votre page de paiement doit commencer par https://
et non par http://
. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez HTTPS lorsque vous êtes prêt à accepter des paiements en mode production.
Envoyer le paiement à StripeCôté client
Utilisez stripe.confirmPayment pour mener à bien le paiement à l’aide des informations collectées auprès de votre client grâce aux différents formulaires Elements. Fournissez une return_url à cette fonction pour indiquer à Stripe vers quelle page rediriger l’utilisateur une fois le paiement effectué.
Votre utilisateur peut être d’abord redirigé vers un site intermédiaire, comme la page d’autorisation de sa banque, avant d’être redirigé vers votre page return_url
.
Par défaut, les paiements bancaires et les paiements par carte redirigent immédiatement le client vers la return_url
une fois le paiement abouti. Si vous ne voulez pas le rediriger vers la return_url
, vous pouvez modifier le comportement par défaut en utilisant if_required
.
La return_url
correspond à une page de votre site Web qui indique l’état du paiement du PaymentIntent
au moment d’afficher la page de redirection. Lorsque Stripe redirige le client vers cette return_url
, vous pouvez utiliser les paramètres de requête d’URL suivants afin de vérifier l’état du paiement. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez votre return_url
. Ils seront conservés tout au long du processus de redirection.
Paramètre | Description |
---|---|
payment_intent | Identifiant unique du PaymentIntent |
payment_intent_client_secret | La clé secrète du client de l’objet PaymentIntent . |
Gérer les événements post-paiementCôté serveur
Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez un webhook pour recevoir ces événements et exécuter des actions en conséquence, telles que l’envoi d’une confirmation de commande par e-mail à votre client, l’enregistrement de la vente dans une base de données ou encore le lancement d’un flux de livraison.
Configurez votre intégration de manière à écouter ces événements plutôt que d’attendre un rappel de votre client. Lorsque vous attendez, 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. 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 l’événement payment_intent.succeeded
, vous pouvez également gérer deux autres événements lorsque vous encaissez des paiements à l’aide du composant Element Payment :
Événement | Description | Action |
---|---|---|
payment_intent.succeeded | Envoyé depuis Stripe lorsqu’un client a effectué un paiement avec succès. | Envoyez au client une confirmation de commande et traitez sa commande. |
payment_intent.payment_failed | Envoyé depuis Stripe lorsqu’un client a fait une tentative de paiement qui s’est soldée par un échec. | Si un paiement passe de l’état processing à payment_failed , proposez au client de retenter le paiement. |
Tester l'intégration
Mise en garde
N’enregistrez pas de données utilisateur réelles sur des comptes Link en mode test. En effet, ces données sont à considérer comme publiques étant donné que vos comptes test sont associés à votre clé publiable.
À l’heure actuelle, Link fonctionne uniquement pour les cartes de crédit, les cartes de débit et les achats admissibles effectués via un compte bancaire américain. Link nécessite un enregistrement de domaine.
Vous pouvez créer des comptes en mode test pour Link à l’aide d’une adresse e-mail valide. Le tableau suivant répertorie les codes à usage unique acceptés par Stripe pour l’authentification des comptes en mode test :
Valeur | Résultat |
---|---|
Tout autre ensemble de 6 chiffres non listé ci-dessous | Opération réussie |
000001 | Erreur, code non valide |
000002 | Erreur, code expiré |
000003 | Erreur, nombre maximal de tentatives dépassé |
Pour tester des moyens de paiement spécifiques, consultez les exemples de tests du composant Element Payment.
Sources de financement multiples
Dans la mesure où Stripe prend en charge des sources de financement supplémentaires, vous n’avez pas besoin de mettre à jour votre intégration. Stripe les prend en charge automatiquement avec les mêmes délais de virement de fonds et les mêmes garanties que pour les paiements par carte ou par compte bancaire.
Authentification de carte bancaire et 3D Secure
Link prend en charge l’authentification 3D Secure 2 (3DS2) pour les paiements par carte bancaire. 3DS2 impose aux clients une étape de vérification supplémentaire auprès de l’émetteur de la carte au moment du paiement. Les paiements authentifiés avec 3D Secure bénéficient d’un transfert de responsabilité.
Pour déclencher les flux de demande d’authentification complexes 3DS2 en mode test avec Link, utilisez la carte de test suivante avec n’importe quel CVC, code postal et date d’expiration ultérieure : .
En mode test, le processus d’authentification affiche une page d’authentification fictive. Vous pouvez y autoriser le paiement ou l’annuler. L’autorisation du paiement simule une authentification réussie et vous renvoie vers l’URL de redirection spécifiée. Cliquer sur le bouton Échec permet de simuler une tentative d’authentification infructueuse.
Pour en savoir plus, consultez la page dédiée à l’authentification 3D Secure.
Note
Lorsque vous testez les flux 3DS, seules les cartes de test pour 3DS2 déclencheront une authentification sur Link.
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é.