Créer une page de paiement personnalisée incluant Link
Intégrer Link à l’aide du Payment Element ou du Link Authentication Element.
Ce guide vous explique comment accepter des paiements avec Link à l’aide de l’API Payment Intents et du composant Payment Element ou Link Authentication Element.
Il existe trois manières d’obtenir l’adresse courriel d’un client pour l’authentification et l’inscription de Link :
- **Transmettre une adresse courriel : ** vous pouvez transmettre une adresse courriel à Payment Element à l’aide de defaultValues. Cette approche est recommandée si vous collectez déjà l’adresse courriel et/ou le numéro de téléphone du client dans le flux de paiement.
- **Collecter une adresse courriel : ** vous pouvez collecter une adresse courriel directement dans Payment Element. Si vous ne collectez pas l’adresse courriel au cours du flux de paiement, nous vous recommandons cette approche.
- Link Authentication Element : vous pouvez utiliser le Link Authentication Element pour créer un champ de saisie de l’adresse courriel unique afin d’effectuer la collecte de l’adresse courriel et l’authentification Link. Cette méthode est recommandée si vous utilisez l’Address Element.

Recueillir l’adresse de courriel d’un client pour l’authentification ou l’inscription à Link
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
Stripe utilise un objet PaymentIntent pour représenter votre intention de percevoir le paiement d’un client, qui suit les tentatives de paiement et les changements d’état de paiement tout au long du processus.
Si vous collectez des informations de carte en vue d’une utilisation ultérieure avec Setup Intents, répertoriez les modes de paiement manuellement au lieu d’utiliser des modes de paiement dynamiques. Pour utiliser Link sans modes de paiement dynamiques, mettez à jour votre intégration pour transmettre link
à payment_
.
Lorsque vous créez un PaymentIntent, proposez dynamiquement à vos clients les modes de paiement les plus pertinents, y compris Link, à l’aide de modes de paiement dynamiques. Pour utiliser des modes de paiement dynamiques, n’incluez pas le paramètre payment_
. Vous pouvez également activer l’option automatic_
.
Remarques
Lorsque votre intégration ne définit pas le paramètre payment_
, certains modes de paiement sont activés automatiquement, notamment les cartes et les portefeuilles numériques.
Pour ajouter Link à votre intégration Elements à l’aide de modes de paiement dynamiques :
- Dans vos Dashboard, dans les paramètres des modes de paiement, activez Link.
- Si vous disposez d’une intégration existante qui répertorie manuellement les modes de paiement, retirez le paramètre payment_method_types de votre intégration.
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 l’adresse courriel du client
Link authentifie un client à l’aide de son adresse courriel. En fonction de votre flux de paiement, vous avez les options suivantes : transmettre une adresse courriel à Payment Element, collecter l’adresse courriel directement dans le Payment Element ou utiliser le Link Authentication Element. Parmi celles-ci, Stripe recommande de transmettre une adresse courriel du client au Payment Element si disponible.
Configurer votre formulaire de paiementCôté client
Vous pouvez désormais configurer votre formulaire de paiement personnalisé à l’aide des composants Elements d’interface utilisateur préconfigurés. 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. Activer le protocole HTTPS au moment d’accepter des paiements réels.
Envoyer le paiement à StripeCôté client
Utilisez stripe.confirmPayment pour finaliser le paiement à l’aide des informations collectées auprès de votre client grâce aux différents formulaires Elements. Ajoutez une return_url à cette fonction pour indiquer où Stripe redirige l’utilisateur une fois le paiement effectué.
Votre utilisateur peut être d’abord redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant que Stripe le redirige vers la page return_
.
Par défaut, les paiements bancaires et les paiements par carte redirigent immédiatement le client vers la return_
une fois que le paiement a abouti. Si vous ne souhaitez pas le rediriger vers la return_
, vous pouvez utiliser if_required pour modifier le comportement.
Le return_
correspond à une page de votre site Web qui indique l’état du paiement du PaymentIntent
lorsque vous affichez la page de retour. Lorsque Stripe redirige le client vers la page return_
, vous pouvez utiliser les paramètres de requête d’URL suivants pour vérifier l’état du paiement. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez le paramètre return_
. Ces paramètres de requête sont conservés tout au long du processus de redirection.
Paramètre | Description |
---|---|
payment_ | L’identifiant unique du PaymentIntent |
payment_ | 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. Utiliser un webhook pour recevoir ces événements et exécutez 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.
Configurez votre intégration pour écouter ces événements plutôt que d’attendre un rappel de votre client. Lorsque vous attendez un rappel de votre client, ce dernier peut fermer la fenêtre de son navigateur ou quitter 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 modes de paiement avec une seule intégration.
En plus de gérer l’événement payment_
, vous pouvez également gérer deux autres événements lorsque vous encaissez des paiements à l’aide du Payment Element :
Événement | Description | Action |
---|---|---|
payment_intent.succeeded | Envoyé par Stripe lorsqu’un client a effectué un paiement. | Envoyez au client une confirmation de commande et traitez sa commande. |
payment_intent.payment_failed | Envoyé par 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_ , proposez au client d’effectuer une autre tentative de paiement. |
Testez l’intégration
Avertissement
Ne stockez pas de données utilisateur réelles dans des comptes Link du bac à sable. Traitez-les comme des données publiques, car ces comptes de test sont associés à votre clé publiable.
À l’heure actuelle, Link fonctionne uniquement avec les cartes de crédit, les cartes de débit et les achats admissibles effectués à partir d’un compte bancaire des États-Unis. Link exige l’enregistrement de domaine.
Vous pouvez créer des comptes de bac à sable pour Link à l’aide d’une adresse courriel valide. Le tableau suivant répertorie les codes à usage unique acceptés par Stripe pour l’authentification des comptes de bac à sable :
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 modes de paiement spécifiques, consultez les exemples de tests du Payment Element.
Sources de financement multiples
Au fur et à mesure que Stripe ajoute des sources de financement supplémentaires, vous n’avez pas besoin de mettre à jour votre intégration. Stripe les prend en charge automatiquement avec le même délai de règlement des transactions et les mêmes garanties que les paiements par carte et par compte bancaire.
Authentification des cartes et 3D Secure
Link prend en charge l’authentification 3D Secure 2 (3DS2) pour les paiements par carte. 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 succès à l’aide de 3D Secure sont couverts par un transfert de responsabilité.
Pour déclencher les flux de demande d’authentification 3DS2 avec Link dans un bac à sable, utilisez la carte de test suivante avec n’importe quel CVC, code postal et date d’expiration future : .
Dans un bac à sable, une page d’authentification factice s’affiche pour le processus d’authentification. Sur cette page, vous pouvez autoriser ou annuler le paiement. L’autorisation du paiement simule une authentification réussie et vous redirige vers l’URL de retour spécifiée. Un clic sur le bouton Échec simule une tentative d’authentification infructueuse.
Pour obtenir plus d’informations, consultez la page sur l’authentification 3D Secure.
Remarques
Lors du test des flux 3DS, seules les cartes de test pour 3DS2 déclencheront l’authentification sur Link.
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é.