框架整合指南

選擇你的框架

根據你的專案技術棧，選擇適合的整合指南：

Vanilla JS

純 JavaScript，無框架依賴。適合靜態網站、WordPress、或任何環境。

Next.js

React 全端框架。支援 App Router、Server Actions、Route Handlers。

Astro

內容優先的現代框架。支援 Islands Architecture、SSR、API Routes。

功能支援比較

功能	Vanilla JS	Next.js	Astro
Hosted Checkout	✅	✅	✅
Embedded Checkout (Modal)	✅	✅	✅
Customer Portal	✅	✅	✅
Webhook 處理	需後端	✅ Route Handlers	✅ API Endpoints
Server-Side Portal Link	需後端	✅ Server Actions	✅ SSR/Hybrid
查詢訂閱狀態	需後端	✅	✅

安裝方式

所有框架都使用相同的 npm 套件：

npm install recur-tw

或透過 CDN（適用於 Vanilla JS）：

<script src="https://unpkg.com/recur-tw@latest/dist/recur.umd.js"></script>

兩種 SDK

Recur 提供兩種 SDK，根據你的使用情境選擇：

Client SDK（前端）

使用 Publishable Key（pk_test_ 或 pk_live_ 開頭），可安全暴露在前端：

import Recur from 'recur-tw';

const recur = Recur.init({
  publishableKey: 'pk_test_xxx'
});

// 開啟結帳
await recur.checkout({ ... });

適用於：

開啟結帳流程
顯示方案列表
前端互動功能

Server SDK（後端）

使用 Secret Key（sk_test_ 或 sk_live_ 開頭），絕對不可暴露在前端：

import { Recur } from 'recur-tw/server';

const recur = new Recur({
  secretKey: process.env.RECUR_SECRET_KEY
});

// 建立 Portal Session
const session = await recur.portal.sessions.create({
  customerId: 'cus_xxx',
  returnUrl: 'https://yoursite.com/account'
});