第一章：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 頁面中，你會看到兩把最重要的鑰匙：

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，產生一個極具質感的結帳頁面！