Accéder directement au contenu
Créez un compte
ou
connectez-vous
Le logo de la documentation Stripe
/
Demander à l’IA
Créer un compte
Connectez-vous
Commencer
Paiements
Revenus
Plateformes et places de marché
Gestion des fonds
Ressources de développement
Aperçu
À propos des paiements Stripe
Mettre votre intégration à niveau
Analyses des paiements
Paiements en ligne
AperçuTrouver votre cas d'usageManaged Payments
Utiliser Payment Links
Créer une page de paiement
Développer une intégration avancée
Développer une intégration dans l'application
Moyens de paiement
Ajout de moyens de paiement
Gérer les moyens de paiement
Payer plus rapidement avec Link
    Aperçu
    Paiements bancaires instantanés
    Klarna sur Link
    Aperçu
    Link avec Checkout
    Link avec Web Elements
    Link avec Mobile Elements
    Link avec Invoicing
    Guides d'intégration
    Intégrations de paiement Link
    Créer une page de paiement personnalisée incluant Link
    Configurer des paiements futurs à l'aide d'Elements et de Link
Interfaces de paiement
Payment Links
Paiement
Web Elements
Elements dans l'application
Scénarios de paiement
Gérez plusieurs devises
Flux de paiement personnalisés
Acquisition flexible
Orchestration
Paiements en personne
Terminal
Au-delà des paiements
Constituer son entreprise
Cryptomonnaie
Financial Connections
Climate
Comprendre la fraude
Radar pour la protection contre la fraude
Gérer les litiges
Vérifier l'identité
AccueilPaiementsFaster checkout with Link

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.
Authentifiez-vous ou inscrivez-vous avec Link directement dans Payment Element lors du paiement

Recueillir l’adresse de courriel d’un client pour l’authentification ou l’inscription à Link

Configurer Stripe
Cô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 :

Command Line
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# Available as a gem sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

Créer un PaymentIntent
Cô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.

Un diagramme de l’ensemble du flux de paiement

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_method_types.

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_method_types. Vous pouvez également activer l’option automatic_payment_methods.

Remarques

Lorsque votre intégration ne définit pas le paramètre payment_method_types, 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 :

  1. Dans vos Dashboard, dans les paramètres des modes de paiement, activez Link.
  2. 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.

Récupérez la clé secrète du client à partir d’un point de terminaison sur votre serveur, en utilisant la fonction fetch du navigateur. Cette approche est préférable si votre côté client est une application d’une page, en particulier si celle-ci a été créée avec un cadre d’application frontal récent comme React. Créez le point de terminaison du serveur pour récupérer la clé secrète du client :

main.rb
Ruby
Python
PHP
Java
Node
Go
.NET
No results
get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end

Ensuite, récupérez la clé secrète du client avec JavaScript côté client:

(async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })();

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.

If l’un des critères suivants s’applique à vous :

  • Vous voulez un composant unique et optimisé pour la collecte des adresses courriel et l’authentification de Link.
  • Vous devez collecter une adresse de livraison auprès de votre client.

Utilisez ensuite le flux d’intégration qui met en œuvre ces éléments : le Link Authentication Element, le Payment Element et l’Address Element facultatif.

Une page de paiement qui prend en charge Link comporte le Link Authentication Element en premier, suivi de l’Address Element et du Payment Element à la fin. Vous pouvez également afficher Link Authentication Element dans des pages distinctes, dans le même ordre, pour les flux de paiement de plusieurs pages.

Créez un formulaire de paiement à l’aide de plusieurs Elements

Créez un formulaire de paiement à l’aide de plusieurs Elements

L’intégration fonctionne comme suit :

Configurer votre formulaire de paiement
Cô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.

Le Link Authentication Element affiche la saisie d’une adresse courriel. Lorsque Link associe l’adresse de courriel du client à un compte Link existant, il envoie au client un code sécurisé à usage unique à son téléphone pour que le client puisse s’authentifier. Si le client s’authentifie, Stripe affichera automatiquement ses adresses et modes de paiement enregistrés sur Link pour qu’il puisse les utiliser.

Cette intégration crée également le Payment Element, qui génère un formulaire dynamique qui permet à votre client de choisir un type de mode de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le type de mode de paiement choisi par le client. Le Payment Element gère également l’affichage des modes de paiement enregistrés sur Link par les clients authentifiés.

Configurer Stripe Elements

Installez React Stripe.js et le chargeur Stripe.js à partir du registre public npm.

Command Line
npm install --save @stripe/react-stripe-js @stripe/stripe-js

Dans votre page de paiement, enveloppez votre formulaire de paiement avec le composant Elements, en transmettant la clé secrète du client de l’étape précédente. Si vous collectez déjà l’adresse courriel du client dans une autre partie de votre formulaire, remplacez votre saisie existante par le linkAuthenticationElement​.

Si vous ne collectez pas d’adresses courriel, ajoutez linkAuthenticationElement​ à votre flux de paiement. Vous devez placer le linkAuthenticationElement avant le ShippingAddressElement (facultatif si vous collectez des adresses de livraison) et le PaymentElement pour que Link puisse remplir automatiquement les informations enregistrées par Link dans les champs ShippingAddressElement et PaymentElement. Vous pouvez également transmettre l’option d’apparence, qui permet d’adapter les Elements à la conception de votre site.

Si vous disposez de l’adresse courriel du client, transmettez-la à l’option defaultValues du linkAuthenticationElement. Cela permet de remplir automatiquement l’adresse courriel du client et lance le processus d’authentification Link.

