You need to let users pay with Stripe in your Next.js app, but you're not sure how to create the checkout flow, keep your DB in sync, and give customers a self-service portal.

Step 1: Create the Stripe account and products

Sign up at https://stripe.com and stay in test mode.

Products > Add product

Name: "Pro Plan"

Pricing: Recurring, $29/month (add an annual price at $290/year for the discount)

Save and copy the price ID ( price_xxx )

Repeat for each tier (Starter, Pro, Enterprise). Grab two keys from the dashboard:

STRIPE_PUBLISHABLE_KEY ( pk_test_... in test mode)

STRIPE_SECRET_KEY ( sk_test_... )

You'll also need a webhook signing secret later.

Step 2: Install the SDK

npm install stripe @stripe/stripe-js

Enter fullscreen mode

Exit fullscreen mode

Add the keys to .env.local :

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = pk_test_... STRIPE_SECRET_KEY = sk_test_... STRIPE_WEBHOOK_SECRET = whsec_...…