Stripe × Next.js 決済導入ガイド2026 — 個人開発で売上を立てるまでの全手順

個人開発でも決済は簡単に導入できる

「個人開発で課金機能を付けるのは難しそう…」と思っていませんか？Stripeを使えば、1日で決済機能を実装できます。

この記事でわかること:

• Stripeアカウント開設から初期設定まで
• Next.jsでCheckout Sessionを作成する方法
• Webhookで購入を自動処理する方法
• テスト→本番切り替えの注意点

全体の流れ

ユーザーが「購入」ボタンをクリック
  → Next.js APIでStripe Checkout Session作成
  → Stripeの決済ページにリダイレクト
  → 決済完了
  → Webhook でNext.js APIに通知
  → Supabase DBに購入記録を保存
  → ユーザーに成功画面を表示

ステップ1：Stripeアカウント設定

1. stripe.com でアカウント作成
2. ダッシュボードで本番利用の審査を申請（1〜2日で承認）
3. 「商品」から販売する商品を作成
4. APIキーを取得

# .env.local
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

ステップ2：Checkout Session作成

APIルートの実装

// app/api/checkout/route.ts
import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(request: Request) {
  const { priceId, userId } = await request.json()

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    payment_method_types: ['card'],
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_APP_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/`,
    metadata: { userId },
  })

  return Response.json({ url: session.url })
}

フロントエンドの購入ボタン

// components/BuyButton.tsx
'use client'

export function BuyButton({ priceId }: { priceId: string }) {
  const handleClick = async () => {
    const res = await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ priceId }),
    })
    const { url } = await res.json()
    window.location.href = url
  }

  return <button onClick={handleClick}>購入する</button>
}

ステップ3：Webhookで購入を処理

決済完了後、Stripeからサーバーに通知が届きます。これを処理して購入記録を保存します。

// app/api/webhooks/stripe/route.ts
import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(request: Request) {
  const body = await request.text()
  const sig = request.headers.get('stripe-signature')!

  let event: Stripe.Event
  try {
    event = stripe.webhooks.constructEvent(
      body, sig, process.env.STRIPE_WEBHOOK_SECRET!
    )
  } catch {
    return new Response('Webhook Error', { status: 400 })
  }

  if (event.type === 'checkout.session.completed') {
    const session = event.data.object as Stripe.Checkout.Session

    // Supabaseに購入記録を保存
    // await supabase.from('purchases').insert({
    //   user_id: session.metadata?.userId,
    //   stripe_session_id: session.id,
    // })
  }

  return new Response('OK')
}

重要： Webhookのエンドポイントは必ず署名検証を行ってください。これを省略すると、偽のリクエストで不正な購入記録が作れてしまいます。

ステップ4：テストと本番切り替え

テスト用カード番号

カード番号	結果
4242 4242 4242 4242	成功
4000 0000 0000 0002	拒否
4000 0000 0000 3220	3Dセキュア必要

本番切り替えチェックリスト

• Stripeダッシュボードで本番モードに切り替え
• .env のAPIキーを本番用に変更（sk_live_...）
• Webhookエンドポイントを本番URLに設定
• テスト購入を1件実行して動作確認
• 特定商取引法に基づく表記ページを用意

料金体系

項目	コスト
初期費用	¥0
月額固定費	¥0
決済手数料	3.6%（国内カード）

¥9,800の商品が1件売れた場合：手数料 ¥353、手取り ¥9,447

よくあるハマりポイント

Webhookがローカルで動かない

StripeのWebhookはインターネット経由でサーバーに届きます。ローカル開発では Stripe CLI を使います。

stripe listen --forward-to localhost:3000/api/webhooks/stripe

日本円の扱い

Stripeでは日本円は「最小通貨単位 = 1円」です。$1 = 100centsのようなゼロ付けは不要です。

// ¥9,800の商品
{ unit_amount: 9800, currency: 'jpy' }

まとめ

ステップ	内容	所要時間
アカウント設定	Stripe登録・商品作成	30分
Checkout実装	APIルート + ボタン	1時間
Webhook実装	購入処理の自動化	1時間
テスト・本番切替	動作確認・表記準備	30分

Stripeの決済実装は、恐れるほど難しくありません。まずはテストモードで試してみてください。

---