Stripe Checkoutで決済を組み込む

あなたが作ったアプリで「お金を受け取れる」状態にする回です。自分でゼロからクレジットカード入力画面を作るのは大変ですが、Stripe Checkout（＝Stripeがまるごと用意してくれた決済ページ）を使えば、レストランで注文を取る店員さんのように、支払い処理の面倒な部分は全部Stripe側がやってくれます。あなたのアプリは「このボタンが押されたらStripeの決済ページへご案内してね」とお願いするだけです。

この回のゴールは、ローカル環境（＝あなたのパソコンの中）で「購入ボタンを押す → Stripeの決済ページに飛ぶ → テスト用カードで支払い成功する」ところまでを15分で体験することです。本番公開はしません。

始める前に、以下が手元にあることを確認してください。

• Next.js（＝Reactで作るWebアプリの土台）のプロジェクトが動いている
• ログイン機能（Supabase Auth）が入っていて、自分のメールでログインできる
• APIルート（＝サーバー側の小さな処理を置く場所）を作った経験が一度はある
• Stripeのアカウント（無料でOK。本人確認はテストモードなら不要）

1. Stripeのテスト用APIキーを取得する

Stripeのダッシュボード右上で「テストモード」になっていることを確認し、「開発者 → APIキー」から次の2つをコピーします。

• 公開可能キー（pk_test_ で始まる、お店の看板のように外から見えてよいキー）
• シークレットキー（sk_test_ で始まる、金庫の鍵のように絶対に外に出してはいけないキー）

2. 環境変数ファイルに書く

プロジェクト直下の .env.local に次のように追記します（＝これは秘密の情報を保管する専用のメモ帳のようなもの。Gitには上げません）。

STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

良い例: .env.local に書いて、.gitignore に .env.local が入っていることを確認する。 悪い例: ソースコードに直接 sk_test_xxx を書いてしまう（鍵を玄関に貼り出すのと同じ）。

3. Stripe公式ライブラリを入れる

ターミナルで次の1行を実行します。これは「Stripeと会話するための専用アプリ」をあなたのプロジェクトにインストールするコマンドです。

pnpm add stripe

ここが今回の主役です。決済処理のコードは一文字ミスがあると動かないので、自分で書くよりAIに書いてもらう方が速くて正確です。

4. Claude CodeやCursorに依頼する

エディタ（CursorやClaude Code）のチャット欄に、次のプロンプトをそのまま貼り付けてください。

Next.js App Routerで、Stripe Checkoutの決済セッションを作るAPIルートを app/api/checkout/route.ts に作成してください。

• 商品名「テスト商品」、価格500円、通貨JPY、数量1でセッションを作る
• success_url は http://localhost:3000/success、cancel_url は http://localhost:3000/cancel
• 環境変数 STRIPE_SECRET_KEY を使う
• エラーハンドリングと型を適切に付ける
• 合わせて、app/page.tsx に「購入する」ボタンを置き、押したら上のAPIを呼んでStripeのURLにリダイレクトするコードも書いてください

AIが生成したコードはそのまま鵜呑みにせず、次の3点だけ目視で確認します。

• sk_test_ で始まる鍵が環境変数から読まれているか（コードに直書きされていないか）
• 金額単位が正しいか（JPYは最小単位が円そのものなので unit_amount: 500 で500円）
• リダイレクト先が localhost:3000 になっているか

5. アプリを動かして購入ボタンを押す

開発サーバーを起動するコマンドを1行実行します（＝あなたのパソコンの中にだけ見える練習用サーバーが立ち上がります）。

pnpm dev

ブラウザで http://localhost:3000 を開き、「購入する」ボタンを押します。Stripeの決済ページに飛んだら成功です。

6. テスト用カードで支払いを完了させる

決済ページで次のテスト用カード番号を入力します。本物のカード番号は絶対に使わないでください。

• カード番号: 4242 4242 4242 4242
• 有効期限: 未来の任意の月年（例: 12 / 30）
• セキュリティコード: 任意の3桁（例: 123）

「支払う」を押して success ページに戻ってきたら成功です。

7. Stripe側でも確認する

Stripeダッシュボードの「支払い」画面を開き、今の取引が一覧に出ていることを確認します。ここにログが残れば、あなたのアプリとStripeが正しく会話できた証拠です。

完了判定: (a) 決済ページへ遷移する、(b) テストカードで支払い成功する、(c) Stripeダッシュボードに取引が記録される — この3つが揃えばクリアです。

• ボタンを押しても何も起きない: ブラウザの開発者ツール（F12）のConsoleタブを開き、赤い文字のエラーをそのままAIに貼り付けて「このエラーを直して」と聞くのが最速です。
• Invalid API Key と出る: .env.local を編集したら pnpm dev を一度止めて再起動する必要があります（＝環境変数は起動時にしか読まれません）。
• 金額が100倍ずれる: JPY以外の通貨（USDなど）は最小単位がセントです。JPYのみ unit_amount がそのまま円になる特殊仕様です。
• 決済ページの日本語がおかしい: locale: 'ja' をセッション作成時のオプションに足すようAIに追加依頼してください。
• success_url に戻らない: http:// と https:// の取り違えが多いです。ローカルは http://localhost:3000 です。

この回では「ローカルで決済が通る」までをゴールにしました。本番公開（本物のカードで受け取れる状態）にするにはStripeの本人確認（アカウント有効化）とWebhook（＝決済成功の通知を自動で受け取る仕組み）の設定が別途必要です。これらは別のAtomで扱います。