Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usage
Créer une page de paiement
Moyens de paiement
Interfaces de paiement
Scénarios de paiement
Paiements par TPE
Autres produits Stripe

Créer une page de paiement à l'aide de composants intégrésVersion bêta publique

Utilisez Elements et l’API Checkout Sessions pour créer une page de paiement.

Copier la page

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@17.4.0-beta.2 --save

Configurez le SDK pour qu’il utilise l’en-tête de version bêta custom_checkout_beta=v1.

// 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-02-24.acacia; custom_checkout_beta=v1' 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: '{{RETURN_URL}}'
  });

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

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

Configurer le front-end
Côté client

Installez React Stripe.js et le chargeur Stripe.js à partir du registre public npm. Vous devez disposer au minimum de la version 3.5.0 pour React Stripe.js et de la version 6.1.0 pour le chargeur Stripe.js.

Command Line
npm install --save @stripe/react-stripe-js@^3.5.0 @stripe/stripe-js@^6.1.0

Initialisez une instance stripe sur votre front-end avec votre clé publique, en transmettant l’attribut bêta custom_checkout_beta_6.

App.jsx
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe(
"pk_test_TYooMQauvdEDq54NiTphI7jx"
, {
  betas: ['custom_checkout_beta_6'],
});

Initialiser Checkout
Côté client

Créez une fonction fetchClientSecret. Cette fonction doit récupérer la clé secrète du client auprès de votre serveur et renvoyer une promesse qui se résout avec la clé secrète du client.

Encapsulez votre application avec le composant CheckoutProvider, en transmettant la fonction fetchClientSecret et l’instance stripe.

Use the useCheckout hook in your components to get the checkout object, which contains data from the Checkout Session as well as methods to update the Session.

Utilisez l’objet checkout comme source de vérité pour les tarifs. Nous vous recommandons de lire et d’afficher les attributs total, currency et lineItems de l’objet checkout 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 manual currency prices ne nécessite aucune modification de l’interface utilisateur si vous affichez les attributs total etcurrency.

Mise en garde

Vous pouvez recevoir une erreur si vous ne lisez et n’affichez pas correctement les tarifs de l’objet checkout.

App.jsx
import React from 'react';
import {CheckoutProvider} from '@stripe/react-stripe-js';
import CheckoutForm from './CheckoutForm';

const App = () => {
  const fetchClientSecret = () => {
    return fetch('/create-checkout-session', {method: 'POST'})
      .then((response) => response.json())
      .then((json) => json.checkoutSessionClientSecret)
  };

  return (
    <CheckoutProvider
      stripe={stripe}
      options={{fetchClientSecret}}
    >
      <CheckoutForm />
    </CheckoutProvider>
  );
};

export default App;
CheckoutForm.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCheckout();
  return (
    <pre>
      {JSON.stringify(checkout.lineItems, null, 2)}
      Currency: {checkout.currency}
      // A formatted total amount
      Total: {checkout.total.total.amount}
    </pre>
  )
};

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

Créez un composant 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.

Depending on the design of your checkout form, you can call updateEmail in the following ways:

  • Directly before submitting the payment. You can also call updateEmail to validate earlier, such as on input blur.
  • Before transitioning to the next step, such as clicking a Save button, if your form includes multiple steps.
EmailInput.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

const EmailInput = () => {
  const checkout = useCheckout();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(null);

  const handleBlur = () => {
    checkout.updateEmail(email).then((result) => {
      if (result.error) {
        setError(result.error);
      }
    })
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };
  return (
    <div>
      <input
        type="text"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <div>{error.message}</div>}
    </div>
  );
};

export default EmailInput;

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.

Montez le composant Payment Element dans le CheckoutProvider.

CheckoutForm.jsx
import React from 'react';
import {PaymentElement, useCheckout} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCheckout();
  return (
    <form>
      <PaymentElement options={{layout: 'accordion'}}/>
    </form>
  )
};

export default CheckoutForm;

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

Envoyer le paiement
Côté client

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

PayButton.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

const PayButton = () => {
  const {confirm} = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  const handleClick = () => {
    setLoading(true);
    confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;

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