Si vous avez d’autres informations sur le client, transmettez-les à l’objet defaultValues.billingDetails de PaymentElement. Remplir automatiquement autant d’informations que possible permet de simplifier la création et la réutilisation des comptes Link pour vos clients.

Affichez ensuite les composants linkAuthenticationElement et PaymentElement dans votre formulaire de paiement :

Checkout.jsx
import {loadStripe} from "@stripe/stripe-js"; import { Elements, LinkAuthenticationElement, PaymentElement, } from "@stripe/react-stripe-js"; const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); // Customize the appearance of Elements using the Appearance API. const appearance = {/* ... */}; // Enable the skeleton loader UI for the optimal loading experience. const loader = 'auto';

Il n’est pas nécessaire d’inclure linkAuthenticationElement, PaymentElement et ShippingAddressElement sur la même page. Si vous disposez d’un processus dans lequel les coordonnées du client, les informations de la livraison et les informations de paiement sont affichées dans des étapes distinctes pour le client, vous pourrez afficher chaque Element dans l’étape ou la page appropriée. Incluez linkAuthenticationElement comme formulaire de saisie de l’adresse courriel dans l’étape de collecte des coordonnées pour vous assurer que le client bénéficie pleinement du remplissage automatique de l’adresse de livraison et du paiement fourni par Link.

Si vous recueillez l’adresse courriel de votre client avec le Link Authentication Element au début du processus de paiement, vous n’aurez pas besoin de l’afficher à nouveau sur les pages d’expédition ou de paiement.

Récupérer une adresse courriel

Vous pouvez récupérer les renseignements de l’adresse courriel à l’aide de la propriété onChange sur le composant linkAuthenticationElement. Le gestionnaire onChange se déclenche chaque fois que l’utilisateur met à jour le champ d’adresse courriel ou lorsqu’une adresse courriel de client enregistrée est remplie automatiquement.

<linkAuthenticationElement onChange={(event) => { setEmail(event.value.email); }} />

Remplir automatiquement l’adresse courriel d’un client

Le Link Authentication Element accepte une adresse courriel. Si vous fournissez l’adresse courriel d’un client, le flux d’authentification Link démarre dès que le client accède à la page de paiement à l’aide de l’option defaultValues.

<linkAuthenticationElement options={{defaultValues: {email: 'foo@bar.com'}}}/>

FacultatifRemplir automatiquement les données supplémentaires du client
Côté client

FacultatifCollecter les adresses de livraison
Côté client

FacultatifPersonnaliser l’apparence
Côté client

Envoyer le paiement à Stripe
Cô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_url.

Par défaut, les paiements bancaires et les paiements par carte redirigent immédiatement le client vers la return_url une fois que le paiement a abouti. Si vous ne souhaitez pas le rediriger vers la return_url, vous pouvez utiliser if_required pour modifier le comportement.

Checkout.jsx
import {loadStripe} from "@stripe/stripe-js"; import { useStripe, useElements, Elements, LinkAuthenticationElement, PaymentElement, // If collecting shipping AddressElement, } from "@stripe/react-stripe-js"; const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); const appearance = {/* ... */}; // Enable the skeleton loader UI for the optimal loading experience. const loader = 'auto'; const CheckoutPage =({clientSecret}) => ( <Elements stripe={stripe} options={{clientSecret, appearance, loader}}> <CheckoutForm /> </Elements> ); export default function CheckoutForm() { const stripe = useStripe(); const elements = useElements(); const handleSubmit = async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, }); if (error) { // handle error } }; return ( <form onSubmit={handleSubmit}> <h3>Contact info</h3> <LinkAuthenticationElement /> {/* If collecting shipping */} <h3>Shipping</h3> <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} /> <h3>Payment</h3> <PaymentElement /> <button type="submit">Submit</button> </form> ); }

Le return_url 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_url, 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_url. Ces paramètres de requête sont conservés tout au long du processus de redirection.

ParamètreDescription
payment_intentL’identifiant unique du PaymentIntent
payment_intent_client_secretLa clé secrète du client de l’objet PaymentIntent.

FacultatifSéparer l’autorisation et la capture
Côté serveur

Gérer les événements post-paiement
Cô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_intent.succeeded, vous pouvez également gérer deux autres événements lorsque vous encaissez des paiements à l’aide du Payment Element :

ÉvénementDescriptionAction
payment_intent.succeededEnvoyé par Stripe lorsqu’un client a effectué un paiement.Envoyez au client une confirmation de commande et traitez sa commande.
payment_intent.payment_failedEnvoyé 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_failed, 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 :

ValeurRésultat
Tout autre ensemble de 6 chiffres non listé ci-dessousOpération réussie
000001Erreur, code non valide
000002Erreur, code expiré
000003Erreur, 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.

FacultatifAfficher les données enregistrées par le client
Côté serveur
Côté client

FacultatifEnregistrez les modes de paiement Link
Côté serveur
Côté client

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é.

Voir aussi

  • Qu’est-ce que Link
  • Link avec Elements
  • Link dans le Payment Element
  • Découvrez le Link Authentication Element
  • Link dans différentes intégrations de paiement
Cette page vous a-t-elle été utile?
OuiNon
  • Besoin d'aide? Contactez le service d'assistance.
  • Rejoignez notre programme d'accès anticipé.
  • Consultez notre journal des modifications.
  • Des questions? Contactez l'équipe commerciale.
  • GML? Lire llms.txt.
  • Optimisé par Markdoc