If anyone ends up doing some user testing with this form, please let us know the results!
Show HN: Card – An interactive CSS3 credit card form
101–110 of 117 posts
Re: Show HN: Card – An interactive CSS3 credit card form
#102This is great! There's also Skeuocard ( http://kenkeiter.com/skeuocard/ ) which offers a bit more of a skeuomorphic design. I think I favour the form as part of the card, however this may be confusing/inaccessible to some people - nice work on the library!
I have a few problems. To fill out the security field I have to actually flip the digital card over. To do so requires me to click on something that looks like a close button. It made me feel like clicking on it would invalidate all the card info I had just typed in.
When one field is valid that field no longer appears editable, so if there was a mistake in the spelling of my name it took me a minute to figure out I can still click on my name to change it.
It doesn't tell me the card number is invalid until after I enter an expiry date, that may be legitimate but it caught me off guard.
I don't like it. It's too confusing for what should be name, card number, expiry and security number. It doesn't address the fact that after I fill out those four fields, I still need to enter my billing address in what would be at least four additional fields regardless.
Re: Show HN: Card – An interactive CSS3 credit card form
#103Looks gorgeous. I can't help but wonder if people unfamiliar with technology and ecommerce would be deterred by such a form? It might give some users the impression that the website is "copying" the credit card. It would be interested to test the opinions of non-tech savvy users.
This is amazing, I love how it handles the CVC even on AmEx. The only way this could be better is to type directly on the card or move the fields above (mobile) or to the side of the card to make them more prominent.
This is great work.
Re: Show HN: Card – An interactive CSS3 credit card form
#104On the "Before" it says "painful". What is painful about it? And as someone else said, I also tried entering ON the card rather than below it.
Was thinking the same thing about the "painful" descriptor. I'm thinking it was just a joke...?
Re: Show HN: Card – An interactive CSS3 credit card form
#1052nd coolest thing I ever saw, just behind Psy's Gangnam Style :-)
Re: Show HN: Card – An interactive CSS3 credit card form
#106Earlier quoted context omitted.
Well, of course untrusted code dealing with CC info is insecure. That's why this is open source, and you host it yourself. It's just a library. Whose source you can see. Whose source you can compile. With a third-party compiler. You'd say you'd trust it if it was from Google - in this case, if you use it, it's coming from you , on your server, under your control. I'd trust this far more than a Google-hosted closed-so…
Because it's open source, we can figure out exactly what's going on. OP brings up the point from the users' perspective and they might not trust an interface that looks this flashy.
That's a far cry from
Make your credit card form better in one line of code
With one line of code..
$('form').card({ container: $('.card-wrapper') });
You get..
Animations for 4 different card types
An intuitive experience for your users
Pure CSS, HTML, and Javascript (no images)
100% free and open source
All I am saying is that for us as developers it is not so simple either. . . we also have to be vigilant.
Re: Show HN: Card – An interactive CSS3 credit card form
#107Looks gorgeous. I can't help but wonder if people unfamiliar with technology and ecommerce would be deterred by such a form? It might give some users the impression that the website is "copying" the credit card. It would be interested to test the opinions of non-tech savvy users.
I don't know about people unfamiliar with technology, but as someone very familiar with technology, my first thought is that this could easily be a vector for copying the card information! All you need is to load some encoded image off of a third server to leak card info via a side channel, if your code is underhanded. I would trust "one line of code" if it's a solution from Google or something, but for something thi…
OP is trying to get a job at stripe, stop making it so obvious he was blending in
Re: Show HN: Card – An interactive CSS3 credit card form
#108Except that I would have to use the mouse to navigate from Expiry Date to CSV field. I would prefer a simpler one where i wouldn't need to touch the mouse.
Re: Show HN: Card – An interactive CSS3 credit card form
#109Oh, wow. The first time I loaded the page the image didn't form correctly and it was just a block of text which was hideous. Then I read the top comment calling it gorgeous so went back, and now that it loaded properly, I agree! Quite awesome.
Re: Show HN: Card – An interactive CSS3 credit card form
#110Earlier quoted context omitted.
Because it's open source, we can figure out exactly what's going on. OP brings up the point from the users' perspective and they might not trust an interface that looks this flashy.
That's a far cry from Make your credit card form better in one line of code and With one line of code.. $('form').card({ container: $('.card-wrapper') }); You get.. Animations for 4 different card types An intuitive experience for your users Pure CSS, HTML, and Javascript (no images) 100% free and open source Which certainly could be used by someone who doesn't understand all this. All I am saying is that for us as d…
If somebody who doesn't know what they're doing is writing a CC form, you've already lost. Making app development easier isn't "dangerous" because it allows less experienced people develop applications. You will always have people making mistakes and screwing up security, regardless of the actual ease of development. The more the developer has to do, the more they can screw up.