Accéder directement au contenu
Créez un compte
 ou
connectez-vous
Le logo de la documentation Stripe
/
Créer 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 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
npm install stripe@18.0.0 --save

Configurez le SDK de sorte à utiliser au moins 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 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
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.

Vous devrez mettre à jour Stripe.js vers basil à partir de la version v3 en incluant la balise de 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>

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 fonction fetchClientSecret. Cette fonction récupère la clé secrète du client sur votre serveur et renvoie une promesse qui est résolue avec la clé secrète du client. Appelez initCheckout en transmettant fetchClientSecret. initCheckout renvoie une promesse aboutissant à une instance Checkout.

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

L’objet renvoyé par checkout.session() 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 en modifiant le moins possible le code. Par exemple, si vous affichez la valeur total, vous pouvez ajouter des tarifs manuels de devises sans modifier l’interface utilisateur.

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 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
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;
      }
    });
  });
});

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 moyens 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 connaître 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

Afficher un bouton « Payer » qui fait appel à la confirmation à partir de l’instance Checkout afin de soumettre 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;
      }
    });
  });
});

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.

Voir aussi

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
Code quickstart
Guides associés
API Elements Appearance
Plus de scénarios de paiement
Fonctionnement des cartes
Produits utilisés
Payments
Elements
Checkout