---
title: 託管結帳頁面
description: 安全、專業的結帳體驗，支援品牌自訂與多種付款方式
---

# 託管結帳頁面

Recur 提供安全、專業的託管結帳頁面，讓您無需自行處理付款表單，專注於產品開發。

## 功能特點

### 品牌自訂

打造符合品牌形象的結帳體驗：

- **Logo** - 上傳品牌 Logo
- **主題色** - 自訂按鈕與強調色
- **成功頁面** - 自訂付款成功後的導向

### 安全性

- SSL/TLS 加密傳輸
- PCI DSS 合規
- 3D 驗證支援

### 響應式設計

- 桌面、平板、手機完美適配
- 觸控友善的介面
- 快速載入

### 多種付款方式

- 信用卡 / 金融卡
- 超商代碼
- ATM 轉帳
- LINE Pay（規劃中）

## 結帳流程

```
1. 顧客點擊購買按鈕
2. 您的伺服器建立 Checkout Session
3. 顧客被導向 Recur 結帳頁面
4. 顧客完成付款
5. 顧客被導回您設定的成功頁面
6. Webhook 通知您付款結果
```

## 後台設定

1. 前往「設定」→「結帳設定」
2. 上傳品牌 Logo
3. 設定主題色彩
4. 儲存設定

## 技術整合

### 建立 Checkout Session

```typescript
const response = await fetch('https://api.recur.tw/v1/checkout/sessions', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer sk_test_xxx',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    productId: 'prod_xxx',
    mode: 'SUBSCRIPTION', // 或 'PAYMENT'
    successUrl: 'https://your-site.com/success?session_id={CHECKOUT_SESSION_ID}',
    cancelUrl: 'https://your-site.com/cancel',
    customerEmail: 'customer@example.com', // 可選，預填 email
  }),
});

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

// 導向結帳頁面
window.location.href = url;
```

### 驗證付款結果

付款完成後，使用 Session ID 驗證結果：

```typescript
const response = await fetch(`https://api.recur.tw/v1/checkout/sessions/${sessionId}`, {
  headers: {
    'Authorization': 'Bearer sk_test_xxx',
  },
});

const session = await response.json();

if (session.status === 'COMPLETE') {
  // 付款成功
}
```

詳細整合教程請參考 [結帳整合指南](/guides/checkout/hosted-checkout)。