How to fix CORS issues when using Stripe API on frontend

1// WRONG — this will cause CORS errors and expose your secret key
2const response = await fetch('https://api.stripe.com/v1/payment_intents', {
3  method: 'POST',
4  headers: {
5    'Authorization': 'Bearer sk_test_...',  // NEVER do this
6  },
7});
8
9// RIGHT — call YOUR server instead
10const response = await fetch('/api/create-payment-intent', {
11  method: 'POST',
12  headers: { 'Content-Type': 'application/json' },
13  body: JSON.stringify({ amount: 2000, currency: 'usd' }),
14});

1const express = require('express');
2const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
3const cors = require('cors');
4
5const app = express();
6app.use(cors({ origin: 'http://localhost:3000' })); // Your frontend origin
7app.use(express.json());
8
9app.post('/api/create-payment-intent', async (req, res) => {
10  const { amount, currency } = req.body;
11
12  const paymentIntent = await stripe.paymentIntents.create({
13    amount,  // in cents: 2000 = $20.00
14    currency: currency || 'usd',
15    automatic_payment_methods: { enabled: true },
16  });
17
18  // Only send the client_secret — NEVER send the full PaymentIntent
19  res.json({ clientSecret: paymentIntent.client_secret });
20});

1// Frontend code (React example)
2import { loadStripe } from '@stripe/stripe-js';
3import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
4
5// pk_ key is safe for the frontend
6const stripePromise = loadStripe('pk_test_your_publishable_key');
7
8function CheckoutForm() {
9  const stripe = useStripe();
10  const elements = useElements();
11
12  const handleSubmit = async (e) => {
13    e.preventDefault();
14
15    // 1. Create PaymentIntent on YOUR server
16    const res = await fetch('/api/create-payment-intent', {
17      method: 'POST',
18      headers: { 'Content-Type': 'application/json' },
19      body: JSON.stringify({ amount: 2000, currency: 'usd' }),
20    });
21    const { clientSecret } = await res.json();
22
23    // 2. Confirm payment with Stripe.js
24    const { error } = await stripe.confirmPayment({
25      elements,
26      clientSecret,
27      confirmParams: { return_url: 'http://localhost:3000/success' },
28    });
29
30    if (error) console.error(error.message);
31  };
32
33  return (
34    <form onSubmit={handleSubmit}>
35      <PaymentElement />
36      <button type="submit">Pay</button>
37    </form>
38  );
39}