StripeはSaaS決済の業界標準
Stripeは世界で最も広く使われている決済APIプラットフォームです。個人開発からスタートアップ・大企業まで、オンライン決済・サブスクリプション・マーケットプレイスなど様々な決済ユースケースをAPIで実現できます。
| Stripe を選ぶ理由 | 内容 |
|---|---|
| API/SDK | Node.js・Python・Go・Ruby など主要言語に公式SDK |
| テスト環境 | sandbox で安全に検証可能 |
| セキュリティ | PCI DSS 準拠の不正検出を自動化 |
| Checkout | カード情報を自社サーバーで扱わない（責任範囲縮小） |
| Webhook | 支払い状況をリアルタイムで通知 |
| 日本対応 | JPY対応・銀行振込もサポート |
Stripe + Next.jsのセットアップ
Next.jsへのStripe統合手順を解説します。
パッケージのインストール：
npm install stripe @stripe/stripe-js
| 環境変数 | 用途 | 取扱い |
|---|---|---|
| STRIPE_SECRET_KEY | サーバから Stripe API を呼ぶ秘密鍵 | サーバ側のみ |
| NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY | クライアントから Checkout を呼ぶ公開鍵 | クライアント可 |
| STRIPE_WEBHOOK_SECRET | Webhook の署名検証用 | サーバ側のみ |
Stripeクライアントの設定：
サーバー側：import Stripe from 'stripe'; const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
クライアント側：import { loadStripe } from '@stripe/stripe-js'; const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);
Stripe Checkoutで決済フォームを実装
Stripe Checkoutは最も簡単に決済フローを実装できる方法です。StripeがホストするPCI DSS準拠の決済フォームを使えます。
| Step | 処理 |
|---|---|
| 1 | Stripe ダッシュボードで Product / Price を作成 |
| 2 | Server Action で checkout.sessions.create を呼び price_id / success_url / cancel_url を指定 |
| 3 | 作成された Session.url にリダイレクト |
| 4 | 決済完了で success_url にリダイレクト（成功判定は Webhook で確定） |
注意点：Checkout Sessionは作成後30分で期限切れ。成功・キャンセルのURLには決済成功の確認をしない（Webhookで確認する）。
サブスクリプション機能の実装
月額・年額プランのサブスクリプション決済の実装方法を解説します。
| Step | 処理 |
|---|---|
| 1 | Stripe で recurring (monthly/yearly) の Price を作成 |
| 2 | Checkout Session の mode を subscription にし Customer を指定 |
| 3 | Webhook で subscription status (active/past_due/canceled 等) を受信 |
| 4 | DB でユーザーのサブスクリプションステータスを更新 |
| 5 | 有効ユーザーのみプレミアム機能を解放 |
Webhookの実装（最重要）
StripeのWebhookは決済イベントをリアルタイムで受信するために必須です。Webhookを正しく実装しないと、決済成功後のユーザー状態更新・サブスクリプションキャンセルの反映などができません。
| Step | 処理 |
|---|---|
| 1 | app/api/webhooks/stripe/route.ts に POST エンドポイント作成 |
| 2 | stripe.webhooks.constructEvent で署名検証（STRIPE_WEBHOOK_SECRET 使用） |
| 3 | event.type に応じて分岐（checkout.session.completed / customer.subscription.updated 等） |
| 4 | べき等性を確保（同じ Webhook を複数回受信しても結果が同じになる設計） |
| 5 | 本番デプロイ後に Stripe ダッシュボードで Webhook エンドポイントを登録 |
ローカル開発でのWebhookテスト：Stripe CLIを使ってstripe listen --forward-to localhost:3000/api/webhooks/stripeでローカルにWebhookをトンネリングできます。
