# 自訂樣式範例 (/guides/examples/custom-styling)
自訂樣式範例 [#自訂樣式範例]
學習如何客製化 Recur SDK 結帳元件的外觀，使其與你的品牌風格一致。
目前 SDK 支援透過 Web Component 的 `button-style` 屬性進行基本樣式設定。更進階的主題客製化功能即將推出。
Web Component 樣式 [#web-component-樣式]
內建按鈕樣式 [#內建按鈕樣式]
`` Web Component 提供三種預設按鈕樣式：
```html
立即訂閱
立即訂閱
立即訂閱
```
自訂按鈕外觀 [#自訂按鈕外觀]
使用 CSS 覆寫 Web Component 的樣式：
```css
/* 自訂按鈕樣式 */
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 模式樣式 [#modaliframe-模式樣式]
使用 JavaScript SDK 開啟的 Modal 和 Iframe 模式目前使用 Recur 的預設樣式。
```javascript
const recur = RecurCheckout.init({
publishableKey: 'pk_test_xxx',
});
// Modal 模式
await recur.checkout({
productId: 'prod_xxx', // 產品 ID（或使用 productSlug）
customerEmail: 'user@example.com', // 選填：預填 Email
mode: 'modal',
onPaymentComplete: (result) => {
console.log('付款完成:', result);
},
});
// Iframe 模式 - 可透過容器樣式控制外觀
await recur.checkout({
productId: 'prod_xxx', // 產品 ID（或使用 productSlug）
customerEmail: 'user@example.com', // 選填：預填 Email
mode: 'iframe',
container: '#payment-container',
onPaymentComplete: (result) => {
console.log('付款完成:', result);
},
});
```
容器樣式 [#容器樣式]
對於 Iframe 模式，你可以透過 CSS 控制容器的外觀：
```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);
}
```
品牌一致性建議 [#品牌一致性建議]
顏色選擇 [#顏色選擇]
選擇與品牌一致的顏色：
```css
: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);
}
```
字體設定 [#字體設定]
確保字體與網站一致：
```css
recur-checkout {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
recur-checkout::part(button) {
font-family: inherit;
font-size: 16px;
font-weight: 600;
}
```
深色模式支援 [#深色模式支援]
```css
/* 預設（淺色模式） */
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;
}
}
```
響應式設計 [#響應式設計]
確保按鈕在各種螢幕尺寸下都能正常顯示：
```css
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;
}
}
```
完整範例 [#完整範例]
```html
訂閱方案
```
最佳實踐 [#最佳實踐]
**一致性**：確保結帳元件的樣式與你的主網站一致，提升使用者信任感。
**對比度**：確保文字和背景有足夠的對比度，符合 WCAG 無障礙標準。
**測試**：在不同裝置和瀏覽器上測試樣式，確保良好的使用者體驗。
下一步 [#下一步]
* [基本結帳範例](/guides/examples/basic-checkout) - 查看基本整合範例
* [Webhook 通知](/guides/webhooks) - 設定即時付款通知
* [API 參考](/api) - 查看完整的 API 文件