Accéder directement au contenu
Créez un compte
ou
connecter-vous
Logo de la documentation Stripe
/
Demander à l'assistant IA
Créez un compte
Connectez-vous
Démarrer
Paiements
Revenus
Plateformes et places de marché
Gestion de fonds
Ressources pour les développeurs
Aperçu
À propos des paiements Stripe
Mettre votre intégration à niveau
Analyses des paiements
Paiements en ligne
PrésentationTrouver 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
Ajouter des moyens de paiement
Gérer les moyens de paiement
Paiement accéléré avec Link
Interfaces de paiement
Payment Links
Checkout
Elements pour le web
In-app Payments
Scénarios de paiement
Gérer plusieurs devises
Tunnels de paiement personnalisés
    Présentation
    Paiements pour les clients existants
    Autoriser et capturer un paiement séparément
    Créer un tunnel de paiement en deux étapes
    Collecter les informations de paiement avant de créer un Intent
    Finaliser les paiements sur le serveur
    Accepter des commandes par courrier et par téléphone (MOTO)
    Cartes bancaires américaines et canadiennes
    Transférer des informations de carte bancaires vers des endpoints d'API tiers
    Postes de paiement
Acquisition flexible
Orchestration
Paiements par TPE
Terminal
Au-delà des paiements
Constituez votre entreprise
Cryptomonnaies
Financial Connections
Climate
Comprendre la fraude
Radar pour la protection contre la fraude
Gestion des litiges
Vérifier l'identité
AccueilPaiementsCustom payment flows

Développer la confirmation à deux facteurs

Ajoutez une page de vérification facultative ou exécutez une validation après que l'utilisateur ait saisi ses informations de paiement.

Bien que nous recommandions l’intégration standard pour la plupart des cas, cette intégration vous permet d’ajouter une étape supplémentaire à votre processus de paiement, par exemple pour permettre au client de vérifier les détails de sa commande, ou pour vous permettre d’effectuer des validations supplémentaires avant de confirmer la commande.

Configurer Stripe

Dans un premier temps, vous devez créer un compte Stripe. S’inscrire maintenant.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :

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

Activer des moyens de paiement

Mise en garde

Ce chemin d’intégration ne prend pas en charge BLIK ou les prélèvements automatiques qui utilisent le Système automatisé de compensation et de règlement (SACR).

Affichez vos paramètres des moyens de paiement et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un PaymentIntent.

Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page Prise en charge des moyens de paiement pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre page des tarifs pour prendre connaissance des frais que nous appliquons.

Recueillir les informations de paiement
Côté client

Vous êtes prêt à recueillir les informations de paiement de votre client à l’aide du composant Element Payment, un composant préconfiguré de l’interface utilisateur qui simplifie cette collecte pour de nombreux moyens de paiement.

Le composant 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.

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 vous souhaitez commencer à accepter des paiements réels.

Configurer Stripe.js

Le composant Element Payment est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises head de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.

checkout.html
<head> <title>Checkout</title> <script src="https://js.stripe.com/basil/stripe.js"></script> </head>

Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement :

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Ajouter le composant Payment Element à votre page de paiement

Le composant Payment Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement :

checkout.html
<form id="payment-form"> <div id="payment-element"> <!-- Elements will create form elements here --> </div> <button id="submit">Submit</button> <div id="error-message"> <!-- Display error message to your customers here --> </div> </form>

Une fois le formulaire ci-dessus chargé, créez une instance Elements avec le mode, le montant et la devise. Ces valeurs déterminent les moyens de paiement présentés à votre client.

Ensuite, créez une instance de l’Element Payment et montez-la sur le nœud DOM conteneur.

