Stripe Integration for Vibe Coders

Install Library

npm install stripe @stripe/stripe-js

Environment Variables

Add to .env.local

# From Stripe Dashboard → Developers → API Keys
STRIPE_SECRET_KEY=sk_live_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...

# From Stripe Dashboard → Webhooks → endpoint → Signing secret
STRIPE_WEBHOOK_SECRET=whsec_...

Checkout Route

File: app/api/checkout/route.ts

import Stripe from 'stripe';
import { NextResponse } from 'next/server';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(req: Request) {
  const { priceId, userId } = await req.json();

  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: ${process.env.NEXT_PUBLIC_URL}/success,
    cancel_url: ${process.env.NEXT_PUBLIC_URL}/pricing,
    // Pass userId so your webhook knows who paid
    metadata: { userId },
  });

  return NextResponse.json({ url: session.url });
}

Signature Verification

File: app/api/webhook/route.ts

import Stripe from 'stripe';
import { headers } from 'next/headers';
import { NextResponse } from 'next/server';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

// ⚠️ CRITICAL: Next.js must NOT parse the body before we verify
export const dynamic = 'force-dynamic';

export async function POST(req: Request) {
  const body = await req.text(); // raw text, not json()
  const headersList = await headers();
  const sig = headersList.get('stripe-signature')!;

  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!);
  } catch (err) {
    return NextResponse.json({ error: 'Webhook signature failed' }, { status: 400 });
  }

  // Respond immediately — process heavy work async
  const response = NextResponse.json({ received: true });

  switch (event.type) {
    case 'checkout.session.completed':
      const session = event.data.object;
      // Queue async — don't await heavy ops here
      break;
  }

  return response;
}

Dashboard Registration

1. Go to Stripe Dashboard → Developers → Webhooks
2. Click Add endpoint
3. URL: https://yourdomain.com/api/webhook
4. Select events to listen to (see minimum list below)
5. Copy the Signing secret (whsec_...) to your env vars

The Fix

Option A: Disable JWT in Dashboard (Recommended)

Option B: CLI Configuration

File: supabase/config.toml

[functions.stripe-webhook]
verify_jwt = false

Full Edge Function

File: supabase/functions/stripe-webhook/index.ts

import Stripe from 'https://esm.sh/stripe@14';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';

const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY')!);

Deno.serve(async (req) => {
  const body = await req.text();
  const sig = req.headers.get('stripe-signature')!;
  let event;
  try {
    event = await stripe.webhooks.constructEventAsync(body, sig, Deno.env.get('STRIPE_WEBHOOK_SECRET')!);
  } catch (err) {
    return new Response(JSON.stringify({ error: err.message }), { status: 400 });
  }

  // Process event...
  return new Response(JSON.stringify({ received: true }));
});

5-Step Setup

// In your checkout handler, save the customer ID
const session = await stripe.checkout.sessions.retrieve(sessionId);
await db.users.update({
  where: { id: userId },
  data: { stripe_customer_id: session.customer }
});

import Stripe from 'stripe';
import { NextResponse } from 'next/server';
import { getServerSession } from 'next-auth'; // or your auth

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(req: Request) {
  const user = await getCurrentUser(); // get authenticated user
  
  if (!user?.stripe_customer_id) {
    return NextResponse.json({ error: 'No subscription found' }, { status: 400 });
  }

  const portalSession = await stripe.billingPortal.sessions.create({
    customer: user.stripe_customer_id,
    return_url: `${process.env.NEXT_PUBLIC_URL}/dashboard`,
  });

  return NextResponse.json({ url: portalSession.url });
}

async function openPortal() {
  const res = await fetch('/api/customer-portal', { method: 'POST' });
  const { url } = await res.json();
  window.location.href = url; // redirect to Stripe's hosted portal
}

<button onClick={openPortal}>Manage Billing</button>

case 'customer.subscription.deleted':
  const sub = event.data.object;
  await db.subscriptions.update({
    where: { stripe_subscription_id: sub.id },
    data: { status: 'cancelled', ends_at: new Date(sub.current_period_end * 1000) }
  });
  break;

Standard Test Cards