Stripe MCPで商品を作成する
前回の動画でStripe MCPの接続が完了しましたので、これを使って商品作成を行っていきます。
Claude CodeでEscapeキーを押してプロンプトに入り、以下のように指示します。
Stripe MCP Serverを使って、この講座プラットフォームに必要な商品を作成してください。実行すると、商品の作成とPrice IDが発行されますので、それを環境変数に設定していきます。
セキュリティに関する補足
今回はサンドボックス環境なので、実際の値をClaude Codeに読み込ませても問題ありません。本番環境に移行するときは、商品をコピーしてPrice IDをVercelの環境変数に設定する形になります。
Claude Codeに一度でも触れられたSecret Keyは、再発行しておくとより安心です。開発中は実際のお客さんのデータがないためそのまま使用しても問題ありませんが、リリース時には改めて対応が必要です。
商品の確認
Stripeアカウントのダッシュボードを開き、商品カタログを確認すると、19,800円の商品が作成されていることがわかります。
価格設計については、高めに設定しておいて「○%割引」と表示する方法もあります。各自のサービスに合わせて決めてください。
環境変数の設定
Stripeダッシュボードのホーム画面から、以下のキーを取得して.env.localに設定します。
- パブリッシュキー：ホーム画面の「公開キー」をコピーして貼り付けます
- シークレットキー：同様にコピーして貼り付けます
- Webhook Secret：この時点ではまだ設定不要です
テスト購入の実行
環境変数を設定した状態で、実際に商品の購入をテストしてみましょう。
- 「購入する」ボタンから「学習を始める」ボタンを押すと、Stripeのチェックアウト画面に遷移します
- カード番号にはテスト用のカード番号を入力します
テスト用のカード番号は以下の16桁の数字です。
4242 4242 4242 4242日付とCVCは適当な値で大丈夫です。名前も任意の値を入力してください。
「支払う」ボタンを押すと、購入が完了してコース一覧に戻ります。
購入後にコースが閲覧できない理由
購入は完了しましたが、実際にはすべての講座を閲覧することはまだできません。無料プレビュー以外のレッスンには鍵マークが表示されたままです。
これは、商品を購入した際にアクセス権限を付与する紐付け処理がまだ実装されていないためです。
Webhookの必要性
この紐付けにはStripeのWebhookを使用します。Webhookの仕組みは以下の通りです。
- ユーザーがStripeのチェックアウト画面で支払いを完了する
- Stripe側で受け取りが確認されると、成功イベントが発行される
- コールバックURLを通じてアプリケーション側がイベントを受け取る
- アプリケーションがデータベースを更新し、購入済みフラグを立てる
- ユーザーにアクセス権限が付与される
Stripe上では商品が購入されて売り上げは19,800円になっていますが、アクセス権限の付与はまだできていない状態です。次のステップでは、Stripe CLIをインストールしてローカル環境でWebhookの設定を行います。