# 託管結帳頁面 (/features/customer-experience/checkout)



託管結帳頁面 [#託管結帳頁面]

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 [#建立-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)。