Cursorcursorintermediate
Add Stripe Payments to Next.js (Cursor Prompt)
Cursor prompt to add Stripe checkout sessions, webhook handlers, and payment tracking to an existing Next.js app.
What you'll get
Stripe payment integration with checkout sessions, webhook processing, and a pricing page in your Next.js app.
The Prompt
Add Stripe one-time and subscription payments to this Next.js app.
FILES TO CREATE:
- src/lib/stripe.ts — Stripe client initialization
- src/app/api/checkout/route.ts — POST endpoint to create Checkout Session
- src/app/api/webhooks/stripe/route.ts — POST endpoint for Stripe webhooks
- src/app/pricing/page.tsx — Pricing page with tier cards
- src/app/checkout/success/page.tsx — Post-payment success page
- src/app/checkout/canceled/page.tsx — Payment canceled page
DATABASE (Supabase):
- Create "payments" table: id, user_id, stripe_session_id, stripe_customer_id, amount, currency, status, product_name, created_at
- Create "subscriptions" table: id, user_id, stripe_subscription_id, stripe_customer_id, plan, status, current_period_end, created_at, updated_at
IMPLEMENTATION:
1. In src/lib/stripe.ts, initialize Stripe with STRIPE_SECRET_KEY.
2. The checkout route should accept { priceId, mode ('payment'|'subscription'), userId } and create a Checkout Session with success_url and cancel_url.
3. The webhook route must verify the Stripe signature, then handle: checkout.session.completed (insert into payments/subscriptions), customer.subscription.updated, customer.subscription.deleted.
4. The pricing page should display 3 tiers with features and call the checkout API on click.
DO NOT CHANGE:
- Existing auth setup
- Existing layout or navigation (just add links)
- Package.json scripts
ENVIRONMENT VARIABLES NEEDED:
- STRIPE_SECRET_KEY
- STRIPE_WEBHOOK_SECRET
- NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEYReplace these variables
| Variable | Replace with |
|---|---|
| [PRICE_IDS] | Stripe Price IDs for your products |
| [PRODUCT_TIERS] | Pricing tier names and features |
Tips for best results
Use the Stripe CLI (stripe listen --forward-to localhost:3000/api/webhooks/stripe) to test webhooks locally.
Always verify the webhook signature — never skip this step in production.
Follow-up prompts
Add customer portal
Add a /billing page that opens the Stripe Customer Portal so users can manage their subscription, update payment method, and view invoices.