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
Moyens de paiement
Payment interfaces
Payment scenarios
Paiements par TPE
Other Stripe products

Note

Cette page n'est pas encore disponible dans cette langue. Nous faisons tout notre possible pour proposer notre documentation dans davantage de langues et nous vous fournirons la version traduite dès qu'elle sera disponible.

Build a checkout pageBêta

Learn how to use Elements and Custom Checkout to build a checkout page.

Version bêta privée

The Custom Checkout integration is in private preview. To request access, click here.

You can build a custom checkout page on your website using Stripe Elements and Custom Checkout, a front-end SDK that manages tax, discounts, shipping rates, and so on.

Set up the server
Server-side

Before you begin, you need to register for a Stripe account.

Use the official Stripe libraries to access the API from your application.

Command Line
npm install stripe@16.8.0-beta.1 --save

Set the SDK to use the custom_checkout_beta=v1 beta version header.

// 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 = Stripe(
'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
, {
  apiVersion: '2024-11-20.acacia; custom_checkout_beta=v1' as any,
});

Initialize a Checkout Session
Server-side

Add an endpoint on your server that creates a Checkout Session object and returns its client secret to your front-end.

A Checkout Session represents your customer’s session as they pay for one-time purchases or subscriptions. Checkout Sessions expire 24 hours after creation.

server.ts
import 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({clientSecret: session.client_secret});
});

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

For more details about creation parameters, see create a Checkout Session.

Set up the front end
Client-side

Install React Stripe.js and the Stripe.js loader from the npm public registry. You need at least version 2.7.2 for React Stripe.js and version 4.9.0 for the Stripe.js loader.

Command Line
npm install --save @stripe/react-stripe-js@^2.7.2 @stripe/stripe-js@^4.9.0

Initialize a stripe instance on your front end with your publishable key, passing in the custom_checkout_beta_4 beta.

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

Retrieve the clientSecret from your server and wrap your application with the CustomCheckoutProvider component.

Use the useCustomCheckout hook in your components to get the checkout object, which contains data from the Checkout Session as well as methods to update it. For now, render the line items as text and log the checkout object to the console to see what’s available.

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

const App = ({clientSecret}) => {
  const [clientSecret, setClientSecret] = React.useState(null);
  React.useEffect(() => {
    fetch('/create-checkout-session', {method: 'POST'})
      .then((response) => response.json())
      .then((json) => setClientSecret(json.clientSecret))
  });

  if (clientSecret) {
    return (
      <CustomCheckoutProvider
        stripe={stripe}
        options={{clientSecret}}
      >
        <CheckoutForm />
      </CustomCheckoutProvider>
    );
  } else {
    return null;
  }
};

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

const CheckoutForm = () => {
  const checkout = useCustomCheckout();
  console.log(checkout);
  return (
    <pre>
      {JSON.stringify(checkout.lineItems, null, 2)}
    </pre>
  )
};

Next steps

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 produits.
Des questions ? Contactez l'équipe commerciale.
Propulsé par Markdoc