Stripe CLIでのローカルテスト方法

Page content

Stripe CLIでのローカルテスト方法

1. Webhookリスナーの起動

stripe listen --forward-to localhost:4321/api/webhook

実行すると以下のようなWebhook署名シークレットが表示されます：

> Ready! Your webhook signing secret is whsec_xxxxxxxxxxxxxxxxxx (^C to quit)

このwhsec_...を.envファイルに追加してください：

STRIPE_SECRET_KEY=sk_test_xxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxx

2. Checkoutセッション作成エンドポイント

src/pages/api/checkout.ts

import type { APIRoute } from "astro";
import Stripe from "stripe";

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

export const POST: APIRoute = async ({ request }) => {
  const { priceId } = await request.json();

  const session = await stripe.checkout.sessions.create({
    mode: "subscription",
    payment_method_types: ["card"],
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: "http://localhost:4321/success",
    cancel_url: "http://localhost:4321/cancel",
  });

  return new Response(JSON.stringify({ url: session.url }), { status: 200 });
};

3. Webhookエンドポイント

src/pages/api/webhook.ts

import type { APIRoute } from "astro";
import Stripe from "stripe";

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

export const POST: APIRoute = async ({ request }) => {
  const body = await request.text();
  const sig = request.headers.get("stripe-signature")!;

  let event;
  try {
    event = stripe.webhooks.constructEvent(
      body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    return new Response(`Webhook Error: ${err}`, { status: 400 });
  }

  // イベント処理
  switch (event.type) {
    case "checkout.session.completed":
      const session = event.data.object;
      // サブスクリプション開始処理（DBへの保存など）
      console.log("サブスクリプション開始:", session.customer);
      break;

    case "customer.subscription.deleted":
      // サブスクリプション解約処理
      console.log("サブスクリプション解約");
      break;
  }

  return new Response(JSON.stringify({ received: true }), { status: 200 });
};

4. テストの流れ

ターミナルを2つ用意します：

ターミナル①（Astro起動）

npm run dev

ターミナル②（Stripe CLIリスナー）

stripe listen --forward-to localhost:4321/api/webhook

5. テストイベントの送信

別のターミナルでStripeのテストイベントを手動送信できます：

# 決済完了イベントをシミュレート
stripe trigger checkout.session.completed

# サブスクリプション解約をシミュレート
stripe trigger customer.subscription.deleted

6. フロントエンドからCheckoutへ遷移

const handleSubscribe = async () => {
  const res = await fetch("/api/checkout", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ priceId: "price_xxxxxxxxxx" }), // StripeダッシュボードのPrice ID
  });

  const { url } = await res.json();
  window.location.href = url; // Stripeの決済ページへリダイレクト
};

テスト用カード番号

カード番号	用途
`4242 4242 4242 4242`	成功
`4000 0000 0000 9995`	残高不足
`4000 0025 0000 3155`	3Dセキュア認証

有効期限は未来の日付、CVCは任意の3桁でOKです。