ECPay 付款畫面 CSS 設定描述說明
提供 ECPay 嵌入式付款畫面的 CSS 設定描述，協助開發者自訂付款方式的外觀，包括信用卡、銀聯卡、ATM、超商代碼和超商條碼等。CSS 類別設計旨在確保視覺一致性、行動端適配，並避免與 ECPay 內部樣式衝突。
適用場景
付款方式選擇：用戶選擇付款方式（例如信用卡、ATM）的界面。
輸入表單：信用卡號、有效期限、安全碼、分期期數等輸入欄位。
提示訊息：錯誤提示（如「卡號格式錯誤」）和注意事項（如繳費期限）。
選項列表：分期期數、銀行選擇或超商選項。
設計原則
使用以 #ECPayPayment 為前綴的選擇器，確保樣式僅影響付款畫面。
避免 !important 和與 ECPay 內部類別相同的名稱。
採用相對單位（如 rem、vw）和媒體查詢，確保行動端兼容性。
確保錯誤訊息顯眼，符合可訪問性要求（例如文字對比度）。
CSS 參數列表
以下是可自訂的 CSS 參數，適用於 ECPay 付款畫面中的元素。請勿使用與 ECPay 內部樣式相同的選擇器，以免樣式覆蓋。
| 類別名稱 | 用途 | 適用元素 | 樣式建議 |
|---|---|---|---|
ecpay-pay-list-wrap |
用來包裝單個付款方式的整體區域，例如「信用卡」或「ATM轉帳」 |
<div> |
設定背景色、邊距或圓角，讓區塊看起來更美觀 |
ecpay-pay-list |
選項列表（如分期期數、銀行、超商） | <ul>、<div> 或其他子容器 |
使用flex或grid佈局，讓選項排列整齊 |
ecpay-pl-act |
標示當前選中的付款方式 |
<div> |
加上邊框或背景色，讓選中的區塊更顯眼 |
ecpay-pl-intro |
付款方式的標題（如「信用卡付款 (一次付清)」） | <h2>、<div> |
調整字體大小、粗細或間距，讓標題清晰 |
ecpay-pl-content |
包裝輸入欄位和選項的內容區塊 | <div> |
設定內邊距和邊框，讓內容區域整潔 |
ecpay-card-info-tab |
用於信用卡相關的表單內容 |
<div> |
控制標籤頁的顯示或隱藏，確保切換順暢 |
ecpay-select-input ecpay-cit-item ecpay-col-a-100 |
單一輸入欄位或下拉選單（如信用卡號、銀行選擇） | <input>、<select> |
|
ecpay-cit-item-box |
包裝多個並列輸入欄位（如有效期限和安全碼） | <div> |
使用flex佈局，讓欄位排列整齊 |
類別用途詳解
ecpay-pay-list-wrap：
付款方式區塊容器，負責整體佈局和背景樣式。
適用於信用卡、ATM、超商代碼等區塊，確保視覺分隔。
ecpay-pay-list：
用於選項列表，例如分期期數（3 期、6 期）、銀行選擇（台灣銀行、國泰世華）或超商選項（7-11、全家）。
支援水平或垂直排列，適合響應式設計。
ecpay-pl-act：
標示用戶當前選中的付款方式，例如點擊「信用卡付款」時高亮。
與 ecpay-pay-list-wrap 區別在於動態交互，通常透過 JavaScript 添加。
ecpay-pl-intro：
用於標題，如「請選擇付款方式」或「信用卡付款 (分期)」。
確保標題顯眼且與內容區分。
ecpay-pl-content：
包裝輸入欄位、選項和提示訊息，適用於所有付款方式的內容區域。
提供一致的內邊距和邊框樣式。
ecpay-card-info-tab：
專為信用卡區塊設計，若有多個子區塊（如「一次付清」和「分期」）以標籤頁形式呈現。
若無標籤頁結構，可作為信用卡內容的子容器。
ecpay-select-input ecpay-cit-item ecpay-col-a-100：
應用於單一輸入欄位（如信用卡號）或下拉選單（如分期期數）。
ecpay-cit-item 表示單個輸入項，ecpay-col-a-100 確保全寬佈局。
ecpay-cit-item-box：
包裝並列輸入欄位，如「有效期限」和「安全碼」，確保視覺對齊。
支援行動端堆疊顯示。
CSS 範例實現
/* 頂層容器 */
#ECPayPayment .ecpay-pay-list-wrap {
background-color: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
/* 選項列表 */
#ECPayPayment .ecpay-pay-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}
#ECPayPayment .ecpay-pay-list span {
padding: 8px 12px;
background-color: #e9ecef;
border-radius: 4px;
cursor: pointer;
}
#ECPayPayment .ecpay-pay-list span:hover {
background-color: #007bff;
color: white;
}
/* 活躍付款方式 */
#ECPayPayment .ecpay-pl-act {
border: 2px solid #007bff;
background-color: #e9f0ff;
}
/* 標題 */
#ECPayPayment .ecpay-pl-intro {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
/* 內容區塊 */
#ECPayPayment .ecpay-pl-content {
padding: 15px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}
/* 信用卡標籤頁（若適用） */
#ECPayPayment .ecpay-card-info-tab {
display: block;
}
#ECPayPayment .ecpay-card-info-tab.hidden {
display: none;
}
/* 單輸入欄位 */
#ECPayPayment .ecpay-select-input.ecpay-cit-item.ecpay-col-a-100 {
width: 100%;
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
/* 並列輸入欄位 */
#ECPayPayment .ecpay-cit-item-box {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
#ECPayPayment .ecpay-cit-item-box .ecpay-cit-item {
flex: 1;
min-width: 150px;
}
/* 行動端適配 */
@media (max-width: 768px) {
#ECPayPayment .ecpay-pay-list {
flex-direction: column;
}
#ECPayPayment .ecpay-cit-item-box {
flex-direction: column;
}
#ECPayPayment .ecpay-cit-item-box .ecpay-cit-item {
min-width: 100%;
}
}