checkout.js
const options = { mode: 'payment', amount: 1099, currency: 'usd', paymentMethodCreation: 'manual', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form const elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element');

Le composant Element Payment affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le moyen de paiement sélectionné par le client.

Vous pouvez personnaliser le Payment Element pour l’adapter au design 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 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.

FacultatifPersonnaliser la mise en page
Côté client

Vous pouvez adapter la mise en page du composant Payment Element (en accordéon ou en onglets) à votre interface de paiement. Pour plus d’informations sur chacune des propriétés, consultez la section elements.create.

Vous pouvez commencer à utiliser les fonctionnalités de mise en page en transmettant un type de mise en page et d’autres propriétés facultatives lors de la création du Payment Element :

const paymentElement = elements.create('payment', { layout: { type: 'accordion', defaultCollapsed: false, radios: true, spacedAccordionItems: false } });

L’image suivante illustre différents affichages du même composant Element Payment correspondant à différentes configurations de mise en page :

Trois expériences de formulaire de paiement

Mise en page du composant Element Payment

FacultatifPersonnaliser l'apparence
Côté client

Maintenant que vous avez ajouté le composant Payment Element à votre page, vous pouvez personnaliser son apparence pour l’adapter à votre design. Pour en savoir plus sur la personnalisation de ce composant, consultez la page dédiée à l’API Elements Appearance.

Personnaliser le Payment Element

Personnaliser le Payment Element

FacultatifEnregistrer et récupérer les moyens de paiement des clients

Vous pouvez configurer le composant Payment Element de façon à enregistrer les moyens de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la fonctionnalité d’enregistrement des moyens de paiement, qui permet à Payment Element de :

  • De demander aux acheteurs s’ils consentent à ce que leur moyen de paiement soit enregistré
  • Enregistrer les moyens de paiement lorsque les clients y consentent
  • Afficher les moyens de paiement enregistrés des acheteurs lors de leurs futurs achats
  • Mise à jour automatique des cartes perdues ou expirées lorsque les clients les remplacent
Le composant Payment Element et une case à cocher pour le moyen de paiement enregistré

Enregistrez les moyens de paiement.

Le composant Payment Element avec un moyen de paiement enregistré sélectionné

Réutilisez un moyen de paiement précédemment enregistré.

Activer l’enregistrement du moyen de paiement dans le composant Payment Element

Créez une session CustomerSession sur votre serveur en fournissant un ID d’objet Customer et en activant le composant payment_element pour votre session. Configurez les fonctionnalités des moyens de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de payment_method_save vous permet d’afficher une case à cocher invitant les clients à enregistrer leurs informations de paiement pour une utilisation ultérieure.

Vous pouvez spécifier setup_future_usage sur un PaymentIntent ou une session Checkout pour remplacer le comportement par défaut à l’enregistrement d’un moyen de paiement. Ainsi, vous enregistrez automatiquement le moyen de paiement en vue d’une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer.

Mise en garde

Autoriser vos clients à supprimer les moyens de paiement qu’ils ont enregistrés en activant payment_method_remove a une incidence sur les abonnements qui dépendent de ce moyen de paiement. La suppression du moyen de paiement dissocie le PaymentMethod de cet objet Customer.

server.rb
Ruby
Python
PHP
Node.js
Java
Go
.NET
No results
# Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key =
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
post '/create-customer-session' do customer_session = Stripe::CustomerSession.create({ customer:
{{CUSTOMER_ID}}
, components: { payment_element: { enabled: true, features: { payment_method_redisplay: 'enabled', payment_method_save: 'enabled', payment_method_save_usage: 'off_session', payment_method_remove: 'enabled', }, }, }, }) { customer_session_client_secret: customer_session.client_secret }.to_json end

Votre instance Elements utilise la clé secrète du client de la session Client pour accéder aux moyens de paiement enregistrés de ce client. Gérez les erreurs correctement lorsque vous créez la session Client. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session Client à l’instance Elements, car elle est facultative.

Créez l’instance Elements à l’aide de la clé secrète du client de la session Client. Ensuite, utilisez l’instance Elements pour créer un Payment Element.

checkout.js
// Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { mode: 'payment', amount: 1099, currency: 'usd', customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element');

Lors de la confirmation du PaymentIntent, Stripe.js contrôle automatiquement le paramètre setup_future_usage sur le PaymentIntent et le paramètre allow_redisplay sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement.

Exiger la collecte du CVC

Vous pouvez également spécifier require_cvc_recollection à la fois lors de la création du PaymentIntent et lors de la création d’Elements pour appliquer la collecte du CVC lorsqu’un client paie par carte.

Détecter la sélection d’un moyen de paiement enregistré

Pour contrôler le contenu dynamique qui s’affiche lors de la sélection d’un moyen de paiement enregistré, écoutez l’événement change du composant Element Payment, qui contient le moyen de paiement sélectionné.

checkout.js
paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } })

FacultatifOptions d'éléments supplémentaires
Côté client

