Collecting Payment Information Within a Single Input

For years the advice for mobile designers has been to avoid text input. Screens are small, fingers are imprecise, and so errors happen. But at the same time mobile devices are always with us, always on, and always connected. So instead of trying to limit input we should be encouraging it and taking steps to ensure it’s easy to provide accurately. Enter input masks...

Input masks constrain text entries to help people avoid mistakes. For example, a phone number input mask could only accept numeric entries and ignore any alphabetic characters or punctuation. Acceptable numbers could be limited to just a range, a specific pattern, or a combination. Input masks don’t just prevent errors, they can also guide people by presenting and maintaining input hints like specific formatting requirements. And last but not least, input masks can integrate multiple questions into logical sequences, keeping people from having to move between multiple input fields in a form.

One of the most interesting uses of input masks I encountered recently was the credit card information field in Square’s mobile app. Their design solution seamlessly moves someone from credit card number to expiration date, CVV, and ZIP code. In other words, all the information needed to process a payment. Recently, Zachary Forrest took the time to bring this elegant solution to the Web.

As you can see in the video above of Zachary’s demo, a single input field is used to capture credit card number first. If the credit card number is invalid an error is displayed that prevents the user from moving forward. If the credit card number is valid, the generic credit card icon changes to reflect the type of card entered. This removes the need for a separate credit card “type” drop down or selector and reassures someone that their entry has been understood.

Once the credit card number is validated, it slides over to the left leaving only the last four trailing digits for reference and the next set of inputs appear in the mask: expiration date, CVV (security) code, and ZIP code. Since these are all numeric inputs, a 0-9 set of soft keys is all that is needed to keep people moving along on the keyboard.

Since the expiration date on a credit card can’t be in the past or far future, the input mask one again helps keep people away from errors. Invalid months or years simply won’t be accepted. After a valid expiration date has been added, Square’s design features another excellent enhancement. The credit card icon changes to reveal where the CVV code is located on the specific card being used to pay. This small detail helps clue people in to what information is required next.

Because CVV and ZIP are also numeric entries, there’s no reason to ever leave the dial-pad throughout the payment input process: no jumping between multiple form fields required. Zachary’s also made sure that people can use their keyboard (tab and shift-tab) and mouse to move between the various parts of this payment input mask.

Kudos to the Square team for rethinking how payment information can be collected in forms and to Zachary for coding this up for the Web. It’s a great example of how input masks can make text input faster and more accurate (especially on mobile devices).