1

I'm currently attempting to employ the single-form credit card input solution similar to the one on Brad Frost's website (link below) but I'm facing some reluctance from others on this project due to questions about usability.

Thus far, the most high-profile implementation of this I've seen is on Uber's mobile app, where it works quite well. I've been pressed to find any other e-commerce sites utilizing this.

LukeW apparently published testing results last year regarding this but the link to his report is no longer active.

Has anyone had any experience with this single-form payment solution or experienced any implementations on any other sites/applications? We currently do not have the time or resources to test this (the test results mentioned earlier were apparently quite good) so I'm attempting to gather as much research - both anecdotal and data - about this as possible.

Thanks for your time.

http://bradfrost.com/blog/post/single-field-credit-card-input-pattern/

  • Have you talked to your team about why you want to use this form over a standard credit card form? Since you are proposing something that deviates from the norm, you are responsible for showing it is better. – Bowen Apr 6 '15 at 22:57
  • are you referring to this write up/report? lukew.com/ff/entry.asp?1579 – Poyi Apr 6 '15 at 22:59
  • Yes. The majority are quite excited about it but there's a bit of reluctance from two members, mostly because it is different. That's why I'm seeking any experience or data. – CATL Apr 6 '15 at 23:01
  • 1
    Thanks, but it's actually the testing report linked here in section 2. smashingmagazine.com/smashing-newsletter-issue-113 – CATL Apr 6 '15 at 23:03
2

This isn't the answer you are looking for, but if you don't have time to test, don't try something out of the ordinary.

I personally think that solution looks great, it's clean and clear, and the progression makes a lot of sense. However, I don't know your user base, and it could throw someone off. I also foresee some random Android phone that handles forms differently giving you problems, and then some users can't finish the form.

Here is a really good article that covers a lot of different aspects of a CC form:

http://designmodo.com/ux-credit-card-payment-form/

  • 1
    +1 for this fantastic advice: "...if you don't have time to test, don't try something out of the ordinary." – Ken Mohnkern Oct 1 '15 at 18:04
1

We recently used the single-field credit card input on a high profile donation campaign that raised 2.4 million in one month. You can check out the form here: https://freezemnd.com/donate/

The most difficult thing for us came after the client asked to add conditional logic to the form for some raffle tickets. This created some trouble with the javascript and jQuery validation and security. Took a little extra time, but worked through it in the end.

Also, we hit some trouble with Android and Windows browsers as they handle the masking a little differently and essentially don't allow the user to input content. So we ended up putting in a fallback that changed the form to your more standard style, which worked well.

  • If you can could you put up a wireframe / cropped screenshot of the form. The form won't be there for ever. – Mayo Jul 3 '15 at 4:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.