Single-Field Credit Card Input Pattern

Single Credit Card Input Demo

Forms suck. And they especially suck on mobile devices.

Luke Wroblewski has been talking for a long while now about how input masks make form entry a lot less painful for people. He recently highlighted Square Wallet‘s clever single-field credit card capture pattern.

The post referenced a phenomenal port of Square’s native app behavior for the Web by Zachary Forrest (@zdfs).

Zachary’s excellent work was just what I needed to get started creating the Greater Pittsburgh Community Food Bank’s donation form (as part of our open redesign of their site). I ended up tinkering with Zachary’s initial script a bit and made a few alterations:

  • Made the area a bit more fat-finger-friendly
  • Added support for semantic form markup like legend and label, so that if the environment doesn’t cut the mustard, you can still provide users with a totally accessible, more traditional form experience.
  • Replaced the bitmap credit card icons with these wonderful SVG credit card icons from The Honest Ape. I ran them through Grumpicon so they appear as inline data URIs with PNG fallbacks for unsupported browsers.
  • Added an additional instruction message below the field to provide additional messaging to the user. As much as I love this pattern as-is, I’m worried some folks might be confused/overwhelmed by all this shifting around. So I added a place to provide additional instructions to help users along as they fill out their credit card info.

You can see the pattern on Github, view a demo, or see it in action on our project’s prototype.

Screen

I want to give a massive thank you to Zachary Forrest for putting together such a great script. I’m sure I’ll be tweaking the entire donate experience over the course of the project, so if you’d like to contribute to the project we’d really appreciate it!

32 Comments

  1. Šime Vidas

    I’ve tested on my Android (4.1.2; Sony Xperia S).

    In Firefox, there is an issue with the caret position. When I get to the MM/DD field, I am not able to enter the full value, e.g. after entering “12/1”, I’m no longer able to enter the last digit and move to the next field.

    In Chrome, after entering the card number, the input does not move to the next field (MM/DD), so I”m not able to continue.

  2. Šime Vidas

    Looks like issues are disabled for that repo (no “Issues” button). Could you check in the repo’s settings?

  3. Aaron Moodie

    Hey Brad, curious to know if you did any user testing around this? I’ve been finding that these type of cleaver treatments tend to break the users mental model of what a certain forms – such as a credit card input – should look like.

    • Brad Frost

      No, there’s been no user testing out there that I’ve seen. Our food bank project is being done in the open, which will give us an opportunity to test and share those results.

  4. Olli Jäderholm

    While this is a very clever approach, I too wonder about the effect this method will have on conversion rates. To me it seems that the user has to think what is going on much more than with a regular form. Are you planning on conversion rate testing as well? Would be very interesting to see the effects against a regular method.

  5. Charlie

    Hey brad – will 1password and other auto fills still work with this type of form?
    Ta

  6. Lucian

    This approach may be faster however some users may get confused when the cc number is hiding. They may think it was deleted

    • Brad Frost

      I think the point of the animation is to help the user understand that it’s advancing rather than being hidden.

  7. Jorge

    I love the concept and it looks very nice, but I’m a little concern about the accessibility of it, for instance a screen-reader reads perfect the first set of data instructions (‘Enter card number’), but after that point there’s no instructions nor expected format information given to the screen reader user.

  8. Glauber

    Hey Brad,

    I like the concept and the idea, is very nice put together.

    But I think it needs further user testing on it. It would be nice to see people using it, especially older people that may not understand what is happening and can have some problem with the flashing.

    Anyway, let us know how it goes and keep us updated on it 😀

    Thanks,
    Glauber

  9. Doug

    FYI, tested on Windows Phone 8.1 (don’t hate) IE11 and it doesn’t work at all. Can’t even type in the credit card number.

  10. George Papadakis

    Kudos for coming up with this approach.

    A tiny little thing:

    • Pasting the card #
    • or setting the value via Javascript

    won’t do the trick as expected.

    Since mainstream apps like 1Password set values the js way, you might need to address those little issues too.

  11. Hugo Giraudel

    One thing I noticed is I can’t do `ctrl/cmd` + `a` then `back` or `suppr` to delete the entire string. I immediatly lose selection. 🙁

    It’s something I use to do when I have more than one mistake in a field.

    Running Chrome 34.0.1847.116 Windows 7.

  12. Prestashop

    Interesting idea, but at the same time it looks like it might have mobile problems or user issues. But I like the concept.

  13. Duarte

    What if I want to edit something out? how do I go back? Or see the other things I’ve inserted in the beginning?

  14. Bobby Adamson

    It’s a great idea and I like the way it looks except for one thing:

    It assumes input masks eliminate mistakes, rather than reduce them. I guess this is how Square and you justify sliding the first 12 digits of the card number out of the way. But a lot of people will still fat finger the 3rd, or say 6th digit and not realize it until they’ve input everything else.

    It’s confusing to hide a users input. They could make a mistake and not realize it. They could be confused about where their card number went, etc. Testing needs to be done to make sure people understand this.

    I will say it looks beautiful and works very well. I understand how it works. I’m just not sure some users would.

  15. Brian

    I don’t really like this method. Simplification makes sense in some situations, but in this case, I know from personal experience that many like to check their card number before proceeding to inputting other information. I’d add a submit/ok/next button to allow users to proceed manually.

  16. matt jiggins

    very nice – only complaint was using tab at the end of a field caused it to skip ahead two fields – not an issue on mobile though (chrome 34.0.1847.116)

  17. Austin Storm

    So beautiful – love this pattern.

  18. Vicky

    UK FORMS NEED ADDRESSES I’ve found in the past that these types of fields a) fail with my card b) get it flagged for fraudulent use. Have you tried this with UK CCs?

  19. david e

    We’ve been using a near identical approach to this in our touchscreen applications for the last three years – the only difference is the selection of the card and a submit button. We’ve had literally tens of thousands of users and a lot of them elderly and never had a complaint about how it works.

  20. Jane D

    This idea looks nice from a visual perspective, but I don’t see how this really benefits the user experience much, except for saving 3 tab presses. The other concepts, like auto determining the card type and input masking seems to work well enough on its own.
    Also, on Chrome when I go back to the credit card number and delete a single digit, I cannot enter a new digit in any position other than the last one. So I would be forced to delete the entire number and start again…

  21. Carri Craver

    Having learned many things from your work, I want to like this. But at my UXer core this method feels wrong. But I suspect it is on the path to a good solution.

    Making mistakes and fixing them will still need to be easy. This method would make some mistakes harder to spot or fix.

  22. Josh

    Nice. The only thing is that just because it’s cool does not mean increased conversions for everyone who uses it. The reality is that in many cases… ugly credit card forms convert higher than pretty ones. It’s something each company would need to test for themselves…

    For some of our clients, using a field like this on their offers, could cost them millions.

  23. Felipe

    You guys are genius. Well done! I’d suggest to do a thorough QA though.

  24. Max Cabrera

    Hello Brad, this is an awesome approach, thanks for working on it and making it available to all of us.

Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.