支付表单

支付表单通常是完成购买之前的最后一步。为了最大限度地提高转化率，请确保您的支付表单用户友好且安全。

确保用户知道要填写什么

尽可能简化您的支付表单，仅显示必填字段。

指明支付金额。提交按钮非常适合此目的。

<button>Pay $300.00</button>

为您的 <label> 元素使用不言自明的措辞。例如，使用“安全码”，而不是像“CVV”这样的首字母缩写词，后者仅被某些品牌使用。

帮助用户输入他们的支付详细信息

为了最大限度地提高转化率，请确保用户可以尽快填写您的支付表单。

对卡号和安全码字段使用 inputmode="numeric"，以显示针对输入数字优化的屏幕键盘。

为您的支付表单控件添加适当的 autocomplete 值，以确保浏览器提供自动填充。对姓名使用 autocomplete="cc-name"，对卡号使用 autocomplete="cc-number"，对有效期使用 autocomplete="cc-exp"。

确保用户以正确的格式输入数据

为每个 <input> 使用 required 属性，以确保用户填写完整的表单。

支付卡安全码可以是三位或四位数字。使用 minlength="3" 和 maxlength="4" 仅允许三位和四位数字。

确保用户仅为卡号和安全码输入数字。使用 pattern="[0-9 ]+" 允许用户在输入卡号时包含空格，因为这就是数字在实体卡上显示的方式。

资源