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.