Chapter #51. Capture the Bare Minimum When Requesting Payment Card Details
The end goal for a lot of sites and apps is getting a user to pay. It's a cause for celebration: we've made something or are offering something so good that the user is happy to spend their hard-earned currency with us. So, why do we make it so hard for them to do so?
A credit or debit card number is already an unwieldy amount of data for a user to enter, so make it as easy as possible for them:
Only collect what you need: card number, expiry and CV2 code.
Allow the user to type the full card number into one field, but visually split it into groups of four digits as they enter it. This makes errors easier to spot but prevents the user having to move between four separate input fields.
If the user hits the spacebar, then remove the space silently.
Include some help text describing where to find the CV2 or card security code. It's not worth losing a customer because some people have different terms for this code.