StripeはSaaS決済の業界標準
Stripeは世界で最も広く使われている決済APIプラットフォームです。個人開発からスタートアップ・大企業まで、オンライン決済・サブスクリプション・マーケットプレイスなど様々な決済ユースケースをAPIで実現できます。
Stripeを選ぶ理由:
・強力なAPIとSDK(Node.js・Python・Go等)
・テスト環境(sandbox)での安全な開発
・不正検出・セキュリティ対応(PCI DSS準拠)を自動化
・Checkout(Stripeホスト型決済フォーム)を使えばカード情報を自社サーバーで扱わなくて済む
・Webhookによるリアルタイムの支払い状況通知
・日本円(JPY)対応・日本の銀行振込にも対応
Stripe + Next.jsのセットアップ
Next.jsへのStripe統合手順を解説します。
パッケージのインストール:
npm install stripe @stripe/stripe-js
環境変数の設定:
STRIPE_SECRET_KEY:Stripeダッシュボードの「API Keys」から取得(サーバー側のみで使用)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY:Stripeダッシュボードから取得(クライアント側で使用)
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準拠の決済フォームを使えます。
Checkout Sessionの作成(Server Action):
①Stripeダッシュボードで商品(Product)と価格(Price)を作成
②Server Actionでcheckout.sessions.createを呼び出し、price_id・success_url・cancel_urlを設定
③作成したSessionのurlにリダイレクト
④ユーザーが決済完了するとsuccess_urlにリダイレクト
注意点:Checkout Sessionは作成後30分で期限切れ。成功・キャンセルのURLには決済成功の確認をしない(Webhookで確認する)。
サブスクリプション機能の実装
月額・年額プランのサブスクリプション決済の実装方法を解説します。
サブスクリプションの基本フロー:
①サブスクリプションプランのPrice(recurring: monthly/yearly)をStripeダッシュボードで作成
②Checkout SessionのmodeをsubscriptionにしてCustomer(顧客ID)を指定
③決済完了後にWebhookでsubscription status(active/past_due/canceled等)を受信
④DBでユーザーのサブスクリプションステータスを更新
⑤サブスクリプションが有効なユーザーのみプレミアム機能にアクセス可能にする
Webhookの実装(最重要)
StripeのWebhookは決済イベントをリアルタイムで受信するために必須です。Webhookを正しく実装しないと、決済成功後のユーザー状態更新・サブスクリプションキャンセルの反映などができません。
Webhook実装のポイント:
①app/api/webhooks/stripe/route.tsにPOSTエンドポイントを作成
②stripe.webhooks.constructEventで署名を検証(STRIPE_WEBHOOK_SECRETを使用)
③event.typeに応じた処理を実装(checkout.session.completed・customer.subscription.updated等)
④べき等性を確保する(同じWebhookを複数回受信した場合も同じ結果になるように)
⑤本番デプロイ後にStripeダッシュボードでWebhookエンドポイントを登録
ローカル開発でのWebhookテスト:Stripe CLIを使ってstripe listen --forward-to localhost:3000/api/webhooks/stripeでローカルにWebhookをトンネリングできます。