adding-stripe

Stripe 決済を追加する

ユーザーが決済、請求、サブスクリプション、または Stripe の統合を追加したい場合に、このスキルを使用します。

手順

1. SDK をインストールする

   npm install stripe @stripe/stripe-js
   

2. 環境変数を追加する

   STRIPE_SECRET_KEY=sk_test_...
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
   STRIPE_WEBHOOK_SECRET=whsec_...
   

3. Stripe クライアントモジュールを作成する — lib/stripe.ts を作成します。

   import Stripe from "stripe";
   
   export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
     apiVersion: "2024-12-18.acacia",
   });
   

4. チェックアウト API ルートを作成する — Stripe Checkout セッションを作成するエンドポイントを作成します。

   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!);
   

5. Webhook ハンドラーを作成する — /api/webhooks/stripe に POST エンドポイントを作成します。

   • stripe.webhooks.constructEvent を使用して Webhook 署名を検証します。
   • 主要なイベントを処理します：checkout.session.completed、customer.subscription.updated、customer.subscription.deleted、invoice.payment_failed。
   • サブスクリプションのステータスでデータベースを更新します。

6. カスタマーポータルを追加する（任意） — ユーザーがサブスクリプションを管理できるよう、stripe.billingPortal.sessions.create にリダイレクトするエンドポイントを作成します。

7. 料金ページの UI を追加する — 料金プランのカードを配置し、チェックアウト API ルートを呼び出す料金ページを作成します。

注意事項

• Webhook の署名は必ず検証してください。未検証のペイロードを信頼してはいけません。
• ローカルで Webhook をテストするには、Stripe CLI（stripe listen --forward-to localhost:3000/api/webhooks/stripe）を使用してください。
• 顧客が重複して作成されないよう、Stripe の顧客 ID をユーザーデータベースに保存してください。
• 価格をハードコードするのではなく、stripe.prices.list を使って動的に取得してください。