託管結帳頁面

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

功能特點

品牌自訂

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

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

安全性

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

響應式設計

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

多種付款方式

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

結帳流程

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

後台設定

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

技術整合

建立 Checkout Session

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 驗證結果：

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') {
  // 付款成功
}

詳細整合教程請參考結帳整合指南。

託管結帳頁面

On this page