開發者指南Examples
自訂樣式範例
客製化結帳頁面的外觀以符合品牌風格
自訂樣式範例
學習如何客製化 Recur SDK 結帳元件的外觀，使其與你的品牌風格一致。
目前 SDK 支援透過 Web Component 的 button-style 屬性進行基本樣式設定。更進階的主題客製化功能即將推出。
Web Component 樣式
內建按鈕樣式
<recur-checkout> Web Component 提供三種預設按鈕樣式：
<!-- Primary 樣式（預設） -->
<recur-checkout
publishable-key="pk_test_xxx"
product-id="prod_xxx"
success-url="/success"
cancel-url="/cancel"
customer-email="user@example.com"
button-style="primary">
立即訂閱
</recur-checkout>
<!-- Outline 樣式 -->
<recur-checkout
publishable-key="pk_test_xxx"
product-id="prod_xxx"
success-url="/success"
cancel-url="/cancel"
customer-email="user@example.com"
button-style="outline">
立即訂閱
</recur-checkout>
<!-- Gradient 樣式 -->
<recur-checkout
publishable-key="pk_test_xxx"
product-id="prod_xxx"
success-url="/success"
cancel-url="/cancel"
customer-email="user@example.com"
button-style="gradient">
立即訂閱
</recur-checkout>自訂按鈕外觀
使用 CSS 覆寫 Web Component 的樣式：
/* 自訂按鈕樣式 */
recur-checkout::part(button) {
background-color: #6366f1;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
transition: background-color 0.2s;
}
recur-checkout::part(button):hover {
background-color: #4f46e5;
}
recur-checkout::part(button):disabled {
opacity: 0.5;
cursor: not-allowed;
}Modal/Iframe 模式樣式
使用 JavaScript SDK 開啟的 Modal 和 Iframe 模式目前使用 Recur 的預設樣式。
const recur = RecurCheckout.init({
publishableKey: 'pk_test_xxx',
});
// Modal 模式
await recur.checkout({
productId: 'prod_xxx', // 產品 ID（或使用 productSlug）
customerEmail: 'user@example.com', // 必填
mode: 'modal',
onPaymentComplete: (result) => {
console.log('付款完成:', result);
},
});
// Iframe 模式 - 可透過容器樣式控制外觀
await recur.checkout({
productId: 'prod_xxx', // 產品 ID（或使用 productSlug）
customerEmail: 'user@example.com', // 必填
mode: 'iframe',
container: '#payment-container',
onPaymentComplete: (result) => {
console.log('付款完成:', result);
},
});容器樣式
對於 Iframe 模式，你可以透過 CSS 控制容器的外觀：
#payment-container {
/* 容器樣式 */
max-width: 400px;
margin: 0 auto;
padding: 24px;
background-color: #f9fafb;
border-radius: 12px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}品牌一致性建議
顏色選擇
選擇與品牌一致的顏色：
:root {
/* 定義品牌色彩 */
--brand-primary: #6366f1;
--brand-primary-hover: #4f46e5;
--brand-text: #1f2937;
--brand-background: #ffffff;
}
/* 套用到 Web Component */
recur-checkout::part(button) {
background-color: var(--brand-primary);
}
recur-checkout::part(button):hover {
background-color: var(--brand-primary-hover);
}字體設定
確保字體與網站一致：
recur-checkout {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
recur-checkout::part(button) {
font-family: inherit;
font-size: 16px;
font-weight: 600;
}深色模式支援
/* 預設（淺色模式） */
recur-checkout::part(button) {
background-color: #6366f1;
color: white;
}
/* 深色模式 */
@media (prefers-color-scheme: dark) {
recur-checkout::part(button) {
background-color: #818cf8;
color: #1f2937;
}
#payment-container {
background-color: #1f2937;
color: #f9fafb;
}
}響應式設計
確保按鈕在各種螢幕尺寸下都能正常顯示：
recur-checkout::part(button) {
width: 100%;
padding: 16px 24px;
font-size: 16px;
}
@media (min-width: 768px) {
recur-checkout::part(button) {
width: auto;
min-width: 200px;
}
}完整範例
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>訂閱方案</title>
<style>
:root {
--brand-primary: #6366f1;
--brand-primary-hover: #4f46e5;
}
.pricing-card {
max-width: 400px;
margin: 0 auto;
padding: 32px;
background: white;
border-radius: 16px;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
text-align: center;
}
.pricing-card h2 {
margin: 0 0 8px;
font-size: 24px;
}
.price {
font-size: 48px;
font-weight: 700;
color: var(--brand-primary);
}
.price span {
font-size: 16px;
color: #6b7280;
}
recur-checkout::part(button) {
width: 100%;
padding: 16px 24px;
background: var(--brand-primary);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
}
recur-checkout::part(button):hover {
background: var(--brand-primary-hover);
}
</style>
</head>
<body>
<div class="pricing-card">
<h2>專業方案</h2>
<div class="price">NT$ 999<span>/月</span></div>
<ul style="text-align: left; margin: 24px 0;">
<li>無限制使用</li>
<li>優先客服支援</li>
<li>進階分析報告</li>
</ul>
<recur-checkout
publishable-key="pk_test_xxx"
product-id="prod_xxx"
success-url="/success"
cancel-url="/cancel"
customer-email="user@example.com"
button-style="primary">
立即訂閱
</recur-checkout>
</div>
<script src="https://unpkg.com/recur-tw@latest/dist/recur.umd.js"></script>
</body>
</html>最佳實踐
一致性：確保結帳元件的樣式與你的主網站一致，提升使用者信任感。
對比度：確保文字和背景有足夠的對比度，符合 WCAG 無障礙標準。
測試：在不同裝置和瀏覽器上測試樣式，確保良好的使用者體驗。
下一步
- 基本結帳範例 - 查看基本整合範例
- Webhook 通知 - 設定即時付款通知
- API 參考 - 查看完整的 API 文件