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.
Use self-explanatory wordings for your
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.
inputmode="numeric" for the card number and security code fields
to show an optimized on-screen keyboard for entering numbers.
autocomplete values for your payment form controls to ensure browsers offer autofill.
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
required attribute for every
<input> to ensure users fill out the complete form.
Payment card security codes can be three or four digits.
maxlength="4" to only allow three and four digits.
Ensure users only enter numbers for the card number and security code.
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.