Accéder directement au contenu
Créez un compte ou connectez-vous
Le logo de la documentation Stripe
/
Créer un compteConnectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
AperçuTrouver votre cas d'usageUtiliser Managed Payments
Paiements en personne
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 et plus encore.

Pays du client
Taille
Thème
Disposition
Cette démo n'affiche Google Pay ou Apple Pay que si vous avez une carte active avec l'un ou l'autre des portefeuilles numériques.

Configurer le serveur
Côté serveur

Pour commencer, vous devez 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 de sorte à utiliser au moins 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 un point de terminaison sur votre serveur qui crée une session Checkout et renvoie sa clé secrète client à votre application frontale. Une session Checkout représente la session de votre client au cours de laquelle il 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 l'application frontale
Côté client

Ajoutez le script Stripe.js à votre page de paiement en l’ajoutant à head de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester en conforme à la norme PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie vous-même.

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>

Remarques

Stripe fournit un progiciel npm que vous pouvez utiliser pour charger Stripe.js en tant que module. Voir le projet sur GitHub. La version 7.0.0 ou 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 une promesse clientSecret qui se résout avec la clé secrète du client ou définissez-la directement comme clé secrète. Appelez initCheckout, en transmettant clientSecret. initCheckout renvoie une promesse qui se résout en une instance Checkout.

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

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

Cela vous permet d’activer de nouvelles fonctionnalités avec un minimum de modifications du code. Par exemple, l’ajout de prix manuels en 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 l'adresse courriel du client
Côté client

Créez une saisie d’adresse courriel pour recueillir l’adresse courriel de votre client. Faites appel à updateEmail lorsque votre client a terminé la saisie de l’adresse courriel pour la valider et l’enregistrer.

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

  • Juste avant d’envoyer le 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;
      }
    });
  });
}

Collectez les informations de paiement
Côté client

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

Tout d’abord, créez un élément DOM de conteneur pour monter le Payment Element. Créez ensuite une instance du Payment Element à l’aide de checkout.createPaymentElement et montez-la en faisant appel à element.mount, 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 voir les options prises en charge.

Vous pouvez personnaliser l’apparence de tous les composants Elements en transmettant elementsOptions.appearance lors de l’initialisation de Checkout sur l’application frontale.

Envoyer le paiement
Côté client

Affichez un bouton Payer qui appelle la fonction confirmer à partir de l’instance paiement pour envoyer 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;
      }
    });
  });
}

Testez votre intégration

  1. Accédez à votre page de paiement.
  2. Remplissez les informations de paiement à l’aide d’un moyen de paiement figurant dans le tableau suivant. Pour les paiements par carte :
    • Saisissez une date ultérieure pour l’expiration de la carte.
    • Saisissez un numéro à 3 chiffres du CVC.
    • Saisissez un code postal de facturation.
  3. Envoyer le paiement à Stripe.
  4. Accédez au Dashboard et cherchez le paiement sur la page Transactions. Si votre paiement a été effectué, vous le verrez dans cette liste.
  5. Cliquez sur votre paiement pour afficher davantage de détails, comme les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour traiter la commande.
Numéro de carteScénarioComment tester
Le paiement par carte est réussi et ne nécessite pas d’authentification.Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix.
Le paiement par carte requiert une authentification.Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un 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 de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix.
Le numéro de carte UnionPay a une longueur variable de 13 à 19 chiffres.Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix.

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

FacultatifCréer des produits et des prix

Avant de créer une session Checkout, vous pouvez créer des produits et des prix à l’avance. Utilisez des produits pour représenter différents biens physiques ou niveaux de service, et des prix pour représenter le prix de chaque produit.

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

L’API ne nécessite que d’un attribut name pour créer un produit. Checkout affiche les paramètres name, description et images du produit que vous fournissez.

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 montant à débiter pour votre produit. Cela inclut le coût du produit et la devise à utiliser.

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 dispose d’un ID. Lorsque vous créez une session Checkout, faites référence à l’ID du prix et à la quantité. Si vous vendez dans plusieurs devises, affichez votre prix multi-devise. Checkout détermine automatiquement la devise locale du client et présente cette devise si le prix le 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}"