L’objet Elements accepte des options supplémentaires qui ont une incidence sur l’encaissement des paiements. En fonction des options proposées, le Payment Element affiche les moyens de paiement disponibles parmi ceux que vous avez activés. En savoir plus sur la prise en charge des moyens de paiement.

PropriétéTypeDescriptionObligatoire
mode
  • payment
  • setup
  • subscription
Indique si l’Payment Element est utilisé avec un PaymentIntent, un SetupIntent ou un abonnement.Oui
currencystringLa devise du montant à facturer au client.Oui
amountnumberLe montant à débiter au client, indiqué dans les interfaces utilisateur Apple Pay, Google Pay ou BNPL.Pour les modes payment et subscription
setupFutureUsage
  • off_session
  • on_session
Indique que vous avez l’intention d’effectuer des paiements ultérieurs avec les informations de paiement collectées par l’Payment Element. Non
captureMethod
  • automatic
  • automatic_async
  • manual
Détermine à quel moment capturer les fonds sur le compte du client.Non
onBehalfOfstringConnect uniquement. L’ID de compte Stripe qui correspond à l’entreprise de référence. Consultez les cas d’usage pour déterminer si cette option est pertinente pour votre intégration.Non
paymentMethodTypesstring[]Liste des types de moyens de paiement à afficher. Vous pouvez omettre cet attribut pour gérer vos moyens de paiement dans le Dashboard Stripe.Non
paymentMethodConfigurationstringLa configuration des moyens de paiement à utiliser lors de la gestion de vos moyens de paiement dans le Dashboard Stripe. Si aucune configuration n’est spécifiée, votre configuration par défaut sera utilisée.Non
paymentMethodCreationmanualAutorise la création d’objets PaymentMethod à partir de l’instance Elements à l’aide de stripe.createPaymentMethod.Non
paymentMethodOptions{us_bank_account: {verification_method: string}}Options de vérification pour le moyen de paiement us_bank_account. Accepte les mêmes méthodes de vérification que les Payment Intents.Non
paymentMethodOptions{card: {installments: {enabled: boolean}}}Permet d’activer manuellement l’interface utilisateur de sélection du calendrier de versements échelonnés par carte, le cas échéant, lorsque vous ne gérez pas vos moyens de paiement dans le Dashboard Stripe. Vous devez définir mode='payment' et spécifier explicitement des paymentMethodTypes. Dans le cas contraire, une erreur est générée. Non compatible avec paymentMethodCreation='manual'.Non

Créer un ConfirmationToken
Côté client

Utiliser createPaymentMethod par le biais d’une ancienne implémentation

Si vous utilisez une ancienne implémentation, vous utilisez peut-être les informations de stripe.createPaymentMethod pour finaliser les paiements sur votre serveur. Nous vous recommandons de suivre ce guide pour migrer vers les tokens de confirmation, mais vous pouvez toujours accéder à notre ancienne documentation pour mettre en place la confirmation à deux facteurs.

Lorsque le client envoie votre formulaire de paiement, appelez stripe.createConfirmationToken pour créer un ConfirmationToken à envoyer à votre serveur et appliquer une logique métier ou une validation supplémentaire avant la confirmation. Vous pouvez inspecter le champ payment_method_preview pour exécuter la logique supplémentaire.

checkout.js
const form = document.getElementById('payment-form'); const submitBtn = document.getElementById('submit'); const handleError = (error) => { const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; submitBtn.disabled = false; } form.addEventListener('submit', async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); // Prevent multiple form submissions if (submitBtn.disabled) { return; } // Disable form submission while loading submitBtn.disabled = true; // Trigger form validation and wallet collection const {error: submitError} = await elements.submit(); if (submitError) { handleError(submitError); return; } // Create the ConfirmationToken using the details collected by the Payment Element const {error, confirmationToken} = await stripe.createConfirmationToken({ elements, params: { payment_method_data: { billing_details: { name: 'Jenny Rosen', } } } }); if (error) { // This point is only reached if there's an immediate error when // creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete) handleError(error); return; } // Now that you have a ConfirmationToken, you can use it in the following steps to render a confirmation page or run additional validations on the server return fetchAndRenderSummary(confirmationToken) });

Afficher les informations de paiement sur la page de confirmation

À ce stade, vous disposez de toutes les informations nécessaires pour afficher la page de confirmation. Appelez le serveur afin d’obtenir les informations requises et affichez la page de confirmation en conséquence.

