1 line of code. Plus the plugin. Plus jQuery.
Nice idea, nonetheless.
I knew from the beginning it was a catch-phrase. Nothing related to e-commerce and financial apps can be done in one line.
I agree that this is fun, but I would argue its rather superfluous and unnecessary. Does the user really need this much visual feedback as they enter their credit card number? I don't really mind the original form at the top of the page personally.
I agree. Totally superfluous..
Even if this only prevents 1% of users from making a mistake when they enter their credit card details, it might still make a difference to the bottom line of a big enough site.
card logo and corresponding cc# spacing would be enough. CSS graphic is a cool gimmick, but nothing more.
I feel that's a big if. I would like to see this up against some other well designed forms in a large user test (as I could be wrong). I don't think the giant card would be any more successful than a form that auto spaces every four digits in the credit card number and has similar layout to an actual card. If I had to take a guess I would argue the fancy card thing would be a distraction resulting in more mistakes.
What if it scares away 1% of users, because it doesn't look like any credit card entry form they've ever seen, and feels like the website is "copying their card", something we've been trained to worry about?
I find it very clear to the user that can compare it with his real credit card. I don't think is superflous
URL when you click submit: http://jessepollak.github.io/card/?number=1234+5567+8890+0000&name=John+smith&expiry=01+%2F+1111&cvc=1234
This must be for demo use only? That can't be secure
Wow, it's really awesome how even the card backgrounds are made with pure CSS. I can't even imagine how long it must've taken to recreate those patterns with gradients like this…
That can backfire though — if my mom is filling her cc info and a blue Visa comes up (hers is grey) she might think there's something wrong.
EDIT: Nevermind, I'm stupid.
Great UX for end-users! I love it.
If IE8 was supported I would be using this in no time.
Interesting experiment but for anyone looking to use it, it doesn't appear to work in Chrome.
I was just going to mention this. I tested it in Chrome and didn't get what was supposed to happen.
Interesting. Working for me in Chrome on Windows.
I'm lukewarm about this personally (mostly due to the "old" form being pretty bad UX and that's what should be improved), but I will say that this does raise some security/privacy concerns to me simply because it makes the CC number you're typing in huge and super obvious, which would make it really easy for people near you at a cafe, on a train, etc to see and "borrow".
I'm also a little concerned how there are no error treatments here. It's an absolute requirement to have them. I'd be interested to see how this design would hold up with them added (ie: would you treat the card different).
Lastly, this takes up a lot of valuable real estate on the most critical point of the purchase flow. It would be interesting to A/B test this to see if it becomes too distracting... because my gut tells me that the billing page would have to have a pretty unique layout in relation to what users have become accustomed to to fit this in.
Overall, I think this is an intriguing idea and is nicely done, but security concerns aside, would like to see this tested against a well designed "traditional" CC form before stating that this will make it "better"... because "better" here is about users purchasing, not looks.
OMG this is brilliant!
Its not unnecessary if it helps users SEE mistakes, SEE errors or incomplete data where an old-school 1990's input field falls down.
Personally, I'd re-style the form field, to make IT user friendly, but I see where this card can add real benefit.
You should not allow real credit card entry +1
Can you provide a non jQuery version?
Rounded corners are a little laggy but this is awesome nonetheless!!
Used in production today on an internal tool that we do some billing/card running on. After some small jquery options struggles, it worked as it says on the tin.
Interesting reaction by test group when deploying....test group being a small group of coworkers. Without announcement, they immediately were untrusting of it and thought it was somehow consuming the credit card information maliciously. This is the security climate we find ourselves in. heh But after assuring them, they thought it was pretty neat/fun.
wow, this is just.... fun
going to try it out
You should delete this post. It's a SCAM.
Not necessarily a scam, but it is insecure if you type in your real CC details. Use a test card like: 4242 4242 4242 4242
I would certainly hope not, I know Jesse personally from college so I can't imagine he'd do that.
Just use random numbers or start with the IIN numbers from the various CC types and you'll get the interaction you want. http://en.wikipedia.org/wiki/Bank_card_number#Issuer_identification_number_.28IIN.29
Why would anyone even dream about putting in their real card details when trying out a demo on GitHub?
If you tab too quickly after inputting your data, it cuts off the last digit. Example.