Context:
I’m using Next.js, Typescript, and GraphQL to build an “onboarding” multi-step form (4 steps) with the Stripe API.

The purpose of this /onboarding flow is for first-time users to create an organization and collect payment information.

I’ve created 4 Steps/Components in the <OnboardingForm />

1. ✅ <OnboardingName />
2. ✅ <OnboardingMember />
3. ✅ <OnboardingPlan />
4. ❌ <OnboardingPayment />

Problem:
I don’t know how to integrate the Stripe API — so that I can retrieve the setupIntentId that is necessary for stripe.confirmSetup() (payment confirmation)

My understanding of the Next.js + Stripe API flow (Need help here)

1. Frontend - After user submits form, frontend should create a setupIntent on Stripe’s servers. This is done via a call to my backend (/onboarding/route.ts) or directly to Stripe’s API
2. Stripe’s stripe.confirmSetup (equivalent)
1. After receiving client_secret, you call stripe.confirmSetup to confirm the payment method
2. Stripe handles the payment method confirmation and redirects the user to route.ts with
1. setup_intent_client_secret
2. setup_intent_id
3. redirect_status
3. Stripe Redirect URL
1. Stripe should be configured to redirect the user back to /onboarding AFTER confirming the payment method
2. redirect_url must match route specified in your Stripe setup
1. If URL is incorrect or misconfigured, the redirect won’t happen and API route will never be triggered
4. Browser Navigation
1. After Stripe processes the payment, user is redirected to your URL
2. Query params are appended to URL and triggers route.ts handler on server