Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous

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

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

Vous devrez mettre à jour Stripe.js vers basil à partir de la v3 en incluant la balise script suivante : <script src="https://js.stripe.com/basil/stripe.js"></script>. En savoir plus sur la gestion des versions de Stripe.js.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/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 une fonction fetchClientSecret. Cette fonction récupère la clé secrète du client auprès de votre serveur et renvoie une promesse qui se résout avec la clé secrète du client. Appelez initCheckout, en transmettant fetchClientSecret. initCheckout renvoie alors une promesse qui aboutit à une instance checkout.

L’objet checkout est la clé de voûte de votre page de paiement. Il contient les données de la session Checkout et les méthodes permettant de mettre à jour cette session.

L’objet renvoyé par checkout.session() contient vos informations tarifaires. Nous vous recommandons de lire et d’afficher les attributs total et 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 tarifs saisis manuellement pour chaque devise ne nécessite aucune modification de l’interface utilisateur si vous affichez la valeur total.

checkout.js
const fetchClientSecret = () => {
  return fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret);
};
stripe.initCheckout({fetchClientSecret})
  .then((checkout) => {
    const checkoutContainer = document.getElementById('checkout-container');
    checkoutContainer.append(JSON.stringify(checkout.lineItems, null, 2));
    checkoutContainer.append(document.createElement('br'));
    checkoutContainer.append(`Total: ${checkout.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
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  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;
    checkout.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

Affichez un bouton « Payer » qui appelle confirm à partir de l’instance de paiement pour envoyer le paiement.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

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

Voir aussi

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
Code quickstart
Guides connexes
Composants Apparence API
Autres scénarios de paiement
Fonctionnement des cartes bancaires
Produits utilisés
Payments
Elements
Checkout