実践記事

Stripeで決済機能実装ガイド|Next.jsでサブスクリプション機能を作る方法

4分で読めます
Tech Study Work編集部
Stripe決済サブスクリプションNext.jsSaaS開発
Stripeで決済機能実装ガイド|Next.jsでサブスクリプション機能を作る方法

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!);

この記事を読んでいるあなたへ

具体的なサービス選びで迷っているなら、編集部が厳選した比較記事もご参考ください。

AIツールを比較する →

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をトンネリングできます。

関連する比較記事

この記事に関連するサービス比較をチェック

SaaS・個人開発で役立つノーコードツールを比較しよう

Stripe決済を含むSaaS開発をさらに効率化するツールを比較して、最速でサービスを収益化しましょう。

ノーコードツールを比較する

よくある質問

この記事をシェアする