📓Tech Study Work
ランキング
業界ガイド
就活ガイド
就活診断
比較・コラム
診断を始める
📓Tech Study Work

500社以上の就職偏差値ランキングと16タイプ性格診断で、自分に合う業界・企業を見つけるキャリアメディアです。

メインコンテンツ

  • 就職偏差値ランキング
  • 16タイプ就活診断
  • 業界ガイド一覧
  • 就活ガイド一覧
  • 2 社サイドバイサイド比較
  • 偏差値の算定方法

業界ガイド

  • IT・テック
  • コンサル
  • 金融・証券
  • 商社
  • メーカー・重工
  • スタートアップ

就活ガイド

  • 自己分析
  • ES 書き方
  • 面接対策
  • 業界研究
  • OB 訪問
  • インターン

サイト情報

  • Tech Study Workについて
  • 著者・編集部について
  • お問い合わせ
  • プライバシーポリシー
  • 免責事項

© 2026 Tech Study Work. All rights reserved.

プライバシー免責事項お問い合わせ
  1. ホーム
  2. 実践記事
  3. Stripeで決済機能実装ガイド|Next.jsでサブスクリプション機能を作る方法
実践記事

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

2025年3月18日
約4分で読めます
Tech Study Work編集部
Stripe決済サブスクリプションNext.jsSaaS開発

この記事でわかること

  • 1テスト環境でのカード番号はどれを使えばいいですか?
  • 2決済後のメール通知はStripeが自動で行いますか?
  • 3Stripe Elementsを使う場合とCheckoutを使う場合の違いは?
Stripeで決済機能実装ガイド|Next.jsでサブスクリプション機能を作る方法

目次

  1. 01StripeはSaaS決済の業界標準
  2. 02Stripe + Next.jsのセットアップ
  3. 03Stripe Checkoutで決済フォームを実装
  4. 04サブスクリプション機能の実装
  5. 05Webhookの実装(最重要)

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

関連する比較記事

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

AIコーディングツール比較

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

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

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

よくある質問

この記事をシェアする

X (Twitter)Facebook

この記事について

掲載情報は各サービスの公式ウェブサイト・プレスリリース等を参照し、公開時点の情報をもとに作成しています。

料金・サービス仕様は予告なく変更される場合があります。最新情報は必ず公式サイトでご確認ください。

比較・ランキング記事は広告費・アフィリエイト報酬の有無に関わらず、編集部独自の評価基準で作成しています。 詳細は免責事項・プライバシーポリシーをご確認ください。

最終更新: 2025年3月18日

執筆者

Tech Study Work編集部

開発担当

Web系スタートアップでの開発経験5年以上。Next.js・TypeScript・AWS・AIツールを日常的に使用し、実務視点での技術解説・ツール比較を担当。

詳細プロフィールを見る →

関連記事

SaaS MVP構築完全ガイド|個人エンジニアが3ヶ月で収益化する方法

実践記事2025年4月5日

Next.js認証実装完全ガイド|NextAuth.js・JWTで安全な認証システムを構築

実践記事2025年3月21日

Next.js App Router完全ガイド|最新機能でモダンWebアプリを構築する方法

実践記事2025年3月8日

🏆 関連ランキング

AIツールランキング

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

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

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