返回快速上手
Replit 整合指南
使用 Replit AI 和 MCP 快速建立訂閱制網站
推薦：使用 MCP 自動整合
MCP (Model Context Protocol) 讓 Replit AI 可以直接操作 Recur API， 自動幫你建立 API Key、訂閱方案和整合程式碼。
1
安裝 MCP 擴充套件
讓 Replit AI 可以直接幫你整合 Recur 付款功能
點擊上方「Add to Replit」按鈕，一鍵將 Recur MCP Server 加入你的 Replit 專案。 這讓 Replit AI 助手可以自動幫你建立 API Key、方案和整合程式碼。
安裝後，在 Replit AI 對話中輸入：「幫我整合 Recur 訂閱付款」
2
建立專案結構
讓 AI 幫你建立完整的 SaaS 落地頁面
在 Replit AI 對話框中輸入以下提示：
Create a React + Vite subscription SaaS landing page with:
- Hero section with headline and CTA
- Features section (3-4 feature cards)
- Pricing section with 3 subscription plans
- Footer with links
Use Tailwind CSS for styling. Create placeholder subscribe buttons for now.3
設定環境變數
在 Replit Secrets 中安全存放 API Key
在 Replit 左側面板中找到「Secrets」，新增以下環境變數：
VITE_RECUR_PUBLISHABLE_KEY你的 Publishable Key💡 提示：如果你還沒有 API Key，讓 AI 助手幫你建立： 「幫我建立一個 sandbox publishable key」
4
整合付款功能
AI 會自動幫你完成 SDK 整合
告訴 Replit AI：
Integrate Recur subscription payments into this app.
Use the recur-tw SDK with my publishable key from environment variables.
Create a SubscribeButton component that opens a payment modal.
Use test card 4147-6310-0000-0001 (VISA) for testing.AI 會自動安裝 SDK、設定 Provider、建立訂閱按鈕組件。
💡 小提示
- 使用 Replit Secrets 存放 API Key，避免洩漏到程式碼中
- Vite 環境變數需使用
VITE_前綴才能在前端存取 - 免費方案有休眠機制，正式環境建議使用付費方案
- 善用 Replit AI 來除錯和優化程式碼