Payment forms
Improve conversion rates by building better payment forms.
The payment form is often the last step before completing a purchase. To maximize conversions, ensure your payment form is user-friendly and secure.
Ensure users know what to fill in #
Keep your payment form as simple as possible, showing only required fields.
Indicate the payment amount. The Submit button is ideal for that.
<button>Pay $300.00</button>
Use self-explanatory wordings for your <label>
elements. For example, use 'Security code', instead of an acronym like 'CVV' that's only used by some brands.
Help users enter their payment details #
To maximize conversions, ensure users can fill out your payment form as quickly as possible.
Use inputmode="numeric"
for the card number and security code fields to show an optimized on-screen keyboard for entering numbers.
Add appropriate autocomplete
values for your payment form controls to ensure browsers offer autofill. Use autocomplete="cc-name"
for the name, autocomplete="cc-number"
for the card number, and autocomplete="cc-exp"
for the expiry date.
Ensure users enter data in the correct format #
Use the required
attribute for every <input>
to ensure users fill out the complete form.
Payment card security codes can be three or four digits. Use minlength="3"
and maxlength="4"
to only allow three and four digits.
Ensure users only enter numbers for the card number and security code. Use pattern="[0-9 ]+"
to allow users to include spaces when entering a card number, since this is how the numbers are displayed on the physical cards.