How to set up Stripe with React

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

1// server/index.js
2const express = require('express');
3const cors = require('cors');
4const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
5
6const app = express();
7app.use(cors({ origin: 'http://localhost:3000' }));
8app.use(express.json());
9
10app.post('/create-payment-intent', async (req, res) => {
11  try {
12    const { amount } = req.body;
13    const paymentIntent = await stripe.paymentIntents.create({
14      amount,
15      currency: 'usd',
16      automatic_payment_methods: { enabled: true },
17    });
18    res.json({ clientSecret: paymentIntent.client_secret });
19  } catch (err) {
20    res.status(500).json({ error: err.message });
21  }
22});
23
24app.listen(4000, () => console.log('Server on port 4000'));

1// src/lib/stripe.ts
2import { loadStripe } from '@stripe/stripe-js';
3
4export const stripePromise = loadStripe(
5  import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || 'pk_test_YOUR_KEY'
6);

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

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

1// Terminal 1: STRIPE_SECRET_KEY=sk_test_xxx node server/index.js
2// Terminal 2: npm start (or npm run dev)
3// Test card: 4242 4242 4242 4242, Expiry: 12/34, CVC: 123