# Customer Portal (/features/customer-experience/portal)



Customer Portal [#customer-portal]

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

功能特點 [#功能特點]

訂閱管理 [#訂閱管理]

顧客可以：

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

付款方式 [#付款方式]

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

帳單歷史 [#帳單歷史]

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

開啟 Portal [#開啟-portal]

有兩種方式讓顧客存取 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 [#方式二嵌入式-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 功能開關 [#portal-功能開關]

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

品牌自訂 [#品牌自訂]

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

安全性 [#安全性]

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

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