框架整合指南

選擇你的框架

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

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'
});

適用於：

建立 Customer Portal 連結
查詢/管理訂閱
處理 Webhook
任何需要驗證的 API 操作

安全提醒：Secret Key 只能在伺服器端使用。如果你的框架是純前端（如靜態網站），需要自行建立後端 API 來處理敏感操作。

下一步

選擇你使用的框架，閱讀完整的整合指南：

選擇你的框架

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

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'
});

適用於：

建立 Customer Portal 連結
查詢/管理訂閱
處理 Webhook
任何需要驗證的 API 操作

安全提醒：Secret Key 只能在伺服器端使用。如果你的框架是純前端（如靜態網站），需要自行建立後端 API 來處理敏感操作。

下一步

選擇你使用的框架，閱讀完整的整合指南：

框架整合指南

選擇你的框架

Vanilla JS

Next.js

Astro

功能支援比較

安裝方式

兩種 SDK

Client SDK（前端）

Server SDK（後端）

下一步

On this page

框架整合指南

選擇你的框架

Vanilla JS

Next.js

Astro

功能支援比較

安裝方式

兩種 SDK

Client SDK（前端）

Server SDK（後端）

下一步

On this page