stripe-handler
Stripeを使った決済処理や、通常のプラン・クレジット以外での柔軟なチェックアウト、Webhook連携などをスムーズに行い、多様なビジネスニーズに対応できる決済システムを構築・運用するSkill。
📜 元の英語説明(参考)
Handle Stripe payments, custom checkouts, and webhook fulfillment outside of standard plans/credits.
🇯🇵 日本人クリエイター向け解説
Stripeを使った決済処理や、通常のプラン・クレジット以外での柔軟なチェックアウト、Webhook連携などをスムーズに行い、多様なビジネスニーズに対応できる決済システムを構築・運用するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o stripe-handler.zip https://jpskill.com/download/16917.zip && unzip -o stripe-handler.zip && rm stripe-handler.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16917.zip -OutFile "$d\stripe-handler.zip"; Expand-Archive "$d\stripe-handler.zip" -DestinationPath $d -Force; ri "$d\stripe-handler.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
stripe-handler.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
stripe-handlerフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Stripe ハンドラー
このスキルは、Stripe を使用して支払いロジックを実装する必要がある場合に使用します。特に、標準的な SaaS サブスクリプションプランや標準的なクレジットパッケージ(それぞれ plans-handler および credits-handler で処理されます)ではないユースケースで使用します。
どのような時に使うか
- 「1 回限りの製品を購入」フローの実装(例:コース、デジタルグッズ)。
- カスタムの「サービス」支払いの作成。
- カスタムメタデータの
checkout.session.completedの処理。 - 標準的でないイベントのための
src/app/api/webhooks/stripe/route.tsのカスタマイズ。 - 重い webhook 処理をバックグラウンドタスクにオフロード(Inngest 経由)。
プロセス
1. 支払いタイプの特定
コードを書く前に、支払いの性質を決定します。
- サブスクリプションプランですか? ->
plans-handlerを使用します。 - クレジットパッケージですか? ->
credits-handlerを使用します。 - カスタムの 1 回限りまたは定期的な製品ですか? -> このスキルを続行します。
2. チェックアウトセッションの作成 (API/Action)
Stripe チェックアウトセッションを作成するためのサーバーサイドのエンドポイントが必要です。
- ファイル: 新しいルート(例:
src/app/api/app/orders/create/route.ts)またはサーバーアクションを作成します。 - インポート:
import stripe from "@/lib/stripe"; - メタデータ: 重要。webhook で購入タイプを識別するために、常に
metadataをセッションにアタッチします。metadata: { type: "my_custom_feature", userId: user.id, customId: "..." } - URL: 標準の成功/エラーページ、または必要に応じてカスタムのものを使用します。
- 成功:
${process.env.NEXT_PUBLIC_APP_URL}/app/subscribe/success?session_id={CHECKOUT_SESSION_ID} - エラー:
${process.env.NEXT_PUBLIC_APP_URL}/app/subscribe/error
- 成功:
3. Webhook フルフィルメントの処理
すべての Stripe イベントは src/app/api/webhooks/stripe/route.ts に送られます。
- ファイル:
src/app/api/webhooks/stripe/route.ts - 場所:
onCheckoutSessionCompleted(1 回限り) またはhandleOutsidePlanManagementProductInvoicePaid(請求書)。 - 実装:
- イベントオブジェクトから
metadataを抽出します。 metadata.typeがカスタム機能と一致するかどうかを確認します。- 一致する場合: フルフィルメントロジックを実行します。
- 単純なロジック: DB を直接更新します。
- 重いロジック: Inngest イベントをディスパッチして、バックグラウンドで処理します。
- 一致しない場合: 関数が標準のプラン/クレジット処理にフォールスルーするようにします。
- イベントオブジェクトから
4. バックグラウンド処理 (Inngest)
本番環境に推奨: フルフィルメントロジックに複数の DB 呼び出し、外部 API が含まれる場合、またはタイムアウトする可能性がある場合(Stripe は 3 秒未満で応答を期待します)。
inngest-handlerを使用して新しい関数を作成します。- webhook で、イベントをディスパッチするだけです。
await inngest.send({ name: "app/payment.custom_succeeded", data: { sessionId: object.id, metadata } }); src/inngest/functions/...で実際のロジックを処理します。
5. データベースの更新
- 購入がリソースへのアクセスを許可する場合、対応するスキーマ(例:
orders、courses)を更新します。 - フルフィルメントがべき等であることを確認します(重複する webhook イベントを適切に処理します)。
6. フロントエンドの統合
- 単純なボタンまたはフォームを使用して、API/Action を呼び出します。
- ユーザーを返された
url(Stripe Checkout) にリダイレクトします。
ベストプラクティス
- べき等性: Webhook は複数回トリガーされる可能性があります。ロジックで注文がすでに完了しているかどうかを確認してください。
- メタデータ: よりクリーンなロジック分離のために、製品 ID だけでなくメタデータに依存してください。
- タイムアウト: Stripe webhook は迅速に応答する必要があります。2 秒以上かかるものには Inngest を使用してください。
- テスト:
stripe listenを使用して、webhook をローカルでテストします。
リファレンス
セッションの作成、webhook の処理、および Inngest の使用に関するコードスニペットについては、reference.md を参照してください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Stripe Handler
Use this skill when you need to implement payment logic using Stripe, specifically for use cases that are NOT standard SaaS subscription plans or standard Credit packages (which are handled by plans-handler and credits-handler respectively).
When to use
- Implementing "Buy One-time Product" flows (e.g., Courses, Digital Goods).
- Creating custom "Service" payments.
- Handling
checkout.session.completedfor custom metadata. - Customizing
src/app/api/webhooks/stripe/route.tsfor non-standard events. - Offloading heavy webhook processing to background tasks (via Inngest).
Process
1. Identify Payment Type
Before writing code, determine the nature of the payment:
- Is it a Subscription Plan? -> Use
plans-handler. - Is it a Credit Package? -> Use
credits-handler. - Is it a Custom One-time or Recurring Product? -> Continue with this skill.
2. Create Checkout Session (API/Action)
You need a server-side endpoint to create the Stripe Checkout Session.
- File: Create a new route (e.g.,
src/app/api/app/orders/create/route.ts) or Server Action. - Import:
import stripe from "@/lib/stripe"; - Metadata: CRITICAL. Always attach
metadatato the session to identify the purchase type in the webhook.metadata: { type: "my_custom_feature", userId: user.id, customId: "..." } - URLs: Use the standard success/error pages or custom ones if needed.
- Success:
${process.env.NEXT_PUBLIC_APP_URL}/app/subscribe/success?session_id={CHECKOUT_SESSION_ID} - Error:
${process.env.NEXT_PUBLIC_APP_URL}/app/subscribe/error
- Success:
3. Handle Webhook Fulfillment
All Stripe events go to src/app/api/webhooks/stripe/route.ts.
- File:
src/app/api/webhooks/stripe/route.ts - Locate:
onCheckoutSessionCompleted(for one-time) orhandleOutsidePlanManagementProductInvoicePaid(for invoices). - Implement:
- Extract
metadatafrom the event object. - Check if
metadata.typematches your custom feature. - If yes: Run your fulfillment logic.
- Simple Logic: Update DB directly.
- Heavy Logic: Dispatch an Inngest event to handle it in the background.
- If no: Let the function fall through to standard plan/credit handling.
- Extract
4. Background Processing (Inngest)
Recommended for production: If your fulfillment logic involves multiple DB calls, external APIs, or could timeout (Stripe expects a response in < 3s):
- Use
inngest-handlerto create a new function. - In the webhook, just dispatch the event:
await inngest.send({ name: "app/payment.custom_succeeded", data: { sessionId: object.id, metadata } }); - Handle the actual logic in
src/inngest/functions/....
5. Database Updates
- If the purchase grants access to a resource, update the corresponding schema (e.g.,
orders,courses). - Ensure the fulfillment is idempotent (handle duplicate webhook events gracefully).
6. Frontend Integration
- Use a simple Button or Form to call your API/Action.
- Redirect the user to the returned
url(Stripe Checkout).
Best Practices
- Idempotency: Webhooks can fire multiple times. Ensure your logic checks if the order is already fulfilled.
- Metadata: Rely on metadata, not just product IDs, for cleaner logic separation.
- Timeouts: Stripe webhooks must respond quickly. Use Inngest for anything taking > 2 seconds.
- Testing: Use
stripe listento test webhooks locally.
Reference
See reference.md for code snippets on creating sessions, handling webhooks, and using Inngest.