Stripe-Stack：Next.js + Supabase 支付集成指南，实现幂等Webhook与安全支付

🇺🇸English

<quick_start> Add payments to a Next.js + Supabase project:

1. Install Stripe: npm install stripe @stripe/stripe-js
2. Add env vars (see quick_reference below)
3. Create idempotency table (see schema below)
4. Choose workflow: setup-new-project.md or add-webhook-handler.md

// Lazy-loaded Stripe client

import Stripe from 'stripe';
let _stripe: Stripe | null = null;
export function getStripe(): Stripe {
  if (!_stripe) {
    _stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: '2025-12-15.clover' });
  }
  return _stripe;
}

</quick_start>

<success_criteria> Integration is successful when:

• Webhook handler uses database-backed idempotency (not in-memory)
• All keys in environment variables (never hardcoded)
• Test mode fully working before any live mode deployment
• Signature verification on all webhook endpoints
• Event logging before processing (insert-before-process pattern)
• Go-live checklist completed before production deployment </success_criteria>

<essential_principles>

Core Principles

1. Idempotency is Non-Negotiable

   • ALL webhook handlers MUST use database-backed idempotency
   • Never use in-memory Sets (lost on serverless cold starts)
   • Insert event record BEFORE processing, not after

2. Test/Live Mode Separation

   • Use environment variables for ALL keys (never hardcode)
   • Test keys: sk_test_, pk_test_, whsec_test_
   • Live keys: sk_live_, pk_live_, whsec_live_
   • Products/prices must be recreated in live mode

3. Shared Stripe Account

   • All NetZero Suite projects share ONE Stripe account
   • Same webhook secret can be used across projects

</essential_principles>

What Are You Building?

Before proceeding, identify your use case:

Workflow Routing

If setting up Stripe in a new project: → Read workflows/setup-new-project.md → Then read reference/environment-vars.md → Use templates/stripe-client.ts and templates/env-example.txt

If adding webhook handling: → Read workflows/add-webhook-handler.md → Then read reference/webhook-patterns.md → Use templates/webhook-handler-nextjs.ts and templates/idempotency-migration.sql

If implementing subscription billing: → Read workflows/implement-subscriptions.md → Then read reference/pricing-models.md → Use templates/plans-config.ts

If adding credit/usage-based system: → Read workflows/add-credit-system.md → Then read reference/pricing-models.md

If migrating test → production: → Read workflows/go-live-checklist.md

<quick_reference>

Quick Reference

Environment Variables (Standard)

# Server-side (never expose to client)
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Client-side (safe to expose)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

# Optional: Price IDs (for test→live switching)
STRIPE_PRICE_STARTER_MONTHLY=price_...
STRIPE_PRICE_PRO_MONTHLY=price_...

Common Webhook Events

Stripe Client Pattern

let _stripe: Stripe | null = null;

export function getStripe(): Stripe {
  if (!_stripe) {
    const key = process.env.STRIPE_SECRET_KEY;
    if (!key) throw new Error('STRIPE_SECRET_KEY not configured');
    _stripe = new Stripe(key, {
      apiVersion: '2025-12-15.clover',
      typescript: true
    });
  }
  return _stripe;
}

Idempotency Table Schema

CREATE TABLE stripe_webhook_events (
  id TEXT PRIMARY KEY,           -- Use Stripe event ID directly
  type TEXT NOT NULL,            -- Event type
  data JSONB NOT NULL,           -- Full event payload
  processed_at TIMESTAMPTZ DEFAULT NOW()
);

Webhook Handler Structure

export async function POST(request: NextRequest) {
  const body = await request.text();
  const signature = request.headers.get('stripe-signature');

  // 1. Verify signature
  const event = stripe.webhooks.constructEvent(body, signature, webhookSecret);

  // 2. Check idempotency (BEFORE processing)
  const { data: existing } = await supabase
    .from('stripe_webhook_events')
    .select('id')
    .eq('id', event.id)
    .single();

  if (existing) return NextResponse.json({ duplicate: true });

  // 3. Log event (INSERT before processing)
  await supabase.from('stripe_webhook_events').insert({
    id: event.id,
    type: event.type,
    data: event,
  });

  // 4. Process event
  switch (event.type) {
    case 'checkout.session.completed':
      await handleCheckout(event.data.object);
      break;
    // ... other handlers
  }

  return NextResponse.json({ received: true });
}

</quick_reference>

<integration_notes>

Integration Notes

Works With

• Supabase : Use service role client for webhook handlers (bypasses RLS)
• Prisma : Alternative to Supabase for idempotency table
• Vercel : Add runtime/maxDuration config for webhook routes
• Next.js App Router : Use request.text() for raw body

Related Skills

• supabase-sql-skill - For database migrations
• create-hooks-skill - For post-deployment notifications

GitHub Repository

Private templates and examples available at: github.com/ScientiaCapital/stripe-stack

</integration_notes>

<reference_index>

Reference Files

Template Files

Workflow Files

</reference_index>

Emit Outcome Sidecar

As the final step, write to ~/.claude/skill-analytics/last-outcome-stripe-stack.json:

{"ts":"[UTC ISO8601]","skill":"stripe-stack","version":"1.0.0","variant":"default",
 "status":"[success|partial|error]","runtime_ms":[estimated ms from start],
 "metrics":{"webhooks_configured":[n],"products_created":[n],"checkout_flows_built":[n]},
 "error":null,"session_id":"[YYYY-MM-DD]"}

Use status "partial" if some stages failed but results were produced. Use "error" only if no output was generated.

Weekly Installs

45

Repository

scientiacapital/skills

GitHub Stars

6

First Seen

Jan 23, 2026

Security Audits

Gen Agent Trust HubPassSocketWarnSnykWarn

Installed on

gemini-cli43

codex43

opencode42

claude-code40

github-copilot40

amp39