付款表單

付款方式通常是完成購買交易的最後一個步驟。 如要盡量爭取轉換,請確保您的付款表單容易使用且安全無虞。

確保使用者知道應填入哪些資訊

填寫付款表單時,請儘量簡化,只列出必填欄位

表示付款金額。 在這種情況下,最適合使用「提交」按鈕。

<button>Pay $300.00</button>  

<label> 元素使用簡明的用語。 舉例來說,請選用「安全碼」,而非只供部分品牌使用的「CVV」縮寫,

協助使用者輸入付款資料

為盡量爭取轉換,請確保使用者能盡快填寫付款方式。

使用 inputmode="numeric" 做為卡號和安全碼欄位,在輸入數字時顯示最佳化的螢幕小鍵盤。

為付款方式控制項新增適當的 autocomplete 值,確保瀏覽器提供自動填入功能。 使用 autocomplete="cc-name" 做為名稱,使用 autocomplete="cc-number" 做為卡號,使用 autocomplete="cc-exp" 做為到期日。

確保使用者以正確的格式輸入資料

為每個 <input> 使用 required 屬性,確保使用者能填寫表單。

付款卡安全碼可為 3 或 4 位數。 使用 minlength="3"maxlength="4" 僅可包含三和四位數。

確保使用者只輸入卡號和安全碼。 使用 pattern="[0-9 ]+" 即可讓使用者在輸入卡號時加上空格,因為這是實體卡片上顯示的數字。

資源