ECPay 綁卡畫面 CSS 樣式說明
介紹如何使用 CSS 自訂 ECPay 嵌入式綁卡畫面的外觀，讓綁卡頁面與您的網站風格一致。您可以調整輸入框、文字和背景等元素的樣式，但需遵守 ECPay 的限制，以避免與內部樣式衝突。
什麼是 ECPay 綁卡畫面？
ECPay 綁卡畫面是一個嵌入您網站的表單，供用戶輸入支付資訊（如信用卡號）。您需要：
在網頁中加入 <div id=”ECPayPayment”></div>。
載入 ECPay JavaScript SDK。
應用自訂 CSS 調整外觀。
CSS 應用流程
初始化 SDK：載入 ECPay SDK 並設定付款參數。
嵌入 Div：將付款畫面渲染到指定的 <div>。
套用 CSS：使用本指南的 CSS 參數自訂樣式
CSS 參數列表
以下是可自訂的 CSS 參數，適用於 ECPay 付款畫面中的元素。請勿使用與 ECPay 內部樣式相同的選擇器，以免樣式覆蓋。
 Class |
說明 |
|---|---|
|
ecpay-select-input ecpay-col-a-100 |
用於設定表單輸入區塊（包含標籤和輸入框）的通用樣式，寬度為 100% |
|
ecpay-select-input ecpay-col-d-50 |
用於設定表單輸入區塊（包含標籤和輸入框）的通用樣式，寬度為 50% |
|
ecpay-icon-ic |
用於信用卡分期期數標籤樣式 |
|
ecpay-icon-ic_credit |
用於信用卡號標籤的樣式，包含信用卡圖示 |
|
ecpay-icon-ic_daterange |
用於信用卡有效期限標籤的樣式，包含日曆圖示 |
|
ecpay-Installment |
用於分期期數下拉選單設定樣式 |
|
ecpay-cc-card |
用於信用卡號輸入框的樣式 |
|
ecpay-date |
用於信用卡有效期限輸入框的樣式 |
|
ecpay-cc-cvc |
用於信用卡安全碼輸入框的樣式 |
注意事項：
所有選擇器必須以 #ECPayPayment 開頭，確保樣式僅影響付款畫面。
避免使用 !important，以免覆蓋 ECPay 預設樣式。
行動端建議使用相對單位（如 rem 或 vw），確保響應式顯示。