app.js
Node.js
No results
// Using Express const express = require('express'); const app = express(); app.use(express.json()); app.post('/summarize-payment', async (req, res) => { try { // Retrieve the confirmationTokens and generate the response const confirmationToken = await stripe.confirmationTokens.retrieve(req.body.confirmation_token_id); const response = summarizePaymentDetails(confirmationToken); // Send the response to the client res.json(response); } catch (e) { // Display error on client return res.json({ error: e.message }); } }); function summarizePaymentDetails(confirmationToken) { // Use confirmationToken.payment_method_preview to derive the applicable summary fields for your UI return { type: confirmationToken.payment_method_preview.type, // Add other values as needed here }; }
confirmation.js
JavaScript
No results
const fetchAndRenderSummary = async (confirmationToken) => { const res = await fetch('/summarize-payment', { method: "POST", body: JSON.stringify({ confirmation_token_id: confirmationToken.id }), }); const summary = await res.json(); // Render the summary object returned by your server };

Créer un PaymentIntent
Côté serveur

Exécuter une logique métier personnalisée immédiatement avant la confirmation du paiement

Accédez à l’étape 5 du guide « Finaliser » les paiements pour exécuter votre logique métier personnalisée immédiatement avant la confirmation du paiement. Sinon, suivez la procédure ci-dessous pour une intégration plus simple, qui utilise stripe.confirmPayment au niveau du client afin de confirmer le paiement et gérer les actions qui pourraient suivre.

Lorsque votre client envoie votre formulaire de paiement, utilisez un composant PaymentIntent pour simplifier le processus de confirmation et de paiement. Créez un PaymentIntent sur votre serveur en activant les paramètres amount et currency. Dans la dernière version de l’API, la spécification du paramètre automatic_payment_methods est facultative, car Stripe active ces fonctionnalités 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. Pour éviter que des clients malveillants ne choisissent eux-mêmes leurs tarifs, fixez systématiquement le montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client.

L’objet PaymentIntent contient une clé secrète du client. Renvoyez cette valeur côté client afin que Stripe.js l’utilise pour finaliser le processus de paiement en toute sécurité.

main.rb
Ruby
Python
PHP
Node.js
Java
Go
.NET
No results
require 'stripe' Stripe.api_key =
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
post '/create-intent' do intent = Stripe::PaymentIntent.create({ # To allow saving and retrieving payment methods, provide the Customer ID. customer: customer.id, # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, amount: 1099, currency: 'usd', }) {client_secret: intent.client_secret}.to_json end

Envoyer le paiement à Stripe
Côté client

Utilisez stripe.confirmPayment pour finaliser le paiement à l’aide des informations du composant Payment Element.

Renseignez le paramètre confirmation_token avec l’ID du ConfirmationToken que vous avez créé à la page précédente, qui contient les informations de paiement collectées à l’aide du composant Payment Element.

Ajoutez un paramètre return_url à cette fonction pour indiquer à Stripe où rediriger l’utilisateur une fois le paiement effectué. Dans un premier temps, votre utilisateur sera peut-être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers l’URL return_url. Une fois le paiement par carte abouti, l’utilisateur est immédiatement redirigé vers l’URL return_url.

Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez définir le paramètre redirect sur if_required. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.

checkout.js
const form = document.getElementById('payment-form'); const submitBtn = document.getElementById('submit'); const handleError = (error) => { const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; submitBtn.disabled = false; } form.addEventListener('submit', async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); // Prevent multiple form submissions if (submitBtn.disabled) { return; } // Disable form submission while loading submitBtn.disabled = true; // Create the PaymentIntent and obtain clientSecret const res = await fetch("/create-intent", { method: "POST", }); const {client_secret: clientSecret} = await res.json(); // Confirm the PaymentIntent using the details collected by the ConfirmationToken const {error} = await stripe.confirmPayment({ clientSecret, confirmParams: { confirmation_token: '{{CONFIRMATION_TOKEN_ID}}', return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) handleError(error); } else { // Your customer is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } });

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

Voir aussi

Concevoir une intégration

Cette page vous a-t-elle été utile ?
OuiNon
  • Besoin d'aide ? Contactez le service Support.
  • Rejoignez notre programme d'accès anticipé.
  • Consultez notre log des modifications.
  • Des questions ? Contactez l'équipe commerciale.
  • LLM ? Lire llms.txt.
  • Propulsé par Markdoc