How to implement Stripe Elements in React

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

1// src/stripe.ts (or .js)
2import { loadStripe } from '@stripe/stripe-js';
3
4export const stripePromise = loadStripe('pk_test_YOUR_PUBLISHABLE_KEY');

1import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
2import { useState, FormEvent } from 'react';
3
4export function CheckoutForm() {
5  const stripe = useStripe();
6  const elements = useElements();
7  const [error, setError] = useState<string | null>(null);
8  const [processing, setProcessing] = useState(false);
9
10  const handleSubmit = async (e: FormEvent) => {
11    e.preventDefault();
12    if (!stripe || !elements) return;
13
14    setProcessing(true);
15    setError(null);
16
17    const { error: confirmError } = await stripe.confirmPayment({
18      elements,
19      confirmParams: {
20        return_url: window.location.origin + '/payment-complete',
21      },
22    });
23
24    // Only reaches here if there's an immediate error
25    if (confirmError) {
26      setError(confirmError.message || 'Payment failed');
27      setProcessing(false);
28    }
29  };
30
31  return (
32    <form onSubmit={handleSubmit}>
33      <PaymentElement />
34      {error && <div style={{ color: 'red', marginTop: 8 }}>{error}</div>}
35      <button type="submit" disabled={!stripe || processing}>
36        {processing ? 'Processing...' : 'Pay now'}
37      </button>
38    </form>
39  );
40}

1import { Elements } from '@stripe/react-stripe-js';
2import { stripePromise } from './stripe';
3import { CheckoutForm } from './CheckoutForm';
4import { useEffect, useState } from 'react';
5
6export function PaymentPage() {
7  const [clientSecret, setClientSecret] = useState('');
8
9  useEffect(() => {
10    fetch('/create-payment-intent', {
11      method: 'POST',
12      headers: { 'Content-Type': 'application/json' },
13      body: JSON.stringify({ amount: 2000 }), // $20.00
14    })
15      .then((res) => res.json())
16      .then((data) => setClientSecret(data.clientSecret));
17  }, []);
18
19  if (!clientSecret) return <div>Loading...</div>;
20
21  return (
22    <Elements stripe={stripePromise} options={{ clientSecret }}>
23      <CheckoutForm />
24    </Elements>
25  );
26}

1// Test card: 4242 4242 4242 4242
2// Expiry: 12/34
3// CVC: 123
4// The PaymentElement shows card fields + any wallet options