Accéder directement au contenu
Créez un compte ou connecter-vous
Logo de la documentation Stripe
/
Créez un compteConnectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageUtiliser Managed Payments
Paiements par TPE
Moyens de paiement
Scénarios de paiement
Au-delà des paiements

Accepter un paiement

Acceptez les paiements en ligne en toute sécurité.

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 page de paiement sur votre site Web à l’aide de Stripe Elements et de Checkout Sessions, une intégration qui gère les taxes, les réductions, les frais de livraison, etc.

Pays du client
Taille
Thème
Disposition
Cette démo affiche uniquement Google Pay ou Apple Pay si vous disposez d'une carte active sur l'un de ces portefeuilles.

Configurer le serveur
Côté serveur

Avant de commencer, vous devez vous inscrire pour créer un compte Stripe.

Utilisez les bibliothèques officielles de Stripe pour accéder à l’API depuis votre application.

Command Line
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
npm install stripe@18.0.0 --save

Configurez le SDK pour qu’il utilise au minimum la version de l’API 2025-03-31.basil.

TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
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
import Stripe from 'stripe';
const stripe = new Stripe(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
, {
  apiVersion: '2025-03-31.basil' as any,
});

Créer une session Checkout
Côté serveur

Ajoutez à votre serveur un endpoint qui crée un objet Checkout Session et renvoie la clé secrète du client à votre front-end. Une session Checkout représente la session d’un client qui paie des achats ponctuels ou des abonnements. Les sessions Checkout expirent 24 heures après leur création.

server.ts
TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Configurer le front-end
Côté client

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.

Ensure you’re on the latest Stripe.js version by including the following script tag <script src=“https://js.stripe.com/clover/stripe.js”></script>. Learn more about Stripe.js versioning.

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

Remarque

Stripe propose un paquet npm que vous pouvez utiliser pour charger Stripe.js en tant que module. Consultez le projet sur GitHub. La version 7.0.0 ou une version ultérieure est requise.

Initialisez stripe.js.

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'
,
);

Initialiser Checkout
Côté client

Créez soit une promesse clientSecret qui se résout avec le secret client, soit définissez-le directement comme secret. Appelez initCheckout, en passant clientSecret. initCheckout renvoie une promesse qui se résout en une instance de Checkout.

L’objet paiement constitue la base de votre page de paiement et contient les données de la session Checkout ainsi que les méthodes permettant de mettre à jour la session.

L’objet renvoyé par actions.getSession() contient vos informations tarifaires. Nous vous recommandons de lire et d’afficher le total et les lineItems de la session dans votre interface utilisateur.

Cela vous permet d’activer de nouvelles fonctionnalités avec un minimum de modifications du code. Par exemple, l’ajout de prix manuels des devises ne nécessite aucune modification de l’interface utilisateur si vous affichez le total.

checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
index.html
<div id="checkout-container"></div>

Collecter les adresses e-mail des clients
Côté client

Créez un champ de saisie de l’adresse pour collecter l’adresse e-mail de votre client. Appelez updateEmail lorsque votre client finalise la saisie pour valider et enregistrer l’adresse e-mail.

En fonction de la conception de votre formulaire de paiement, vous pouvez appeler updateEmail de l’une des manières suivantes :

  • Directement avant l’envoi du paiement. Vous pouvez également appeler updateEmail pour valider plus tôt, par exemple lorsque le focus est retiré de la saisie.
  • Avant de passer à l’étape suivante, par exemple en cliquant sur un bouton Enregistrer, si votre formulaire comprend plusieurs étapes.
index.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}

Collecter les informations de paiement
Côté client

Collectez les informations de paiement de votre client à l’aide de Payment Element. Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Tout d’abord, créez un élément DOM de conteneur pour monter le composant Payment Element. Créez ensuite une instance du Payment Element à l’aide de checkout.createPaymentElement et montez-la en appelant element.mount et en fournissant soit un sélecteur CSS, soit l’élément DOM du conteneur.

index.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Consultez la documentation Stripe.js pour connaître les options prises en charge.

Vous pouvez personnaliser l’apparence de tous les Elements en transmettant elementsOptions.appearance lors de l’initialisation de Checkout sur le front-end.

Envoyer le paiement
Côté client

Rendre un bouton Pay qui appelle l’instance confirmer à partir de l’instance paiement pour soumettre le paiement.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

Tester votre intégration

  1. Accédez à votre page de paiement.
  2. Renseignez les informations d’un moyen de paiement du tableau suivant. Pour les paiements par carte :
    • Saisissez une date d’expiration postérieure à la date du jour.
    • Saisissez un code CVC à 3 chiffres.
    • Saisissez un code postal de facturation.
  3. Envoyez le paiement à Stripe.
  4. Accédez au Dashboard et recherchez le paiement sur la page Transactions. Si votre paiement a abouti, il apparaîtra dans cette liste.
  5. Cliquez sur votre paiement afin d’afficher plus d’informations (par exemple, les informations de facturation et la liste des articles achetés). Vous pouvez utiliser ces informations pour traiter la commande.
