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.