Show HN: Card – An interactive CSS3 credit card form

Looks great. Few notes:<p>1) On the already crowded payment form, I don&#x27;t want to devote a hell of a lot of space to something that is otherwise inconsequential (a picture of a credit card)<p>2) Is it a great idea to broadcast someone&#x27;s card numbers so clearly? The graphic is so obviously a credit card, it would be easy for any onlooker to spot and steal.<p>Really, this seems like aesthetics for aesthetics&#x27; sake, which I traditionally shy from, but I always like seeing people take a swing at something.

Looks gorgeous. I can&#x27;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 &quot;copying&quot; the credit card. It would be interested to test the opinions of non-tech savvy users.

This is neat, and I love the look and feel. The only problem is that it&#x27;s completely unnecessary and possibly confusing for potential customers. But that&#x27;s just my opinion. It would be interesting if someone would put this on their own payment page and share the conversion metrics.<p>There&#x27;s a few annoyances that threw me off:<p>1) Like others mentioned in this thread, I first tried to enter credit card details directly on the card. I was initially blind to the text inputs underneath the card. If the card was initially hidden, then faded in to the left&#x2F;right of the input form that might alleviate this confusion. The problem is the card is so beautiful and neat looking I immediately anchor to the card instead of the input form.<p>2) When entering an invalid date or credit card number there&#x27;s no visual feedback. It&#x27;s very common to be blind to your own input errors, which necessitates clear communication of error state.<p>3) Even more confusing, I can&#x27;t tab to the CVC field when the date is invalid. But I can tab to the name field when the credit card number is invalid. This inconsistent behavior initially made me think the form was &quot;broken&quot;.

It&#x27;s confusing because my first instinct was to type my credit card info on the card itself. It took me a few seconds to realize there was a form below it.

Let me be the first to rain on your parade (sorry).<p>If you&#x27;re <i>not</i> the merchant of record using this form could very well violate your terms of service for whatever credit card company you have your merchant account with, and&#x2F;or the IPSP terms of service.<p>Using this can result in terminating your merchant account or temporary suspension depending on how they take it.<p>The reason why is that the logo&#x27;s are <i>only</i> allowed to be used by the merchant of record, for many of the parties interested in that this will be their IPSP. So verify prior to doing this that you actually are allowed to use the card association logos. (And for that matter, that you&#x27;re authorized to capture the card details!).<p>Please be careful, if you lose your merchant account it could be a while before you get it back, if ever.

On the &quot;Before&quot; it says &quot;painful&quot;. What is painful about it?<p>And as someone else said, I also tried entering ON the card rather than below it.

Very cool experiment but as others have pointed out it&#x27;s tough to beat simplicity from a conversion perspective.<p>Example Amazon:<p><a href="http://i.imgur.com/aK8K4UY.png?1" rel="nofollow">http:&#x2F;&#x2F;i.imgur.com&#x2F;aK8K4UY.png?1</a><p>Single name on card field Card # Dropdown for EXP<p>Example Stripe:<p><a href="https://stripe.com/checkout" rel="nofollow">https:&#x2F;&#x2F;stripe.com&#x2F;checkout</a><p>Single name on card field Card # Exp &#x2F; CVC<p>Less is more when it comes to this point in your conversion funnel.<p>And the fundamental conversion issue around collecting a CC at this point in cycle isn&#x27;t usually design, it&#x27;s trust.

Looks nice, perhaps you can implement the Luhn algorithm to ensure the CC is not known-invalid (to prevent data entry error)?<p><a href="http://en.wikipedia.org/wiki/Luhn_algorithm" rel="nofollow">http:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Luhn_algorithm</a>

This is really pretty. Kudos to the dev&#x2F;designers. However, if there&#x27;s one thing on my website I don&#x27;t want to be exciting, it&#x27;s entering payment data.

There&#x27;s nothing painful about a regular form with the minimum amount of fields.

Great, so instead of worrying about someone peeking over my shoulder, I now have to worry about the person 30 feet away, with the size of that font.

It&#x27;s a nice display, but as others have said it invites attempts to type on the card itself (which doesn&#x27;t work). It also doesn&#x27;t scale with increased font sizes; the card remains the same size and text within it wraps or gets cut off.

Interesting experiment! I&#x27;d like to see some data on how effective it is versus typical card entry fields.<p>At first glance I think users would be extremely confused by what is happening in terms of what to fill out, if not full out distracted by the animated card.

FWIW, Chrome blocked your calls to load various JS and CSS files from Yandex because you used HTTP, not HTTPS.

