第一章：Stripe 基本アーキテクチャと開発環境の設定

国際的なSaaS製品を構築できるエンジニアになるためには、まずStripeの設計哲学を深く理解する必要があります。台湾でよく見られる緑界や藍新などの従来の決済システムが「注文」を中心としているのに対し、Stripeは**「オブジェクトモデル (Object Model)」**を核心としています。

Stripeの世界では、すべてがオブジェクトです：Customer（顧客）、Product（商品）、Price（価格）、PaymentIntent（支払い意図）、Subscription（サブスクリプション）。この章では、これらの基本概念を確立し、開発環境の設定を完了させます。

🛠️ 1. Stripeアカウントの登録と有効化

  1. Stripe公式サイト にアクセスしてアカウントを登録します。
  2. 登録直後は Test Mode (テストモード) になっています。Dashboardの右上にオレンジ色の「Test mode」タグが表示されていることを確認してください。
  3. すぐにLive Mode (本番モード) に切り替えないでください。開発とテスト段階では、すべてのAPI呼び出しやクレジットカード決済をテストモードで行います。Stripeのテスト環境は非常に強力で、さまざまな極端な状況（例：クレジットカード残高不足、カード期限切れ、国際発行会社による拒否など）をシミュレートできます。

🔑 2. APIキーのセキュリティ境界を理解する

Stripe Dashboardの Developers > API keys ページでは、最も重要な2つのキーを確認できます：

Publishable Key (pk_test_... で始まる)

  • 位置付け：このキーは公開可能です。
  • 用途：主にフロントエンド (Client-side) で使用され、Stripe.jsの読み込み、Apple Payボタンのレンダリング、クレジットカード番号の「トークン化 (Tokenization)」などに利用されます。
  • セキュリティ：このキーがハッカーに知られても問題ありません。支払い意図を開始するだけ��、実際の引き落とし、返金、顧客データの照会はできません。
  • 環境変数設定：Next.jsでは、通常 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY として設定します。

Secret Key (sk_test_... で始まる)

  • 位置付け：このキーは絶対に機密です！
  • 用途：バックエンドサーバー (Server-side) のみに保存します。Stripeアカウントの全権限を持ち、引き落とし、返金、顧客作成、すべての決済レポートの閲覧が可能です。
  • セキュリティ：漏洩すると、ハッカーが自由に返金や悪意のある引き落としを実行できます。絶対にフロントエンドのコードに記述しないでください！
  • 環境変数設定：Next.jsでは、STRIPE_SECRET_KEY として設定します（NEXT_PUBLIC_ は付けません）。

🚨 セキュリティ警告：誤って Secret Key をGitHubに公開してしまうと、Stripeのセキュリティシステムが通常数秒以内に検知し、自動的にキーを無効化して警告メールを送信します。ただし、.env.local に厳重に保管する習慣を必ず身につけてください！

📦 3. Product (商品) と Price (価格) の作成

Stripeでは、「商品」と「価格」は別々のオブジェクトです。 なぜこのような設計になっているのでしょうか？SaaS製品（例：Proプラン）には以下のような価格が存在する可能性があるためです：

  • 月額10ドルの価格 (Monthly Price)
  • 年額100ドルの価格 (Yearly Price)
  • 欧州市場向けのユーロ建て価格

実践：Dashboardで商品を作成

  1. Dashboardのサイドバーから Product Catalog をクリックします。
  2. Add Product をクリックします。
  3. Name: Vibe Tutor Pro (グローバルパス) と入力します。
  4. Description: すべての高度なコースと無制限のソースコードダウンロードをアンロックします。
  5. Pricing セクション：
    • Pricing model: Standard pricing を選択します。
    • Price: 29.99 と入力します。
    • Currency: USD - US Dollar を選択します（ドルで稼ぎましょう！）。
    • Billing period: Monthly を選択します（これにより定期課金のRecurring価格になります）。
  6. 保存後、商品詳細ページに Price ID が表示されます。通常 price_1PqX9a2eZvKYlo2... のような形式です。 このPrice IDをコピーしてください。次の章でプログラミングする際に使用します！

👨‍💻 4. プロジェクト環境の構築

Next.jsプロジェクトでは、Stripeの公式SDKをインストールする必要があります。

# StripeバックエンドSDKのインストール
npm install stripe

# StripeフロントエンドSDKのインストール（カスタムチェックアウトページが必要な場合）
npm install @stripe/stripe-js

次に、.env.local ファイルに先ほど取得したキーを追加します：

# Stripe Keys (Test Mode)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxxxx
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxx

# 後ほど説明するWebhook署名シークレット
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxx

✅ 本章のまとめ

すべての基本設定が完了しました！これで、国際的な決済を受け付けるアカウント、安全なキー管理の概念、月額自動引き落としのドル建て商品 (Price ID) が準備できました。

次の章では、実際のコーディングに入り、Next.jsでStripe APIを呼び出して高品質なチェックアウトページを生成する方法を学びます！

More Stripe Examples

Subscription Flow

price = stripe.Price.create(product=prod.id, unit_amount=999, currency="usd", recurring={"interval": "monthly"})
sub = stripe.Subscription.create(customer=cus.id, items=[{"price": price.id}])

Webhook Security

  • Verify signature with stripe.Webhook.construct_event()
  • Process events asynchronously
  • Return 200 quickly, do heavy work in background
  • Idempotency keys to prevent duplicate processing

会員限定無料チュートリアル

このチャプターは登録会員限定の無料コンテンツです！ログインまたは登録してすぐにロックを解除してください。

今すぐログイン / 登録