Integrate Stripe payments into a web application, including checkout sessions, webhooks, and customer portal.
Use this skill when the user asks to add payments, billing, subscriptions, or Stripe integration.
Install the SDK
npm install stripe @stripe/stripe-js
Add environment variables
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
Create a Stripe client module — create lib/stripe.ts:
import Stripe from "stripe";
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: "2024-12-18.acacia",
});
Create a checkout API route — create an endpoint that creates a Stripe Checkout session:
const session = await stripe.checkout.sessions.create({
mode: "subscription", // or "payment" for one-time
payment_method_types: ["card"],
line_items: [{ price: priceId, quantity: 1 }],
success_url: `${origin}/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${origin}/pricing`,
customer_email: userEmail,
});
return redirect(session.url!);
Create a webhook handler — create a POST endpoint at /api/webhooks/stripe:
stripe.webhooks.constructEvent.checkout.session.completed, customer.subscription.updated, customer.subscription.deleted, invoice.payment_failed.Add customer portal (optional) — create an endpoint that redirects to stripe.billingPortal.sessions.create so users can manage their subscription.
Add pricing page UI — create a pricing page with plan cards that call the checkout API route.
stripe listen --forward-to localhost:3000/api/webhooks/stripe) for local webhook testing.stripe.prices.list to fetch prices dynamically instead of hardcoding them.