はじめに
前回の動画でStripeの商品作成が完了しましたので、今回は商品を購入した際にStripeのWebhookが発動してデータベースの内容を更新する仕組みを構築していきます。
StripeのWebhook設定はダッシュボード上の「開発者」→「Webhook」から手動で設定することもできますが、今回はClaude Codeに設定を任せる方法で進めます。
Stripe CLIのインストール
Webhookをローカルで動かすためには、Stripe CLIをインストールする必要があります。
Macの場合
Homebrewが使えるため、以下のコマンドでインストールできます。
brew install stripe/stripe-cli/stripeWindowsの場合
HomebrewはWindowsでは使えないため、GitHubからWindows用のZIPファイルを直接ダウンロードします。
- GitHubのStripe CLIリリースページから
stripe_windows_x86_64.zipをダウンロード - ZIPファイルを解凍
stripe.exeをダブルクリックして実行（「保護されました」という警告が出た場合は「詳細情報」→「実行」を選択）- インストール完了後、エディタ（Cursorなど）を再起動する
再起動後、Claude Codeを立ち上げて「Stripe CLIが入っているか確認して」と聞くことで、正しくインストールされたか確認できます。
Stripe CLIでできること
Stripe CLIは非常に多機能で、以下のようなことが可能です。
- Webhookのローカルテスト
- 商品の作成・管理
- 各種Stripe APIの操作
MCPサーバーを使って商品作成する方法のほか、CLIを使って操作することも可能です。
Webhook設定をClaude Codeに依頼する
Claude Codeに「Webhookのローカルテストをしたいので設定をお願いします」と伝えると、GUI上でWebhookを手動設置せずに、Claude Codeが自動で設定してくれます。
注意: 本番環境に移行する際は、Stripeダッシュボード上で自分でWebhookのセッティングを行う必要があります。
Stripe CLIへのログイン
APIキーの期限が切れている場合は、ログインが必要です。Claude Code上で以下のコマンドを実行します。
! stripe login実行すると自動でStripeダッシュボードが開きます。手順は以下の通りです。
- メールアドレスに送られた認証コードを入力
- ターミナルに表示されるPairing Codeとブラウザ上のコードが一致していることを確認
- 「アクセスを許可」を選択
認証は90日で期限が切れるため、期限切れの際は再度ログインが必要です。
Webhookのロジックを理解する
Ctrl+Pでファイル検索を開き、webhook/stripe/route.tsを確認すると、Webhookのロジックが記述されています。
checkout.session.completedイベント
ファイル内にはcheckout.session.completedというイベントタイプの処理が書かれています。これは「決済が完了した場合」に実行されるIF分岐です。
処理の流れは以下の通りです。
- 商品が購入されて決済が成功する
- データベースの中身を確認する
- ユーザーの役割をプレミアムユーザーに更新する
- カリキュラムの動画コンテンツが閲覧可能になる
Webhook設定は、このcheckout.session.completedイベントを受け取るためのものです。
環境変数の自動設定
.env.localファイルのWebhook Secretも自動で設定されます。テスト環境のため、この段階では漏洩しても問題ありません。
ローカルでのテスト
バックグラウンドでstripe listenが起動しており、localhost:3000のWebhook Stripe APIが稼働している状態でテストを行います。
Tips: ターミナルで↓キーを押してEnterを押すと、バックグラウンドで何が動いているか確認できます。戻るときは←キーで操作できます。
テスト手順
- 管理者ではないユーザーでGoogleログインする
- 「購入する」→「学習を始める」ボタンを押す
- テスト用カード番号
4242 4242 4242 4242を入力 - 適当な有効期限・CVCを入力して支払いボタンを押す
セッションキャッシュの問題と解決
商品購入後、すぐにレッスンが閲覧可能にならない場合があります。これはセッションに古いユーザーロールがキャッシュされていることが原因です。
キャッシュとは
キャッシュとは古いデータを一時的に保持する仕組みです。毎回データベースにアクセスせずに、ブラウザに残っているクッキーから現在のログイン状態を確認できるため、パフォーマンス向上のために利用されています。
解決方法
購入後すぐに最新の情報を反映させるために、以下の対応をClaude Codeに依頼します。
- ユーザーのセッションを無効化する
- キャッシュを無効化する
- 最新のロール（プレミアムユーザー）を即時反映させる
「再ログインしなきゃ反映されないのはアプリケーション的にまずいので、原因を調査してください」とClaude Codeに伝えることで、調査・修正を行ってくれます。
すぐに解決できない場合も、粘り強くClaude Codeに質問して解決するようにしましょう。環境によって出力が異なるため、結果が異なることがあります。
まとめ
今回の作業で、Stripe CLIのインストールからWebhook設定、そして決済完了時のデータベース更新ロジックの確認までを行いました。これにより、商品を購入したユーザーがコンテンツを閲覧できるマネタイズ可能なアプリケーションが完成しました。
次回は、管理者が動画をアップロードする方法と講座のサムネイル設定について、bunny.netを使って実装していきます。