Bolt.new 整合指南

使用 Bolt.new 快速建立訂閱制網站

開始使用 Bolt.new

Bolt.new 提供即時預覽，讓你快速迭代設計和功能。

建立專案

使用 Bolt.new 快速生成 React 應用

在 Bolt.new 中輸入以下提示：

Create a React subscription SaaS landing page with:

1. Hero section with headline "打造你的訂閱制事業" and CTA button
2. Features section with 3 feature cards
3. Pricing section with 3 plans:
   - 基本版 NT$299/月
   - 專業版 NT$799/月 (recommended)
   - 企業版 NT$1,999/月
4. FAQ section
5. Footer

Use Tailwind CSS and modern design.
Add placeholder subscribe buttons.

安裝 Recur SDK

使用終端機安裝依賴

在 Bolt.new 的終端機中執行：

npm install recur-tw

設定環境變數

新增 API Key 到專案設定

建立 .env 檔案：

VITE_RECUR_PUBLISHABLE_KEY=pk_test_your_key_here

💡 在 Recur 控制台取得 API Key

整合付款功能

讓 AI 幫你完成 SDK 整合

輸入以下提示讓 Bolt AI 完成整合：

Integrate Recur subscription payments:

1. Update main.tsx to wrap app with RecurProvider:
```tsx
import { RecurProvider } from 'recur-tw'

<RecurProvider config={{
  publishableKey: import.meta.env.VITE_RECUR_PUBLISHABLE_KEY,
  checkoutMode: 'modal',
}}>
  <App />
</RecurProvider>
```

2. Create SubscribeButton component:
```tsx
import { useRecur } from 'recur-tw'

function SubscribeButton({ planId, children }) {
  const { checkout, isCheckingOut } = useRecur()

  return (
    <button
      onClick={() => checkout({ planId })}
      disabled={isCheckingOut}
    >
      {isCheckingOut ? '處理中...' : children}
    </button>
  )
}
```

3. Replace pricing buttons with SubscribeButton

💡 Bolt.new 小提示

善用即時預覽功能快速迭代設計
使用具體描述獲得更精確的 AI 生成結果
可以隨時修改程式碼並看到即時效果
完成後可一鍵部署到 Netlify 或 Vercel

查看完整文件試試 MCP 自動整合

Bolt.new 整合指南

準備好開始收款了嗎？