Payment forms

This module is about payment forms and doesn't explain how to implement transactions on your site.
You can add payment functionality by implementing Web Payments,
or using a third-party payment platform.
The payment form is often the last step before completing a purchase.
To maximize conversions, ensure your payment form is user-friendly and secure.
https://codepen.io/web-dot-dev/pen/0f0da240784a36da7fa958018af29f3f
Ensure users know what to fill in
Keep your payment form as simple as possible,
showing only required fields.
You don't need to add a selector for the card type—that's worked out automatically by the payment processor from the card number.
However, you may want to enhance your card number field by indicating the card type based on the entered number.
You can use a regex to test the card type,
and show the brand logo next to the card number 
<input>.
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.
Use a single 
<input> for each of the name and card number fields. Keep the user in typing mode,
and don't waste their time by forcing them to jump between multiple name or card number fields.
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.
Use 
type="number" only for incremental fields,
for example, the quantity of a product.
Browsers show an up/down arrow for 
type="number"
which makes no sense for payment card 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.
You can help users fill in the correct format for expiry date by using an
input mask.
Test with real users, using only your keyboard,
and a screen reader such as VoiceOver
on Mac or NVDA on Windows to ensure the input is still accessible.
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.
Payment card brands use different formats,
for example, for card numbers and security codes.
Always test your payment form with every card type you support.
Ensure your validation rules consider every possible format.
Resources
Payment and address forms best practices.
Web Payments.