FacultatifRemplir automatiquement les données du client
Côté serveur

Si vous avez déjà recueilli l’adresse courriel de votre client et que vous souhaitez la faire remplir 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 du moyen 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 apportées à la session Checkout

Écouter les modifications apportées à la session Checkout

Vous pouvez écouter les modifications apportées à la session Checkout au moyen d’un écouteur d’événements ajouté 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

Recueillir une adresse de facturation

Par défaut, une session Checkout recueille les informations de facturation minimales requises pour le paiement au moyen du Payment Element.

Utilisation du composant Billing Address Element

Vous pouvez recueillir 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 de conteneur pour monter le composant Billing Address Element. Créez ensuite une instance du composant Billing Address Element à l’aide de checkout.createBillingAddressElement et montez-la en faisant appel à element.mount, 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 propriétés suivantes :

Utilisation d’un formulaire personnalisé

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

  • Si votre page de paiement comporte une étape distincte de collecte d’adresses avant la confirmation, appelez updateBillingAddress lorsque votre client soumet l’adresse.
  • Vous pouvez également soumettre l’adresse lorsque votre client clique sur le bouton « Payer » et transmettre billingAddress à confirmer.

Recueillir des adresses de facturation partielles

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

Lors de la collecte d’adresses de facturation partielles, vous devez recueillir les adresses manuellement. Par défaut, le Payment Element recueille 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 recueillir uniquement un sous-ensemble d’informations de facturation (telles que le nom du client), transmettez uniquement never pour les champs que vous avez l’intention de collecter vous-même.

Recueillir une adresse de livraison

Pour recueillir 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 obtenez une adresse de livraison, vous devez également préciser les pays vers lesquels vous souhaitez autoriser la livraison. Configurez la propriété allowed_countries avec un tableau de codes pays ISO à deux lettres.

Comment utiliser le composant Shipping Address Element

Vous pouvez recueillir 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 du Shipping Address Element à l’aide de checkout.createShippingAddressElement et montez-la en appelant element.mount, 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 apportées à la session Checkout

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

Utilisez l’objet Session pour afficher le montant de la 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 recueillir les adresses de livraison.

  • Si votre page de paiement comporte une étape distincte de collecte d’adresses avant la confirmation, appelez updateShippingAddress lorsque votre client soumet l’adresse.
  • Sinon, vous pouvez soumettre l’adresse lorsque votre client clique sur le bouton « Payer » et transmettre shippingAddress à confirmer.

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

Stripe prend en charge les paiements par carte en deux temps afin que vous puissiez d’abord autoriser une carte, puis capturer des fonds plus tard. Lorsque Stripe autorise un paiement, l’émetteur de la carte garantit les fonds et retient le montant du paiement sur la carte du client. Vous avez ensuite un certain temps pour capturer les fonds, en fonction de la carte. Si vous ne capturez pas le paiement avant l’expiration de l’autorisation, le paiement sera annulé et l’émetteur libérera les fonds retenus.

La séparation de l’autorisation et de la capture est utile si vous devez prendre des mesures supplémentaires entre la confirmation de la solvabilité du client et la collecte du paiement. Par exemple, si vous vendez des articles dont l’inventaire est limité, vous devrez peut-être 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. Confirmez que Stripe a autorisé le moyen de paiement du client.
  2. Consultez votre système de gestion d’inventaire pour vous assurer que l’article est toujours disponible.
  3. Mettez à jour votre système de gestion d’inventaire 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 payment_intent_data.capture_method à manual lorsque vous créez la session Checkout. Ainsi, Stripe autorise uniquement 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 non capturé, vous pouvez utiliser le Dashboard ou le point de terminaison 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 à l’aide de l’objet Session.

FacultatifGestion des comptes clients
Aucun codage requis

Laissez vos clients 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 courriel pour gérer leurs abonnements, mettre à jour leurs modes de paiement et plus encore.

FacultatifTraitement des commandes

Découvrez comment recevoir une notification par voie programmatique lorsqu’un client effectue un paiement.

Voir aussi

Cette page vous a-t-elle été utile?
OuiNon
Code quickstart
Guides associés
API Elements Appearance
Plus de scénarios de paiement
Fonctionnement des cartes