Build a checkout pageBeta

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

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

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

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;

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