Stripe Secret Key in Your Frontend: How to Fix It

Roll the key

In the Stripe dashboard, roll the exposed secret key immediately and update your server environment. Consider restricted keys with only the permissions your backend needs.

Create Checkout sessions on the server

The browser asks your server for a Checkout URL; your server creates the session with the secret key.

// app/api/checkout/route.ts
import Stripe from "stripe";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
export async function POST() {
  const s = await stripe.checkout.sessions.create({
    mode: "payment",
    line_items: [{ price: process.env.STRIPE_PRICE_ID!, quantity: 1 }],
    success_url: "https://your-app.com/thanks?session_id={CHECKOUT_SESSION_ID}",
    cancel_url: "https://your-app.com/pricing",
  });
  return Response.json({ url: s.url });
}

Fulfil from verified webhooks

Grant access only after checkout.session.completed arrives with a valid Stripe-Signature checked via stripe.webhooks.constructEvent. Never trust a success redirect alone.

Checklist

• Exposed key rolled
• No sk_live_/rk_live_ in client bundles
• Checkout sessions created server-side
• Webhook signatures verified
• Fulfilment is idempotent

Copy-paste fix prompt

Remove every use of the Stripe secret key from client code. Add a server route that creates Checkout sessions, a webhook route that verifies signatures with STRIPE_WEBHOOK_SECRET and fulfils orders idempotently, and change the frontend to redirect to the returned session URL.

FAQ