---
title: Customer Portal
description: 顧客自助入口，管理訂閱、付款方式與帳單
---

# Customer Portal

Customer Portal 讓顧客自行管理訂閱，減少客服負擔，提升顧客滿意度。

## 功能特點

### 訂閱管理

顧客可以：

- 查看目前訂閱狀態
- 查看下次扣款日期與金額
- 升級或降級方案
- 取消訂閱

### 付款方式

- 查看目前付款方式
- 更新信用卡資訊
- 新增備用付款方式

### 帳單歷史

- 查看所有歷史帳單
- 下載收據 PDF
- 設定發票資料

## 開啟 Portal

有兩種方式讓顧客存取 Portal：

### 方式一：Portal 連結

產生一次性 Portal Session，導向顧客到 Portal：

```typescript
const response = await fetch('https://api.recur.tw/v1/portal/sessions', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer sk_test_xxx',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    customerId: 'cus_xxx',
    returnUrl: 'https://your-site.com/account',
  }),
});

const { url } = await response.json();

// 導向 Portal
window.location.href = url;
```

### 方式二：嵌入式 Portal

使用 SDK 在您的網站內嵌入 Portal：

```html
<script src="https://unpkg.com/recur-tw@latest/dist/recur.umd.js"></script>
<recur-portal
  publishable-key="pk_test_xxx"
  customer-id="cus_xxx"
></recur-portal>
```

## 後台設定

### Portal 功能開關

1. 前往「設定」→「Portal 設定」
2. 選擇開放的功能：
   - 允許取消訂閱
   - 允許方案變更
   - 允許更新付款方式
3. 儲存設定

### 品牌自訂

- 上傳 Logo
- 設定主題色
- 自訂文字內容

## 安全性

- Portal Session 預設 30 分鐘過期
- 每個 Session 只能使用一次
- 支援自訂過期時間

詳細整合教程請參考 [Portal 整合指南](/guides/portal)。