I once saw a detailed analysis of skeuomorphic credit card input, and it turns out the general population is less likely to fail on a non-moving credit card input box, largely because of difficulties with entering the CVC code. This combines both the skeuomorphic nature of Skeuocard by Ken Keiter (<a href="http://kenkeiter.com/skeuocard/" rel="nofollow">http:&#x2F;&#x2F;kenkeiter.com&#x2F;skeuocard&#x2F;</a>) with the simplicity of creditcardJS (creditcardjs.com). I love it!

I&#x27;m no design or UX expert and this does look smooth.<p>However, how does this stack up against the recent UX trend of moving away from skeumorphism? Why should a CC number be represented by an actual plastic card that is coming to life and flipping around on my screen?<p>I believe the future of plastic credit cards is limited given the security loop holes etc. Companies like Square, Google, etc. are already championing transferring money over native internet identities like email addresses.

Pretty nice, pretty similar to JS Skeuocard (<a href="http://kenkeiter.com/skeuocard/" rel="nofollow">http:&#x2F;&#x2F;kenkeiter.com&#x2F;skeuocard&#x2F;</a>)

This is great! There&#x27;s also Skeuocard (<a href="http://kenkeiter.com/skeuocard/" rel="nofollow">http:&#x2F;&#x2F;kenkeiter.com&#x2F;skeuocard&#x2F;</a>) 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&#x2F;inaccessible to some people - nice work on the library!

This code looks eerily similar to Stripe&#x27;s jquery.payment (<a href="https://github.com/stripe/jquery.payment/blob/master/lib/jquery.payment.js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;stripe&#x2F;jquery.payment&#x2F;blob&#x2F;master&#x2F;lib&#x2F;jqu...</a>)

For me the whole thing took too long to load. I didn&#x27;t even see the card until I had filled in most of the data in the fields (and I was thinking, &#x27;What&#x27;s so different about this?&#x27;). Then the card loaded and all the data I had put in already was automatically deleted and I had to do it all again. If I was buying something on a whim, this might just be enough for me to think &#x27;Forget it&#x27;.<p>More generally, while I <i>do</i> think that entering card details is a bit of a ball-ache, I <i>don&#x27;t</i> think the solution is having a picture of the card on screen...

It doesn&#x27;t seem to be working to tab between fields in Chrome. Once I&#x27;ve entered the expiration date it just fails to go to CVC or let me tab into it. had to use the mouse to switch fields.

I can&#x27;t imagine I would ever use this, as a developer or as an e-commerce customer. But it is certainly a well-executed, fun exercise... Folks on CodePen.io would go bananas over it.

Used in production today on an internal tool that we do some billing&#x2F;card running on. After some small jquery options struggles, it worked as it says on the tin.<p>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&#x2F;fun.<p>Fun.

I really want to like this because the design and functionality of is very cool. Like others I tried to start typing on the card so there is definitely an element of confusion that isn&#x27;t there with a normal form. The last place I want to risk any confusion is the stage at which the customer is trying to pay me! A variation of this where you could type on the card might be interesting.

Looks nice, but doesn&#x27;t play well with autocomplete in chrome (tab completing my name didn&#x27;t show up on the card)

This looks great, but any code that attempts to guess the card type using the first few numbers always makes me nervous

Looks absolutely beautiful. But I stopped for a second and did not, at first, give my real card number.<p>Are we so used to crappy CC forms, that a nice, flashy one (which I know is open sourced on github - I can validate if they are doing something bad) is slightly scaring me?<p>Wow that&#x27;s the power of crappy design fed to us for years.

Tab from expiry to cvc doesn&#x27;t work in the interactive. Other than that, honestly, I was just impressed by the &quot;boring&quot; version. Very tidy form, nice to see a new take on it. Existing cc forms around are seriously painful to use. Really digging the card vendor detection, neat touch.

That&#x27;s a lot of code for a sliver of functionality. Does that concern developers these days?

Oh, wow. The first time I loaded the page the image didn&#x27;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.

thank you for this. i&#x27;ve never understood why credit cards are printed w&#x2F; spaces between the numbers, presumably to reduce transcription errors, but 99.9% of web forms force you to enter the number without any spaces.

Its broken for American Express cards. Amex cards don&#x27;t do the number as 4 groups of 4, and the security code is on the front.<p>EDIT: I apologize it works! (note I did try it but apparently mis-typed my first four digits ....)

Doesn&#x27;t seem to show the card at all in Safari. Works in Chrome, however.

Anyone seen a similar implementation which doesn&#x27;t need jQuery?

Except 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&#x27;t need to touch the mouse.

Love it, reminds me of the Dropr design when paying with credit cards. I guess it&#x27;s not for every webpage, but it&#x27;s a playful payment design

I see no difference. This error is displayed in my console.<p><pre><code> ReferenceError: hljs is not defined </code></pre> On line 123. Hope this helps, good luck.

Gorgeous.<p>Two minor points...<p>It would be nice if it checksummed the card to ensure the entered number was a valid credit card number on form exit.<p>You can get 17 digit credit card numbers now.

Can&#x27;t tab out of the expiration date field FYI

Looks really nice, but right now it&#x27;s quite buggy on IE 11. I see a lot of flickering and it keeps scrolling to the top of the page.

Another point, I tend to rely on iCloud Keychain and 1Password to store card information.<p>Perhaps you should ensure it works with those data entry methods?

If you need something easy, nothing is better IMO than Stripe Checkout.<p>It&#x27;s insanely easy to integrate, and has an awesome (modal) payment form.

Mouse scrolling is broken on that page in IE 11.

looks cool.<p>Any A&#x2F;B test results on conversion rates?

Love the design, thanks for this! The conversion rate must be analyzed but it definitely looks gorgeous.

If anyone ends up doing some user testing with this form, please let us know the results!

2nd coolest thing I ever saw, just behind Psy&#x27;s Gangnam Style :-)

I like it a lot; one suggestion: increment the card colours contrast.

Very Very cool!

This looks great and without using images - kudos!