gem-hunter

React Stripe.js

Requirements

Getting started

Documentation

Build a custom checkout page

npm install @stripe/react-stripe-js @stripe/stripe-js

// POST /create-checkout-session
const session = await stripe.checkout.sessions.create({
  ui_mode: 'elements',
  mode: 'payment',
  return_url: 'https://example.com/order/123/complete',
  line_items: [
    {
      price_data: {
        currency: 'usd',
        product_data: {name: 'T-shirt'},
        unit_amount: 1099,
      },
      quantity: 1,
    },
  ],
});

if (!session.client_secret) {
  throw new Error('Checkout Session is missing a client secret.');
}

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

import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {loadStripe} from '@stripe/stripe-js';
import {
  PaymentElement,
  CheckoutElementsProvider,
  useCheckoutElements,
} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const result = useCheckoutElements();
  const [errorMessage, setErrorMessage] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (result.type !== 'success' || !result.checkout.canConfirm) {
      return;
    }

    setIsSubmitting(true);
    setErrorMessage(null);

    try {
      const confirmResult = await result.checkout.confirm({
        returnUrl: 'https://example.com/order/123/complete',
      });

      if (confirmResult.type === 'error') {
        setErrorMessage(confirmResult.error.message);
      }
    } catch (error) {
      setErrorMessage(
        error instanceof Error ? error.message : 'An unexpected error occurred.'
      );
    } finally {
      setIsSubmitting(false);
    }
  };

  if (result.type === 'loading') {
    return <div>Loading checkout...</div>;
  }

  if (result.type === 'error') {
    return <div>{result.error.message}</div>;
  }

  const {checkout} = result;

  return (
    <>
      <ul>
        {checkout.lineItems.map((lineItem) => (
          <li key={lineItem.id}>
            {lineItem.name}: {lineItem.total.amount}
          </li>
        ))}
      </ul>
      <p>Total: {checkout.total.total.amount}</p>
      <form onSubmit={handleSubmit}>
        <PaymentElement />
        <button type="submit" disabled={!checkout.canConfirm || isSubmitting}>
          {isSubmitting ? 'Processing...' : 'Pay'}
        </button>
        {errorMessage && <div>{errorMessage}</div>}
      </form>
    </>
  );
};

// Use the publishable key for the same account that created the Checkout Session.
const stripePromise = loadStripe('pk_test_...');

const clientSecretPromise = fetch('/create-checkout-session', {
  method: 'POST',
}).then(async (response) => {
  const body = await response.json();

  if (!response.ok) {
    throw new Error(body.error ?? 'Unable to create a Checkout Session.');
  }

  return body.clientSecret;
});

const options = {
  clientSecret: clientSecretPromise,
  elementsOptions: {
    appearance: {
      theme: 'stripe',
    },
  },
};

const App = () => (
  <CheckoutElementsProvider stripe={stripePromise} options={options}>
    <CheckoutForm />
  </CheckoutElementsProvider>
);

createRoot(document.getElementById('root')).render(<App />);

TypeScript support

Contributing