Stripe PaymentIntent in a React SPA: Elements provider plus confirmCardPayment

TL;DR

Example: ` const intent = await stripe.paymentIntents.create({ amount: 2000, currency: 'usd', automatic\_payment\_methods: { enabled: true }, }); // respond with JSON carrying the client secret

import { loadStripe } from '@stripe/stripe-js';
import { Elements, CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

const stripePromise = loadStripe('YOUR_PUBLISHABLE_KEY_VALUE');

function CheckoutForm({ clientSecret }) {
  const stripe = useStripe();
  const elements = useElements();

  const pay = async (e) => {
    e.preventDefault();
    const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
      payment_method: { card: elements.getElement(CardElement) },
    });
    if (error) {
      console.log(error.message);
    } else if (paymentIntent.status === 'succeeded') {
      console.log('paid');
    }
  };

  return (
    [form onSubmit={pay}]
      [CardElement /]
      [button disabled={!stripe}]Pay[/button]
    [/form]
  );
}

export default function App({ clientSecret }) {
  return (
    [Elements stripe={stripePromise}]
      [CheckoutForm clientSecret [your value] /]
    [/Elements]
  );
}

Steps

1. Create the intent with the secret key and return only the client secret. Example:

const intent = await stripe.paymentIntents.create({
 amount: 2000,
 currency: 'usd',
 automatic_payment_methods: { enabled: true },
});
// respond with JSON carrying the client secret

2. - Fetch the client secret from your backend when the checkout page loads, then render Elements.

• confirmCardPayment handles 3D Secure automatically; check paymentIntent.status after it resolves.
• The publishable key is public by design. The secret key never appears in frontend code.

When to use

You are seeing this: In a Vite or Create React App SPA there is no server component: your backend (any framework) exposes an endpoint that creates the PaymentIntent and returns the client secret. Use this skill when you run into "Stripe PaymentIntent in a React SPA: Elements provider plus confirmCardPayment".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

Stripe's PaymentIntents API creates intents server-side returning a client_secret; stripe-react's Elements provider plus CardElement plus confirmCardPayment is the documented SPA path (docs.stripe.com/payments/accept-a-payment, docs.stripe.com/stripe-js). The publishable key is public by design; the secret key never leaves the server. Verified against live docs 2026-09-26.