付款表單

付款表單通常是完成購買前的最後一個步驟。 為了盡可能爭取轉換,請務必使用容易理解且安全的付款表單。

確保使用者知道要填寫哪些資訊

付款表單越簡單越好 目前僅顯示必填欄位。

指明付款金額。 「提交」按鈕正十分理想。

<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 ]+",使用者就能在輸入卡號時加入空格。 因為這是數字在實體卡片上的顯示方式

資源