Numéro de carteScénarioMéthode de test
Le paiement par carte bancaire aboutit et ne nécessite pas d’authentification.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.
Le paiement par carte bancaire requiert une authentification.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.
La carte est refusée avec un code de refus de type insufficient_funds.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.
La carte UnionPay a un numéro d’une longueur variable, allant de 13 à 19 chiffres.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.

Consultez la section consacrée aux tests pour obtenir des informations supplémentaires sur la manière de tester votre intégration.

FacultatifCréer des produits et tarifs

Avant de créer une session Checkout, vous pouvez directement créer des produits et des tarifs. Utilisez les produits pour représenter différents biens physiques ou niveaux de service, et les tarifs pour représenter le tarif de chaque produit.

Par exemple, vous pouvez créer un T-shirt vendu au tarif de 20 USD. Cela vous permet de mettre à jour et d’ajouter des tarifs sans avoir à modifier les détails de vos produits sous-jacents. Vous pouvez créer des produits et des tarifs à l’aide du Dashboard ou de l’API Stripe. En savoir plus sur le fonctionnement des produits et des tarifs.

Seul un attribut name est requis par l’API pour créer un Product. Checkout affiche les attributs name, description et images que vous aurez définis.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/products \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name=T-shirt

Ensuite, créez un objet Price pour définir le tarif de facturation de votre produit. Spécifiez le montant et la devise.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/prices \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d product=
"{{PRODUCT_ID}}"
 \
  -d unit_amount=2000 \
  -d currency=usd

Chaque prix que vous créez possède un identifiant. Lorsque vous créez une session Checkout, faites référence à l’identifiant de prix et à la quantité. Si vous vendez dans plusieurs devises, définissez votre prix comme multidevise. Checkout détermine automatiquement la devise locale du client et présente cette devise si le prix la prend en charge.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d ui_mode=custom \
  -d mode=payment \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}"

FacultatifRenseigner automatiquement les données client
Côté serveur

Si vous avez précédemment collecté l’adresse e-mail de votre client et que vous souhaitez la renseigner automatiquement dans la session Checkout, transmettez le paramètre customer_email lors de la création de la session.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  --data-urlencode customer_email="customer@example.com" \
  -d ui_mode=custom \
  -d mode=payment \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}"

FacultatifEnregistrer les informations de paiement

Découvrez comment accepter un paiement et enregistrer les informations de paiement de votre client pour de futurs achats.

FacultatifÉcouter les modifications de session Checkout

Écouter les modifications de session Checkout

Vous pouvez écouter les modifications apportées à la session Checkout en ajoutant un écouteur d’événement sur l’événement change avec checkout.on.

checkout.js
checkout = stripe.initCheckout({
  clientSecret: promise,
  elementsOptions: { appearance },
});

checkout.on('change', (session) => {
  // Handle changes to the checkout session
});

FacultatifRecueillir les adresses de facturation et de livraison

Collecter une adresse de facturation

Par défaut, une session Checkout collecte les informations de facturation minimales requises pour le paiement via le Payment Element.

Utiliser le Billing Address Element

Vous pouvez collecter des adresses de facturation complètes à l’aide du composant Billing Address Element.

Tout d’abord, transmettez billing_address_collection=required lors de la création de la session Checkout.

Créez un élément DOM conteneur pour monter le composant Billing Address Element. Créez ensuite une instance de Billing Address Element à l’aide de checkout.createBillingAddressElement et montez-la en appelant element.mount, et en fournissant soit un sélecteur CSS, soit l’élément DOM du conteneur.

index.html
<div id="billing-address"></div>
checkout.js
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');

Le composant Billing Address Element prend en charge les options suivantes :

Utiliser un formulaire personnalisé

Vous pouvez créer votre propre formulaire pour collecter les adresses de facturation.

  • Si votre page de paiement comporte une étape distincte de collecte d’adresses avant confirmation, appelez updateBillingAddress lorsque votre client envoie l’adresse.
  • Vous pouvez également envoyer l’adresse lorsque votre client clique sur le bouton « Payer » en transmettant billingAddress à confirm.

Collecter des adresses de facturation partielles

Pour collecter des adresses de facturation partielles, telles que le pays et le code postal seulement, transmettez billing_address_collection=auto.

Lors de la collecte d’adresses de facturation partielles, vous devez collecter les adresses manuellement. Par défaut, le Payment Element collecte automatiquement les informations de facturation minimales requises pour le paiement. Pour éviter la double collecte des informations de facturation, transmettez fields.billingDetails=never lors de la création du Payment Element. Si vous avez l’intention de collecter uniquement un sous-ensemble d’informations de facturation (telles que le nom du client), ne transmettez never que pour les champs que vous avez l’intention de collecter vous-même.

