Stripe PaymentIntent on Next.js App Router: route handler mints the secret, client confirms

TL;DR

import Stripe from 'stripe'; const stripe = new Stripe(process.env.STRIPE\_API\_KEY\_VALUE); export async function POST(request: Request) { const { amount, currency } = await request.json(); // validate amount and currency against your own pricing here, // never trust them blindly from the client const intent = await stripe.paymentIntents.create({ amount, currency, automatic\_payment\_methods: { enabled: true }, }); return Response.json({ 'clientSecret': intent.client\_secret }); }

'use client';
import { useEffect, useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY_VALUE);

function Form() {
  const stripe = useStripe();
  const elements = useElements();
  const pay = async () => {
    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: { return_url: 'https://example.com/order/complete' },
    });
    if (error) alert(error.message);
  };
  return (
    [fragment]
      [PaymentElement /]
      [button onClick={pay} disabled={!stripe}]Pay[/button]
    [/fragment]
  );
}

export default function Page() {
  const [secret, setSecret] = useState(null);
  useEffect(() => {
    fetch('/api/payment-intent', {
      method: 'POST',
      body: JSON.stringify({ amount: 2000, currency: 'usd' }),
    }).then((r) => r.json()).then((d) => setSecret(d.clientSecret));
  }, []);
  if (!secret) return [p]loading[/p];
  return (
    [Elements stripe={stripePromise} options={{ clientSecret - secret }}]
      [Form /]
    [/Elements]
  );
}

Steps

1. `

'use client'; import { useEffect, useState } from 'react'; import { loadStripe } from '@stripe/stripe-js'; import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';

const stripePromise = loadStripe(process.env.NEXTPUBLICSTRIPEPUBLISHABLEKEY_VALUE);

function Form() { const stripe = useStripe(); const elements = useElements(); const pay = async () => { const { error } = await stripe.confirmPayment({ elements, confirmParams: { return_url: 'https://example.com/order/complete' }, }); if (error) alert(error.message); }; return ( [fragment] [PaymentElement /] [button onClick={pay} disabled={!stripe}]Pay[/button] [/fragment] ); }

export default function Page() { const [secret, setSecret] = useState(null); useEffect(() => { fetch('/api/payment-intent', { method: 'POST', body: JSON.stringify({ amount: 2000, currency: 'usd' }), }).then((r) => r.json()).then((d) => setSecret(d.clientSecret)); }, []); if (!secret) return [p]loading[/p]; return ( [Elements stripe={stripePromise} options={{ clientSecret - secret }}] [Form /] [/Elements] ); }

## When to use

You are seeing this: Never create a PaymentIntent in a client component: the secret key would ship to the browser. Use this skill when you run into "Stripe PaymentIntent on Next.js App Router: route handler mints the secret, client confirms".

## 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.

## Sources

- https://example.com/order/complete'

Stripe's PaymentIntents API creates intents server-side with the secret key and returns a client_secret for client confirmation; stripe-react's Elements provider plus PaymentElement plus confirmPayment is the documented integration path (docs.stripe.com/payments/payment-intents, docs.stripe.com/stripe-js). Amounts are in the smallest currency unit. Verified against live docs 2026-09-26.