Stripe Integration Step by Step

Stripe is the default payment processor for SaaS applications, and for good reason — it handles the complexity of payment processing, subscription management, tax calculation, and invoicing. Here is how to integrate it properly in a Next.js application.

Setting Up Stripe

Install the stripe npm package for server-side operations and @stripe/stripe-js for client-side. Create a Stripe instance in a shared utility file using your secret key. Set the API version explicitly to avoid breaking changes when Stripe releases new versions. Use the test mode keys during development — they simulate all payment scenarios without real charges.

Checkout Sessions

The simplest payment flow uses Stripe Checkout Sessions. Create an API route that instantiates a checkout session with your price IDs, success and cancel URLs, and customer email. Redirect the user to the Stripe-hosted checkout page. After payment, Stripe redirects back to your success URL. This approach requires zero payment UI code on your side.

Webhook Handling

Payments happen asynchronously, so webhooks are the source of truth. Create a webhook endpoint that receives Stripe events. Verify the webhook signature using the endpoint secret. Handle checkout.session.completed to provision access, invoice.paid to extend subscriptions, and customer.subscription.deleted to revoke access. Process webhooks idempotently — Stripe may send the same event multiple times.

Subscription Management

For SaaS subscriptions, use Stripe Billing. Define your products and prices in the Stripe dashboard. Create subscriptions programmatically or via Checkout Sessions with mode: subscription. Handle plan changes (upgrades and downgrades) with prorated billing. Use the Stripe Customer Portal to let users manage their own subscriptions, payment methods, and invoices.

Testing and Going Live

Use Stripe test clocks to simulate subscription lifecycles — create a subscription, advance time, and verify that renewals, failures, and cancellations work correctly. Test webhook handling with the Stripe CLI: stripe listen --forward-to localhost:3000/api/webhooks/stripe. Before going live, verify: webhook endpoint is production URL, API keys are swapped, error handling covers all failure modes, and customer support can access the Stripe dashboard.