上級編約40分
上級① Stripeで決済をつける
テストモードで安全に練習。あなたのサービスが“お金を受け取れる”ようになる
上級編へようこそ。ここからの6回で、あなたのサービスを“事業として続けられるプロダクト”に仕上げます。第一歩は決済——オンライン決済の世界標準 Stripe（ストライプ） をmy-appにつなぎます。
今日のゴール
テストモード（本物のお金が動かない練習場）で、テスト用カードでの支払いが通り、Stripeのダッシュボードに記録が並ぶこと。お金が絡む実装こそ、練習場で何度でも失敗してから本番へ——が鉄則です。
STEP1：Stripeに登録して“練習場”を確認する
- stripe.com でアカウント作成（メール＋パスワード）。
- ダッシュボードが開いたら、画面の表示が「テストモード」になっていることを確認（サンドボックス／テスト環境の表示。ここでの決済はすべて偽物のお金）。
- 本番でお金を受け取るには事業者情報の登録が必要ですが、それは⑥までに。今日はテストモードだけで完結します。
STEP2：商品を作る（サブスクと買い切り）
売り方は大きく2つ。違いを押さえて、ダッシュボードの「商品カタログ」→「商品を追加」でまず1つ作ってみましょう（例：プレミアムプラン 月500円）。
| 売り方 | 仕組み | 向いているもの |
|---|---|---|
| サブスクリプション | 毎月／毎年、自動で課金 | 講座・会員制・継続サービス |
| 買い切り | 1回払って終わり | テンプレ・電子書籍・単発講座 |
商品には価格（Price）が紐づき、それぞれにIDが発行されます。あとでコードから「この価格のものを売って」と指定するのに使います。
STEP3：2種類の鍵を控える——もう見分けられるはず
ダッシュボードの「開発者」→「APIキー」に、2種類の鍵があります。中級で身につけた「漏れたら困るか？」で等級を判定してみてください。
- 公開可能キー（pk_test_…）
- ブラウザに置く前提の鍵。これだけでは支払いを完了できない。→ NEXT_PUBLIC_ でOK。
- シークレットキー（sk_test_…）
- 請求や返金など全部できる鍵。→ NEXT_PUBLIC_ 厳禁、サーバー専用。
- Vercelの環境変数に NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY ＝ pk_test_… を追加。
- STRIPE_SECRET_KEY ＝ sk_test_… を追加（NEXT_PUBLICなし！）→ Redeploy。
STEP4：購入ページをAIに実装してもらう
決済画面そのものはStripeが用意してくれるページ（Checkout）に任せるのが定石。カード情報はあなたのサーバーを一切通らないので、安全性も実装量も段違いです。
アプリに「プレミアムにアップグレード」の購入導線を作って。条件：①stripe パッケージを使う ②/upgrade ページに商品説明と購入ボタン ③ボタンを押したらサーバー側（Route Handler）で Stripe Checkout のセッションを作って、Stripeの決済ページへリダイレクト ④価格IDは環境変数 STRIPE_PRICE_ID から読む ⑤決済後に戻ってくる /upgrade/success と /upgrade/cancel ページも作る ⑥STRIPE_SECRET_KEY はサーバー側のコードでだけ使う。ログインしている人だけ購入ボタンを押せるように。まず計画を見せて。Stripeのダッシュボードで作った価格のID（price_…）をコピーして、環境変数 STRIPE_PRICE_ID に追加→Redeploy。
STEP5：魔法の番号でテスト決済する
テストモードにはテスト専用カード番号があります。本物のカードは絶対に使いません。
- カード番号
- 4242 4242 4242 4242（テストモード専用の魔法の番号）
- 有効期限／CVC
- 未来の日付なら何でも／3桁なら何でも（例：12/34・123）
- 公開URLの /upgrade から購入ボタン→Stripeの決済ページへ飛ぶ。
- テストカードで支払う→ /upgrade/success に戻ってくる。
- Stripeダッシュボードの「支払い」に500円の記録が並んでいたら——おめでとうございます、あなたのサービスは“売れる”ようになりました（まだ偽のお金ですが、仕組みは本物です）。
お金まわりの三大ルール
①sk_（シークレットキー）はサーバー専用・チャットにも貼らない ②本番モード切替は、法務ページ（③）と動作確認が済んでから ③金額や価格IDは必ずサーバー側で決める（ブラウザから金額を送らせると改ざんされます）。
おさらい：今日使った“言葉”
- テストモード
- 偽のお金で何度でも練習できる場。テストカード 4242…。
- 商品と価格（Price）
- 売り物の登録。サブスクか買い切りかは価格に設定。
- Checkout
- Stripeが用意する決済ページ。カード情報を預からずに済む定石。
- pk_ と sk_
- 公開可能キーとシークレットキー。NEXT_PUBLICの判断、完璧でしたか？
上級①・完成チェック
0 / 4つまずいたら
①決済ページに飛ばない→Vercelのログのエラーをそのまま AIへ。だいたい鍵か価格IDの設定漏れ。②「No such price」→テストモードの価格IDか確認（本番とテストでIDが別）。③successに戻らない→リダイレクトURLが公開URLになっているか確認。
お疲れさまでした！
支払いは通りました。でも今はまだ「払った人」と「アプリの会員」が繋がっていません。次回②で決済とアカウントを接続して、払った人だけにプレミアム画面を出す——このプレミアム講座とまったく同じ仕組みを作ります。