Back to Blog

Connect Stripe Checkout

Use Stripe Checkout to accept one-time payments and subscriptions with hosted payment pages, webhooks, and production-ready success routing.

Posted by

Related reading

Ship with the App Router

Use server components, nested layouts, and streaming in the Next.js App Router to build fast pages with less client JavaScript.

Authentication with Supabase

Add Google sign-in, magic links, and protected routes with Supabase Auth using the helpers already wired into Indiexyz.

Optimize Core Web Vitals

Improve LCP, INP, and CLS with measurable budgets, prioritized images and scripts, and a release workflow that catches regressions early.

Illustration of a hosted Stripe checkout form

Let Stripe host payment details

Stripe Checkout reduces your PCI scope and gives customers a familiar payment page. It supports cards, wallets, local payment methods, subscriptions, and post-purchase redirects without a custom card form.

1. Add production keys safely

Store the secret key and webhook signing secret on the server. The publishable key can be public, but never place restricted keys in client bundles or public environment files.

STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_SITE_URL=https://indiexyz.com

2. Create a session from the server

Create the Checkout Session in a route handler. Use your product database as the source of truth for prices, pass a stable client reference ID, and return the hosted checkout URL to the browser.

3. Fulfill with webhooks

Treat the success URL as a UX redirect, not fulfillment. Verify the checkout.session.completed webhook signature, make the database update idempotent, and grant access only after Stripe confirms the payment.