Supabase + Stripe Webhook で会員ステータスを自動更新する — Next.js App Router 実装

// app/api/webhooks/stripe/route.ts
import { getStripe } from "@/lib/stripe";
import { createClient } from "@supabase/supabase-js";
import { headers } from "next/headers";
import { NextResponse } from "next/server";
import type Stripe from "stripe";
 
export const dynamic = "force-dynamic";
 
function createServiceClient() {
  return createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_SERVICE_ROLE_KEY!
  );
}
 
export async function POST(request: Request) {
  const stripe = getStripe();
  const body = await request.text();
  const headersList = await headers();
  const signature = headersList.get("stripe-signature");
 
  if (!signature) {
    return NextResponse.json({ error: "Missing signature" }, { status: 400 });
  }
 
  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch {
    return NextResponse.json({ error: "Invalid signature" }, { status: 400 });
  }
 
  const supabase = createServiceClient();
 
  switch (event.type) {
    case "checkout.session.completed": {
      const session = event.data.object as Stripe.Checkout.Session;
      const userId = session.metadata?.user_id;
      const planId = session.metadata?.plan_id;
 
      if (!userId || !planId) break;
 
      const sub = session.subscription
        ? await stripe.subscriptions.retrieve(session.subscription as string)
        : null;
 
      // current_period_start/end は v20 では SubscriptionItem に移動
      const firstItem = sub?.items?.data[0];
 
      await supabase.from("memberships").upsert(
        {
          user_id: userId,
          plan_id: planId,
          status: "active",
          stripe_subscription_id: sub?.id ?? null,
          stripe_customer_id: session.customer as string ?? null,
          current_period_start: firstItem
            ? new Date(firstItem.current_period_start * 1000).toISOString()
            : null,
          current_period_end: firstItem
            ? new Date(firstItem.current_period_end * 1000).toISOString()
            : null,
          updated_at: new Date().toISOString(),
        },
        { onConflict: "user_id,plan_id" }
      );
 
      await supabase.from("event_logs").insert({
        user_id: userId,
        event_name: "payment_complete",
        props: { plan_id: planId },
      });
      break;
    }
 
    case "invoice.payment_failed": {
      const invoice = event.data.object as Stripe.Invoice;
      // v20: subscription は parent.subscription_details.subscription に移動
      const subscriptionId =
        invoice.parent?.type === "subscription_details"
          ? (invoice.parent.subscription_details?.subscription as string | null)
          : null;
      if (!subscriptionId) break;
 
      await supabase
        .from("memberships")
        .update({ status: "past_due", updated_at: new Date().toISOString() })
        .eq("stripe_subscription_id", subscriptionId);
      break;
    }
 
    case "customer.subscription.deleted": {
      const sub = event.data.object as Stripe.Subscription;
 
      await supabase
        .from("memberships")
        .update({ status: "canceled", updated_at: new Date().toISOString() })
        .eq("stripe_subscription_id", sub.id);
      break;
    }
 
    default:
      break;
  }
 
  return NextResponse.json({ received: true });
}

const body = await request.text();

event = stripe.webhooks.constructEvent(
  body,
  signature,
  process.env.STRIPE_WEBHOOK_SECRET!
);

// v19 以前: sub.current_period_start で直接取得できた
// v20 以降: SubscriptionItem（firstItem）に移動
const firstItem = sub?.items?.data[0];
 
current_period_start: firstItem
  ? new Date(firstItem.current_period_start * 1000).toISOString()
  : null,

{ onConflict: "user_id,plan_id" }

const subscriptionId =
  invoice.parent?.type === "subscription_details"
    ? (invoice.parent.subscription_details?.subscription as string | null)
    : null;

# Stripe CLI のインストール（macOS）
brew install stripe/stripe-cli/stripe
 
# Stripe にログイン
stripe login
 
# ローカルのエンドポイントに転送する
stripe listen --forward-to localhost:3000/api/webhooks/stripe

# テストイベントを発火
stripe trigger checkout.session.completed

// proxy.ts（middleware）の matcher から除外することが必要
matcher: [
  "/((?!_next/static|_next/image|favicon.ico|api/webhooks).*)",
],