Stripe商品を本番環境にコピーする
前回はStripeを本番環境に移行する方法を解説しました。今回はStripe商品とWebhookの設定が残っているので、これらを終えて本講座の締めくくりとしましょう。
サンドボックス環境で 商品カタログ を開きます。作成済み商品の右にある3本線メニューから 本番環境にコピー ボタンを押します。本番申請が通っていれば、このボタンが押せる状態になっているはずです。これでサンドボックスで作成した商品が本番環境にそのままコピーされます。
本番のPrice IDをVercelに反映
商品が本番環境にコピーされたら、本番側のPrice IDを取得します。Plans Amount(金額)は固定なのでいじる必要はありません(19,800円など)。
- 本番環境で商品の値段をクリック
- 右上の IDをコピー をクリック
- Vercelの環境変数
PRICE_IDを本番用の値に置き換え
Webhookを本番環境で設定する
サンドボックス環境ではローカルでWebhookを設定したので、GUI上でWebhookを設定したことはまだないと思います。本番で決済を動かすにはWebhook設定を手動で行う必要があります。
送信先を追加する
Stripeダッシュボードで 送信先を追加 をクリックします。APIバージョンはデフォルトで大丈夫です。次にイベントの選択が重要です。
必要なイベントをClaude Codeに確認する
必要なイベントが分からない場合はClaude Codeに聞きます。
本番環境でStripeを動かしたいので、Webhookでどのイベントが受信されているのか教えてください。
自分でも探せます。Ctrl + P で stripe/route.ts を開けば、すべてのWebhookイベントが書かれています。今回は買い切り決済なので checkout.session.completed のみでOKです。
サブスクリプションの場合は customer.subscription.updated、customer.subscription.created、customer.subscription.deleted など、さらに多くのイベントが必要になります。
送信先名とエンドポイントURLを設定する
- 送信先名:適当でOK(例:
stripe-webhook) - エンドポイントURL:本番環境のドメイン +
/api/webhooks/stripe
ビデオプラットフォームの本番ドメインを開いてコピーし、末尾に /api/webhooks/stripe を付けて貼り付けます。
署名シークレットを環境変数に設定
送信先を作成すると、右下に 署名シークレット が発行されます。
- シークレットを表示してコピー
- Vercel環境変数で
WEBHOOKを検索 STRIPE_WEBHOOK_SECRETをEditして貼り付け- 更新してリデプロイ
これで本番環境の決済がサンドボックスではなく実際のお金でやり取りされるようになります。
セキュリティに関する注意
StripeのMCPサーバーを本番環境につなぐこともできますが、キーが流出するリスクがあるので、本番環境のWebhook設定や本番キー周りは すべて手動で行うのがおすすめ です。WebhookはMCPでもできないので、自分で設定する必要があります。
まとめ
認証から決済まで導入できれば、皆さん独自のサービスを展開できる状態になります。副業や起業にもつなげられます。Claude Code Academyも同じ手順で構築されています。
Claude Codeを使った開発スキルが身についた今、あとはビジネスアイデアと行動力次第で、すぐに真似た構成のサービスを立ち上げられるはずです。
余談ですが、最近私が作ったサブスクボックスというiOSアプリがバズりまして、ファイナンスカテゴリで1位を取り、収益が30万円近くになりました。Claude Codeで5日ほどで作ったアプリです。今回はWebアプリの講座でしたが、Expoを使えばClaude CodeでスマホアプリもつくれるのでiOSアプリ開発に興味がある方も多いかと思います。本講座のセキュリティ編の後にiOS開発講座も追加予定です。
3時間ほどの長い講座、お疲れさまでした。続いての動画では、このサービスに追加した方が良いサービスをいくつか紹介します。