Collecter une adresse de livraison

Pour collecter l’adresse de livraison d’un client, transmettez le paramètre shipping_address_collection lors de la création de la session Checkout.

Lorsque vous collectez une adresse de livraison, vous devez également préciser les pays pour lesquels vous autorisez la livraison. Configurez la propriété allowed_countries à l’aide du tableau des codes pays ISO à deux lettres.

Comment utiliser le composant Element Shipping Address

Vous pouvez collecter des adresses de livraison complètes à l’aide du composant Shipping Address Element.

Créez un élément DOM de conteneur pour monter le composant Shipping Address Element. Créez ensuite une instance de Shipping Address Element à l’aide de checkout.createShippingAddressElement et montez-la en appelant element.mount et en fournissant soit un sélecteur CSS, soit l’élément DOM du conteneur.

index.html
<div id="shipping-address"></div>
checkout.js
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');

Le composant Shipping Address Element prend en charge les options suivantes :

Écouter les modifications de session Checkout

Vous pouvez écouter les modifications apportées à la session Checkout en ajoutant un écouteur d’événements pour gérer les changements liés à l’adresse.

Utilisez l’objet Session pour afficher le montant des frais de livraison dans votre formulaire de paiement.

index.html
<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const subtotal = document.getElementById('subtotal');
const shipping = document.getElementById('shipping');
const total = document.getElementById('total');

checkout.on('change', (session) => {
  subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`;
  shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`;
  total.textContent = `Total: ${session.total.total.amount}`;
});

Utiliser un formulaire personnalisé

Vous pouvez créer votre propre formulaire pour collecter les adresses de livraison.

  • Si votre page de paiement comporte une étape distincte de collecte d’adresse avant confirmation, appelez updateShippingAddress lorsque votre client envoie l’adresse.
  • Vous pouvez également envoyer l’adresse lorsque votre client clique sur le bouton « Payer » en transmettant shippingAddress à confirm.

FacultatifAutorisation et capture distinctes
Côté serveur

Stripe prend en charge les paiements par carte en deux temps afin que vous puissiez d’abord autoriser la carte, puis capturer les fonds ultérieurement. Lorsque Stripe autorise un paiement, l’émetteur de la carte garantit les fonds et bloque le montant du paiement sur la carte du client. Vous disposez alors d’un certain délai pour capturer les fonds, en fonction de la carte bancaire). Si vous ne capturez pas le paiement avant l’expiration de l’autorisation, le paiement est annulé et l’émetteur débloque les fonds retenus.

La séparation de l’autorisation et de la capture est utile si vous devez réaliser des actions entre la confirmation de la solvabilité du client et la collecte du paiement. Par exemple, si vous vendez des articles dont le stock est limité, vous pouvez vérifier que l’article acheté par votre client avec Checkout est toujours disponible avant de capturer le paiement et de traiter la commande. Pour ce faire, procédez comme suit :

  1. Vérifiez que Stripe a autorisé le moyen de paiement du client.
  2. Consultez votre système de gestion des stocks pour vous assurer que l’article est toujours disponible.
  3. Mettez à jour votre système de gestion des stocks pour indiquer qu’un client a acheté l’article.
  4. Capturez le paiement du client.
  5. Indiquez au client si l’achat a réussi sur votre page de confirmation.

Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez la valeur de l’option payment_intent_data.capture_method sur manual lorsque vous créez la session Checkout. Ce paramètre indique à Stripe de se contenter d’autoriser le montant sur la carte du client.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d mode=payment \
  -d "payment_intent_data[capture_method]"=manual \
  -d return_url={{RETURN_URL}} \
  -d ui_mode=custom

Pour capturer un paiement qui a été autorisé, vous pouvez utiliser le Dashboard ou l’endpoint de capture. La capture de paiements par voie programmatique implique d’accéder au PaymentIntent créé lors de la session Checkout, que vous pouvez obtenir à partir de l’objet Session.

FacultatifGérer les comptes clients
No-code

Offrez à vos clients la possibilité de gérer leurs propres comptes en partageant un lien vers votre portail client. Le portail client permet aux clients de se connecter avec leur adresse e-mail pour gérer leurs abonnements, mettre à jour leurs moyens de paiement, etc.

FacultatifTraitement des commandes

Découvrez comment recevoir une notification de manière programmatique lorsqu’un client effectue un paiement.

Voir aussi

Cette page vous a-t-elle été utile ?
OuiNon
Code quickstart
Guides connexes
Composants Apparence API
Autres scénarios de paiement
Fonctionnement des cartes bancaires