9 ms·

Show HN: Card – An interactive CSS3 credit card form

376 points by jessepollak 12y ago

jpeg_hero 12y ago
looks cool. Any A/B test results on conversion rates?
- jessepollak 12y ago
  Haven't gotten to that point yet — I originally just set about implementing all the cards in CSS then decided to actually make it into something people could drop in really easily.
wwarren 12y ago
This looks great, but any code that attempts to guess the card type using the first few numbers always makes me nervous
- bluetidepro 12y ago
  Why does it make you nervous? I was under the impression it was pretty fool proof? See: http://stackoverflow.com/questions/72768/how-do-you-detect-credit-card-type-based-on-number http://stackoverflow.com/questions/72768/how-do-you-detect-c...
  - recursive 12y ago
    FYI, the expression is "fool proof"
    - bluetidepro 12y ago
      Fixed, thanks! :)
- pit 12y ago
  Maybe there could be a version that doesn't try to guess the card and uses a generic card background.
- saryant 12y ago
  Credit card numbers contain a unique ID for the issuer: http://en.wikipedia.org/wiki/Bank_card_number#Major_Industry_Identifier_.28MII.29 http://en.wikipedia.org/wiki/Bank_card_number#Major_Industry...
- squeaky-clean 12y ago
  Any reason why? It's a pretty straightforward system that card companies use. For example every Visa card begins with a 4, and only Visa cards begin with a 4.
- deleted 12y ago
  [deleted]
- AhtiK 12y ago
  Also fun if the last digit would be autofilled based on Luhn algorithm :)
- Igglyboo 12y ago
  He's not really "guessing" the card type, there's a pretty standard algorithm called the Luhn Algorithm that all credit card companies use when issuing their cards. The algorithm is public domain and all it does is tell you who issued the card which doesn't seem like an issue to me
  - harlanlewis 12y ago
    It isn't providing a visual for all credit card issuers, though (eg Diner's Club, JCB). Those cards may still be processed correctly (I don't have any way of verifying), but visually treating a correct input like an invalid input isn't going to help conversion much. Easily solved by simply adding treatments for more card types, and styling the entire card isn't that much more effort than just displaying an issuer logo. Where this starts to get really interesting (from a slick + branded perspective) is when you start handling gift cards.
xdissent 12y ago
Doesn't seem to show the card at all in Safari. Works in Chrome, however.
- jessepollak 12y ago
  Which version of Safari are you in? I've tested it in all of the latest versions, but it could easily be broken in an older one.
  - xdissent 12y ago
    Looks like it's not Safari's fault - I'm using Disconnect, which blocked the highlightjs lib from loading from yandex.st.
    - jessepollak 12y ago
      Fixed :)
  - mratzloff 12y ago
    Doesn't work on Lion: Safari 6.1.2 (7537.74.9)
goeric 12y ago
It'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.
- squeaky-clean 12y ago
  Same here, but aside from that, I think this is very neat. Maybe if instead of the card being grayed out before you enter input, it could be entirely invisible. But then the empty space above the form would seem strange at first.
  - rurabe 12y ago
    or just the empty recognizable outline of a card (the rectangle with the rounded corners) with no fields. then on first keystroke populate the fields, etc.
- jgrowl 12y ago
  I also tried clicking on the card itself. Why not allow that? Otherwise maybe have a hover div to the right of the input fields that only is displayed while any of the credit card fields are active.
frik 12y ago
Mouse scrolling is broken on that page in IE 11.
tomhschmidt 12y ago
FWIW, Chrome blocked your calls to load various JS and CSS files from Yandex because you used HTTP, not HTTPS.
- sullivanmatt 12y ago
  Yep, example does not work for HTTPS users of GitHub. I use HTTPS everywhere, so I'm always defaulted to HTTPS where available.
  - DatBear 12y ago
    And in this case, where not available as well.
wingerlang 12y ago
On 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.
- dlhavema 12y ago
  that would be a neat feature.. kinda hard to do the CVV thing though.. unless you have a "flip me" link somewhere...
  - wingerlang 12y ago
    Well there is this one which flips https://news.ycombinator.com/item?id=6143604 https://news.ycombinator.com/item?id=6143604 And this one which doesn't https://news.ycombinator.com/item?id=6692075 https://news.ycombinator.com/item?id=6692075
- chucknelson 12y ago
  Was thinking the same thing about the "painful" descriptor. I'm thinking it was just a joke...?
muaddirac 12y ago
Looks nice, but doesn't play well with autocomplete in chrome (tab completing my name didn't show up on the card)
- mcintyre1994 12y ago
  I was about to say the same thing, also doesn't work for credit card number. I autocompleted in a phone number and it didn't show up at all.
pbreit 12y ago
That's a lot of code for a sliver of functionality. Does that concern developers these days?
- mef 12y ago
  If it increases credit card signups at all, it's worth it.
brandon272 12y ago
Interesting experiment! I'd like to see some data on how effective it is versus typical card entry fields. 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.
tomardern 12y ago
Anyone seen a similar implementation which doesn't need jQuery?
- ceejayoz 12y ago
  http://www.doxdesk.com/img/updates/20091116-so-large.gif http://www.doxdesk.com/img/updates/20091116-so-large.gif
aresant 12y ago
Very cool experiment but as others have pointed out it's tough to beat simplicity from a conversion perspective. Example Amazon: http://i.imgur.com/aK8K4UY.png?1 http://i.imgur.com/aK8K4UY.png?1 Single name on card field Card # Dropdown for EXP Example Stripe: https://stripe.com/checkout https://stripe.com/checkout Single name on card field Card # Exp / CVC Less is more when it comes to this point in your conversion funnel. And the fundamental conversion issue around collecting a CC at this point in cycle isn't usually design, it's trust.
- mahmoudimus 12y ago
  (disclaimer: balanced employee) There's a direct statistical correlation between less fields and the amount of chargebacks received. So, yes, less is more for a conversion funnel, but do not assume that it comes without a cost.
  - aresant 12y ago
    "direct statistical correlation between less fields and the amount of chargebacks received" Spot on and completely agreed. But in my experience getting that CC at nearly any cost, even @ the end of a long sales process, delivers net gains even measured against returns etc. For enterprise (eg anybody that can afford it) there are fraud prevention solutions in place to balance the outcome and I've been thrilled watching STRIPE strip away the complexity for "the rest of us". But point well taken, multiple considerations in testing anything in your funnel and always optimize to highest LTV / KPI. Point of reference for the above is spending the last ~10 years running CRO projects across dozens of verticals, millions of transactions.
  - tnorthcutt 12y ago
    I'd be most interested in seeing the correlation between fewer fields and overall conversions, accounting for chargebacks. Neither conversions alone nor chargebacks alone tells the whole story.
wmeredith 12y ago
This is really pretty. Kudos to the dev/designers. However, if there's one thing on my website I don't want to be exciting, it's entering payment data.
encoderer 12y ago
If you need something easy, nothing is better IMO than Stripe Checkout. It's insanely easy to integrate, and has an awesome (modal) payment form.
JoshTriplett 12y ago
It's a nice display, but as others have said it invites attempts to type on the card itself (which doesn't work). It also doesn't scale with increased font sizes; the card remains the same size and text within it wraps or gets cut off.
mikeryan 12y ago
Its broken for American Express cards. Amex cards don't do the number as 4 groups of 4, and the security code is on the front. EDIT: I apologize it works! (note I did try it but apparently mis-typed my first four digits ....)
- sbarre 12y ago
  It worked fine for me on my Amex tests. 4-digit security code showed up in the right place, numbers were grouped correctly.
- cdellin 12y ago
  Did you try it? It gets the 4+6+5 and CVC on the front just right!
dshankar 12y ago
Looks 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.
- logicallee 12y ago
  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 this small I don't see how going with a small third-party solution is secure. - OP: why not sell this solution to a larger payment processor as a complete solution, so they don't have to develop it themselves?
  - tokenizerrr 12y ago
    Because you couldn't just generate a similar image on the server-side if you're already asking for that information?
  - benaiah 12y ago
    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-source library - not because I wouldn't trust a Google payment endpoint, but because this is totally under my control, and something from Google isn't. Not sure what you're talking about with the encoded image. Doesn't make much sense. There are no real security problems with this whatsoever. The problem is, unsavvy users may think there is, due to the visual resemblance of the onscreen card.
    - 12y ago
pestaa 12y ago
I see no difference. This error is displayed in my console. ReferenceError: hljs is not defined On line 123. Hope this helps, good luck.
- joshvm 12y ago
  https://camo.githubusercontent.com/312e819c130acb5d17a5a8568c4ae6c315210dac/687474703a2f2f692e696d6775722e636f6d2f71473354656e4f2e676966 https://camo.githubusercontent.com/312e819c130acb5d17a5a8568... Same issue here, but that's what it should look like.
- kevinday 12y ago
  If you're looking at this and not seeing any difference between the "before" and "after" versions, it's because HTTPS Everywhere is redirecting all github urls to their SSL version, so http://jessepollak.github.io/card/ http://jessepollak.github.io/card/ redirects to https://jessepollak.github.io/card/ https://jessepollak.github.io/card/ then can't load any of it's javascript dependencies due to the http/https mismatch. Bonus points for the form still working right through all of that.
- Zikes 12y ago
  Same for me, the yandex domain they're loading hljs from seems to be blocked. The hljs call is in the same script block as the line to initiate the fancy stuff, so it fails and that line's never reached. Paste this into the console to run that manually: $('.active form').card({ container: $('.card-wrapper')})
  - pix64 12y ago
    yandex was being blocked by Disconnect for me
joeframbach 12y ago
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.
iLoch 12y ago
This is great! There's also Skeuocard (http://kenkeiter.com/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!
- gameguy43 12y ago
  I like skeuocard's experience a lot. But it's not responsive, so it was a no-go for me. Ended up rolling my own. One great optimization skeuocard has is it only asks for the cc# at first, then the other fields appear as you type it in. So the form is less daunting at first.
- Kequc 12y ago
  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.
jacquesm 12y ago
Let me be the first to rain on your parade (sorry). If you're not 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/or the IPSP terms of service. Using this can result in terminating your merchant account or temporary suspension depending on how they take it. The reason why is that the logo's are only 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're authorized to capture the card details!). Please be careful, if you lose your merchant account it could be a while before you get it back, if ever.
- the_ancient 12y ago
  Overreact much? Most people that will be taking credit cards directly via a form like this will have merchant account and be authorized to use the credit card logos. If they are using a service like PayPal they are mostly redirecting to their service providers site for processing not taking the card info directly. The usage of the network logos are not as strict as you are implying here, even if you use paypal you can use the Network logos. https://www.paypal.com/us/webapps/mpp/logo-center https://www.paypal.com/us/webapps/mpp/logo-center There are many approved banners and logos that make use of the card network logos. I have never had a payment processing agreement where I was barred from using the Network Logos, nor would I sign up for such a service, in the off chance I am wrong please back up your claims with citations to actual laws or statements to support your claim
  - jacquesm 12y ago
    > Most people that will be taking credit cards directly via a form like this will have merchant account and be authorized to use the credit card logos. Using logos in combination with a credit card capture form comes with a different set of rules (and a different contract!) than just being allowed to use some third party processor that does all the work for you. If you want to capture the cards yourself instead of outsourcing the job to an IPSP then you're going to have to be at a minimum PCI compliant. This goes for any company that stores, processes or transmits credit card information. The tipping point is somewhere around a million $ US per year. Below that the cost of being in compliance outweighs the fees the IPSP charges for their service handily. The word 'credit' in credit cards stands for 'trust'. https://www.google.com/search?client=ubuntu&channel=fs&q=origin+of+the+word+credit&ie=utf-8&oe=utf-8 https://www.google.com/search?client=ubuntu&channel=fs&q=ori... People trust those companies and by extension trust those logos. That's why when you use them you will be held to the rules so strictly because credit card companies do not like it when their logos are used to give an aura of trust to an otherwise non-trustworthy situation. Just the PDF about what you can and can not do visually with the logo runs to lots of pages. Yes, there are plenty of ways in which using those logos is absolutely ok, and where using this form is (probably) just fine. Everybody that is PCI DSS compliant can likely use it without any problem. Yes, there are also plenty of ways in which using this form is strictly against the terms of service, typically this includes everybody who is not PCI certified, which is almost every two bit merchant on the web that outsources their payment processing and credit card capture to some third party. So, if you use a 3rd party solution that serves up the payment form and that handles the card capture and subsequent processing for you and you have a contract with them rather than with the card company you can use the logos and nobody will care, mostly because you can't do much harm (such as your paypal example). But if you are in a situation where you have a merchant account but you are not the merchant of record (this means you are a sub-merchant, such as when using any one of a number of IPSPs) then using this form is most likely not a good idea. As for me backing up my claims, I'm not going to attach a copy of my merchant agreement to a comment on the web, you are totally free to disregard what I wrote. This advice is worth exactly what you paid for, and everybody that has a merchant account but is not the merchant of record (aka a 'sub-merchant' in payment processing lingo) is totally free to inspect their own personal copy and for everybody else this does not matter at all. Further reading on the subject: https://www.pcicomplianceguide.org/pci-faqs-2/ https://www.pcicomplianceguide.org/pci-faqs-2/ A list with a sample of payment facilitators (if you use one of these you are quite possibly not the merchant of record): http://www.mastercard.us/merchants/accept-mastercard/payment-facilitator.html http://www.mastercard.us/merchants/accept-mastercard/payment... Note that this is not an exhaustive list by a long shot. The mastercard FAQ which has a nice little blurb about who is and who is not a merchant or record: http://www.mastercard.us/merchants/assistance/faq.html http://www.mastercard.us/merchants/assistance/faq.html Also of interest: http://www.mastercardbrandcenter.com/us/images/acceptance_marks_v06.pdf http://www.mastercardbrandcenter.com/us/images/acceptance_ma... Less interesting (branding, not acceptance marks): https://www.mastercardbrandcenter.com/us/getourbrand/index.shtml?pageId=dl_1510&expertVisible=false https://www.mastercardbrandcenter.com/us/getourbrand/index.s... Oh, and an afterthought: there is yet another important logo, the VBV one, you can only use this if you're actually part of the program.
HarrietJones 12y ago
Gorgeous. Two minor points... It would be nice if it checksummed the card to ensure the entered number was a valid credit card number on form exit. You can get 17 digit credit card numbers now.
czbond 12y ago
Very Very cool!
kdd 12y ago
This code looks eerily similar to Stripe's jquery.payment (https://github.com/stripe/jquery.payment/blob/master/lib/jquery.payment.js https://github.com/stripe/jquery.payment/blob/master/lib/jqu...)
r00fus 12y ago
Looks nice, perhaps you can implement the Luhn algorithm to ensure the CC is not known-invalid (to prevent data entry error)? http://en.wikipedia.org/wiki/Luhn_algorithm http://en.wikipedia.org/wiki/Luhn_algorithm
- BillinghamJ 12y ago
  Validation on the expiry date would be nice too.
stock584 12y ago
Pretty nice, pretty similar to JS Skeuocard (http://kenkeiter.com/skeuocard/ http://kenkeiter.com/skeuocard/)
- xj9 12y ago
  I actually like this one a lot better. Not being able to enter information onto the credit card itself was frustrating.
timme 12y ago
There's nothing painful about a regular form with the minimum amount of fields.
simcop2387 12y ago
It doesn't seem to be working to tab between fields in Chrome. Once I'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.
- MartynX 12y ago
  It is validating that the card is in date, if you enter a date that is in the future, it will let you tab to the ccv field.
jakejake 12y ago
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'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.
kzanul 12y ago
This looks great and without using images - kudos!
ultimoo 12y ago
I'm no design or UX expert and this does look smooth. 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? 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.
- robalfonso 12y ago
  I think that assessment is fair. Consider though that many users struggle with matching the data they have on the card with what goes on the form. Specifically the cvv code since some vendors use a 4 digit code instead of the more mainline 3 digit code. So I see a valid use case in here in presenting them a reasonable facsimile of whats in their hand to match up.
r00fus 12y ago
Another point, I tend to rely on iCloud Keychain and 1Password to store card information. Perhaps you should ensure it works with those data entry methods?
smrz 12y ago
Can't tab out of the expiration date field FYI
leepowers 12y ago
This is neat, and I love the look and feel. The only problem is that it's completely unnecessary and possibly confusing for potential customers. But that's just my opinion. It would be interesting if someone would put this on their own payment page and share the conversion metrics. There's a few annoyances that threw me off: 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/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. 2) When entering an invalid date or credit card number there's no visual feedback. It's very common to be blind to your own input errors, which necessitates clear communication of error state. 3) Even more confusing, I can'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 "broken".
dclowd9901 12y ago
Looks great. Few notes: 1) On the already crowded payment form, I don't want to devote a hell of a lot of space to something that is otherwise inconsequential (a picture of a credit card) 2) Is it a great idea to broadcast someone's card numbers so clearly? The graphic is so obviously a credit card, it would be easy for any onlooker to spot and steal. Really, this seems like aesthetics for aesthetics' sake, which I traditionally shy from, but I always like seeing people take a swing at something.
- spicerguy 12y ago
  > 2) Is it a great idea to broadcast someone's card numbers so clearly? The graphic is so obviously a credit card, it would be easy for any onlooker to spot and steal. yes - anything that signposts card data clearly to an onlooker is problematic, but any malicious shoulder surfer will probably be able to spot a payment page a mile off in any case. This might however, have a small possibility of encouraging opportunistic theft. I think the bigger threat to this probably comes from the networks (MC, VISA, AMEX etc) who get VERY possessive about mock-ups / card image facsimiles that use their logos. The brand logo protection that they enforce is pretty strict and I would imagine this approach would not be welcomed. I'd like to be wrong, but my experience with the networks makes me pessimistic.
  - kethinov 12y ago
    I'm less concerned with the reuse of their logos and more concerned with the fact that their logos are implemented in HTML/CSS rather than as images, which means there will be subtle differences. Basically those aren't their logos. They're slightly inaccurate imitations. Most big brands will be upset if even a few pixels are off when their logo is displayed.
- lakep 12y ago
  You're right, point 2 is THE show-stopper for this. It looks amazing, but if amazon or the likes ever tried this I'd close my account - credit card security, in this day, is not the place for gimmicks. Sorry.
jmcejuela 12y ago
Love the design, thanks for this! The conversion rate must be analyzed but it definitely looks gorgeous.
lugg 12y ago
Tab from expiry to cvc doesn't work in the interactive. Other than that, honestly, I was just impressed by the "boring" 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.
pointpointclick 12y ago
I can'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.
primitivesuave 12y ago
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 (http://kenkeiter.com/skeuocard/ http://kenkeiter.com/skeuocard/) with the simplicity of creditcardJS (creditcardjs.com). I love it!
cesarbs 12y ago
Looks really nice, but right now it's quite buggy on IE 11. I see a lot of flickering and it keeps scrolling to the top of the page.
brainless 12y ago
Looks absolutely beautiful. But I stopped for a second and did not, at first, give my real card number. 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? Wow that's the power of crappy design fed to us for years.
xrt 12y ago
thank you for this. i've never understood why credit cards are printed w/ spaces between the numbers, presumably to reduce transcription errors, but 99.9% of web forms force you to enter the number without any spaces.
javierga 12y ago
Love it, reminds me of the Dropr design when paying with credit cards. I guess it's not for every webpage, but it's a playful payment design
izietto 12y ago
I like it a lot; one suggestion: increment the card colours contrast.
christudor 12y ago
For me the whole thing took too long to load. I didn't even see the card until I had filled in most of the data in the fields (and I was thinking, 'What's so different about this?'). 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 'Forget it'. More generally, while I do think that entering card details is a bit of a ball-ache, I don't think the solution is having a picture of the card on screen...
reledi 12y ago
If anyone ends up doing some user testing with this form, please let us know the results!
graemian 12y ago
2nd coolest thing I ever saw, just behind Psy's Gangnam Style :-)
tangoalpha 12y ago
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't need to touch the mouse.
Sebguer 12y ago
Oh, 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.
ChrisArchitect 12y ago
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. Fun.

376 points by jessepollak 12y ago

jpeg_hero 12y ago

looks cool. Any A/B test results on conversion rates?

jessepollak 12y ago
Haven't gotten to that point yet — I originally just set about implementing all the cards in CSS then decided to actually make it into something people could drop in really easily.

wwarren 12y ago

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

bluetidepro 12y ago
Why does it make you nervous? I was under the impression it was pretty fool proof? See: http://stackoverflow.com/questions/72768/how-do-you-detect-credit-card-type-based-on-number http://stackoverflow.com/questions/72768/how-do-you-detect-c...
- recursive 12y ago
  FYI, the expression is "fool proof"
  - bluetidepro 12y ago
    Fixed, thanks! :)
pit 12y ago
Maybe there could be a version that doesn't try to guess the card and uses a generic card background.
saryant 12y ago
Credit card numbers contain a unique ID for the issuer: http://en.wikipedia.org/wiki/Bank_card_number#Major_Industry_Identifier_.28MII.29 http://en.wikipedia.org/wiki/Bank_card_number#Major_Industry...
squeaky-clean 12y ago
Any reason why? It's a pretty straightforward system that card companies use. For example every Visa card begins with a 4, and only Visa cards begin with a 4.
deleted 12y ago
[deleted]
AhtiK 12y ago
Also fun if the last digit would be autofilled based on Luhn algorithm :)
Igglyboo 12y ago
He's not really "guessing" the card type, there's a pretty standard algorithm called the Luhn Algorithm that all credit card companies use when issuing their cards. The algorithm is public domain and all it does is tell you who issued the card which doesn't seem like an issue to me
- harlanlewis 12y ago
  It isn't providing a visual for all credit card issuers, though (eg Diner's Club, JCB). Those cards may still be processed correctly (I don't have any way of verifying), but visually treating a correct input like an invalid input isn't going to help conversion much. Easily solved by simply adding treatments for more card types, and styling the entire card isn't that much more effort than just displaying an issuer logo. Where this starts to get really interesting (from a slick + branded perspective) is when you start handling gift cards.

xdissent 12y ago

Doesn't seem to show the card at all in Safari. Works in Chrome, however.

jessepollak 12y ago
Which version of Safari are you in? I've tested it in all of the latest versions, but it could easily be broken in an older one.
- xdissent 12y ago
  Looks like it's not Safari's fault - I'm using Disconnect, which blocked the highlightjs lib from loading from yandex.st.
  - jessepollak 12y ago
    Fixed :)
- mratzloff 12y ago
  Doesn't work on Lion: Safari 6.1.2 (7537.74.9)

goeric 12y ago

It'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.

squeaky-clean 12y ago
Same here, but aside from that, I think this is very neat. Maybe if instead of the card being grayed out before you enter input, it could be entirely invisible. But then the empty space above the form would seem strange at first.
- rurabe 12y ago
  or just the empty recognizable outline of a card (the rectangle with the rounded corners) with no fields. then on first keystroke populate the fields, etc.
jgrowl 12y ago
I also tried clicking on the card itself. Why not allow that? Otherwise maybe have a hover div to the right of the input fields that only is displayed while any of the credit card fields are active.

frik 12y ago

Mouse scrolling is broken on that page in IE 11.

tomhschmidt 12y ago

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

sullivanmatt 12y ago
Yep, example does not work for HTTPS users of GitHub. I use HTTPS everywhere, so I'm always defaulted to HTTPS where available.
- DatBear 12y ago
  And in this case, where not available as well.

wingerlang 12y ago

On 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.

dlhavema 12y ago
that would be a neat feature.. kinda hard to do the CVV thing though.. unless you have a "flip me" link somewhere...
- wingerlang 12y ago
  Well there is this one which flips https://news.ycombinator.com/item?id=6143604 https://news.ycombinator.com/item?id=6143604 And this one which doesn't https://news.ycombinator.com/item?id=6692075 https://news.ycombinator.com/item?id=6692075
chucknelson 12y ago
Was thinking the same thing about the "painful" descriptor. I'm thinking it was just a joke...?

muaddirac 12y ago

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

mcintyre1994 12y ago
I was about to say the same thing, also doesn't work for credit card number. I autocompleted in a phone number and it didn't show up at all.

pbreit 12y ago

That's a lot of code for a sliver of functionality. Does that concern developers these days?

mef 12y ago
If it increases credit card signups at all, it's worth it.

brandon272 12y ago

Interesting experiment! I'd like to see some data on how effective it is versus typical card entry fields. 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.

tomardern 12y ago

Anyone seen a similar implementation which doesn't need jQuery?

ceejayoz 12y ago
http://www.doxdesk.com/img/updates/20091116-so-large.gif http://www.doxdesk.com/img/updates/20091116-so-large.gif

aresant 12y ago

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

mahmoudimus 12y ago
(disclaimer: balanced employee) There's a direct statistical correlation between less fields and the amount of chargebacks received. So, yes, less is more for a conversion funnel, but do not assume that it comes without a cost.
- aresant 12y ago
  "direct statistical correlation between less fields and the amount of chargebacks received" Spot on and completely agreed. But in my experience getting that CC at nearly any cost, even @ the end of a long sales process, delivers net gains even measured against returns etc. For enterprise (eg anybody that can afford it) there are fraud prevention solutions in place to balance the outcome and I've been thrilled watching STRIPE strip away the complexity for "the rest of us". But point well taken, multiple considerations in testing anything in your funnel and always optimize to highest LTV / KPI. Point of reference for the above is spending the last ~10 years running CRO projects across dozens of verticals, millions of transactions.
- tnorthcutt 12y ago
  I'd be most interested in seeing the correlation between fewer fields and overall conversions, accounting for chargebacks. Neither conversions alone nor chargebacks alone tells the whole story.

wmeredith 12y ago

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

encoderer 12y ago

If you need something easy, nothing is better IMO than Stripe Checkout. It's insanely easy to integrate, and has an awesome (modal) payment form.

JoshTriplett 12y ago

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

mikeryan 12y ago

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

sbarre 12y ago
It worked fine for me on my Amex tests. 4-digit security code showed up in the right place, numbers were grouped correctly.
cdellin 12y ago
Did you try it? It gets the 4+6+5 and CVC on the front just right!

dshankar 12y ago

Looks 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.

logicallee 12y ago
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 this small I don't see how going with a small third-party solution is secure. - OP: why not sell this solution to a larger payment processor as a complete solution, so they don't have to develop it themselves?
- tokenizerrr 12y ago
  Because you couldn't just generate a similar image on the server-side if you're already asking for that information?
- benaiah 12y ago
  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-source library - not because I wouldn't trust a Google payment endpoint, but because this is totally under my control, and something from Google isn't. Not sure what you're talking about with the encoded image. Doesn't make much sense. There are no real security problems with this whatsoever. The problem is, unsavvy users may think there is, due to the visual resemblance of the onscreen card.
  - 12y ago

pestaa 12y ago

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

joshvm 12y ago
https://camo.githubusercontent.com/312e819c130acb5d17a5a8568c4ae6c315210dac/687474703a2f2f692e696d6775722e636f6d2f71473354656e4f2e676966 https://camo.githubusercontent.com/312e819c130acb5d17a5a8568... Same issue here, but that's what it should look like.
kevinday 12y ago
If you're looking at this and not seeing any difference between the "before" and "after" versions, it's because HTTPS Everywhere is redirecting all github urls to their SSL version, so http://jessepollak.github.io/card/ http://jessepollak.github.io/card/ redirects to https://jessepollak.github.io/card/ https://jessepollak.github.io/card/ then can't load any of it's javascript dependencies due to the http/https mismatch. Bonus points for the form still working right through all of that.
Zikes 12y ago
Same for me, the yandex domain they're loading hljs from seems to be blocked. The hljs call is in the same script block as the line to initiate the fancy stuff, so it fails and that line's never reached. Paste this into the console to run that manually: $('.active form').card({ container: $('.card-wrapper')})
- pix64 12y ago
  yandex was being blocked by Disconnect for me

joeframbach 12y ago

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.

iLoch 12y ago

This is great! There's also Skeuocard (http://kenkeiter.com/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!

gameguy43 12y ago
I like skeuocard's experience a lot. But it's not responsive, so it was a no-go for me. Ended up rolling my own. One great optimization skeuocard has is it only asks for the cc# at first, then the other fields appear as you type it in. So the form is less daunting at first.
Kequc 12y ago
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.

jacquesm 12y ago

Let me be the first to rain on your parade (sorry). If you're not 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/or the IPSP terms of service. Using this can result in terminating your merchant account or temporary suspension depending on how they take it. The reason why is that the logo's are only 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're authorized to capture the card details!). Please be careful, if you lose your merchant account it could be a while before you get it back, if ever.

the_ancient 12y ago
Overreact much? Most people that will be taking credit cards directly via a form like this will have merchant account and be authorized to use the credit card logos. If they are using a service like PayPal they are mostly redirecting to their service providers site for processing not taking the card info directly. The usage of the network logos are not as strict as you are implying here, even if you use paypal you can use the Network logos. https://www.paypal.com/us/webapps/mpp/logo-center https://www.paypal.com/us/webapps/mpp/logo-center There are many approved banners and logos that make use of the card network logos. I have never had a payment processing agreement where I was barred from using the Network Logos, nor would I sign up for such a service, in the off chance I am wrong please back up your claims with citations to actual laws or statements to support your claim
- jacquesm 12y ago
  > Most people that will be taking credit cards directly via a form like this will have merchant account and be authorized to use the credit card logos. Using logos in combination with a credit card capture form comes with a different set of rules (and a different contract!) than just being allowed to use some third party processor that does all the work for you. If you want to capture the cards yourself instead of outsourcing the job to an IPSP then you're going to have to be at a minimum PCI compliant. This goes for any company that stores, processes or transmits credit card information. The tipping point is somewhere around a million $ US per year. Below that the cost of being in compliance outweighs the fees the IPSP charges for their service handily. The word 'credit' in credit cards stands for 'trust'. https://www.google.com/search?client=ubuntu&channel=fs&q=origin+of+the+word+credit&ie=utf-8&oe=utf-8 https://www.google.com/search?client=ubuntu&channel=fs&q=ori... People trust those companies and by extension trust those logos. That's why when you use them you will be held to the rules so strictly because credit card companies do not like it when their logos are used to give an aura of trust to an otherwise non-trustworthy situation. Just the PDF about what you can and can not do visually with the logo runs to lots of pages. Yes, there are plenty of ways in which using those logos is absolutely ok, and where using this form is (probably) just fine. Everybody that is PCI DSS compliant can likely use it without any problem. Yes, there are also plenty of ways in which using this form is strictly against the terms of service, typically this includes everybody who is not PCI certified, which is almost every two bit merchant on the web that outsources their payment processing and credit card capture to some third party. So, if you use a 3rd party solution that serves up the payment form and that handles the card capture and subsequent processing for you and you have a contract with them rather than with the card company you can use the logos and nobody will care, mostly because you can't do much harm (such as your paypal example). But if you are in a situation where you have a merchant account but you are not the merchant of record (this means you are a sub-merchant, such as when using any one of a number of IPSPs) then using this form is most likely not a good idea. As for me backing up my claims, I'm not going to attach a copy of my merchant agreement to a comment on the web, you are totally free to disregard what I wrote. This advice is worth exactly what you paid for, and everybody that has a merchant account but is not the merchant of record (aka a 'sub-merchant' in payment processing lingo) is totally free to inspect their own personal copy and for everybody else this does not matter at all. Further reading on the subject: https://www.pcicomplianceguide.org/pci-faqs-2/ https://www.pcicomplianceguide.org/pci-faqs-2/ A list with a sample of payment facilitators (if you use one of these you are quite possibly not the merchant of record): http://www.mastercard.us/merchants/accept-mastercard/payment-facilitator.html http://www.mastercard.us/merchants/accept-mastercard/payment... Note that this is not an exhaustive list by a long shot. The mastercard FAQ which has a nice little blurb about who is and who is not a merchant or record: http://www.mastercard.us/merchants/assistance/faq.html http://www.mastercard.us/merchants/assistance/faq.html Also of interest: http://www.mastercardbrandcenter.com/us/images/acceptance_marks_v06.pdf http://www.mastercardbrandcenter.com/us/images/acceptance_ma... Less interesting (branding, not acceptance marks): https://www.mastercardbrandcenter.com/us/getourbrand/index.shtml?pageId=dl_1510&expertVisible=false https://www.mastercardbrandcenter.com/us/getourbrand/index.s... Oh, and an afterthought: there is yet another important logo, the VBV one, you can only use this if you're actually part of the program.

HarrietJones 12y ago

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

czbond 12y ago

Very Very cool!

kdd 12y ago

This code looks eerily similar to Stripe's jquery.payment (https://github.com/stripe/jquery.payment/blob/master/lib/jquery.payment.js https://github.com/stripe/jquery.payment/blob/master/lib/jqu...)

r00fus 12y ago

Looks nice, perhaps you can implement the Luhn algorithm to ensure the CC is not known-invalid (to prevent data entry error)? http://en.wikipedia.org/wiki/Luhn_algorithm http://en.wikipedia.org/wiki/Luhn_algorithm

BillinghamJ 12y ago
Validation on the expiry date would be nice too.

stock584 12y ago

Pretty nice, pretty similar to JS Skeuocard (http://kenkeiter.com/skeuocard/ http://kenkeiter.com/skeuocard/)

xj9 12y ago
I actually like this one a lot better. Not being able to enter information onto the credit card itself was frustrating.

timme 12y ago

There's nothing painful about a regular form with the minimum amount of fields.

simcop2387 12y ago

It doesn't seem to be working to tab between fields in Chrome. Once I'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.

MartynX 12y ago
It is validating that the card is in date, if you enter a date that is in the future, it will let you tab to the ccv field.

jakejake 12y ago

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'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.

kzanul 12y ago

This looks great and without using images - kudos!

ultimoo 12y ago

I'm no design or UX expert and this does look smooth. 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? 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.

robalfonso 12y ago
I think that assessment is fair. Consider though that many users struggle with matching the data they have on the card with what goes on the form. Specifically the cvv code since some vendors use a 4 digit code instead of the more mainline 3 digit code. So I see a valid use case in here in presenting them a reasonable facsimile of whats in their hand to match up.

r00fus 12y ago

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

smrz 12y ago

Can't tab out of the expiration date field FYI

leepowers 12y ago

This is neat, and I love the look and feel. The only problem is that it's completely unnecessary and possibly confusing for potential customers. But that's just my opinion. It would be interesting if someone would put this on their own payment page and share the conversion metrics. There's a few annoyances that threw me off: 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/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. 2) When entering an invalid date or credit card number there's no visual feedback. It's very common to be blind to your own input errors, which necessitates clear communication of error state. 3) Even more confusing, I can'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 "broken".

dclowd9901 12y ago

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

spicerguy 12y ago
> 2) Is it a great idea to broadcast someone's card numbers so clearly? The graphic is so obviously a credit card, it would be easy for any onlooker to spot and steal. yes - anything that signposts card data clearly to an onlooker is problematic, but any malicious shoulder surfer will probably be able to spot a payment page a mile off in any case. This might however, have a small possibility of encouraging opportunistic theft. I think the bigger threat to this probably comes from the networks (MC, VISA, AMEX etc) who get VERY possessive about mock-ups / card image facsimiles that use their logos. The brand logo protection that they enforce is pretty strict and I would imagine this approach would not be welcomed. I'd like to be wrong, but my experience with the networks makes me pessimistic.
- kethinov 12y ago
  I'm less concerned with the reuse of their logos and more concerned with the fact that their logos are implemented in HTML/CSS rather than as images, which means there will be subtle differences. Basically those aren't their logos. They're slightly inaccurate imitations. Most big brands will be upset if even a few pixels are off when their logo is displayed.
lakep 12y ago
You're right, point 2 is THE show-stopper for this. It looks amazing, but if amazon or the likes ever tried this I'd close my account - credit card security, in this day, is not the place for gimmicks. Sorry.

jmcejuela 12y ago

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

lugg 12y ago

Tab from expiry to cvc doesn't work in the interactive. Other than that, honestly, I was just impressed by the "boring" 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.

pointpointclick 12y ago

I can'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.

primitivesuave 12y ago

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 (http://kenkeiter.com/skeuocard/ http://kenkeiter.com/skeuocard/) with the simplicity of creditcardJS (creditcardjs.com). I love it!

cesarbs 12y ago

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

brainless 12y ago

Looks absolutely beautiful. But I stopped for a second and did not, at first, give my real card number. 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? Wow that's the power of crappy design fed to us for years.

xrt 12y ago

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

javierga 12y ago

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

izietto 12y ago

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

christudor 12y ago

For me the whole thing took too long to load. I didn't even see the card until I had filled in most of the data in the fields (and I was thinking, 'What's so different about this?'). 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 'Forget it'. More generally, while I do think that entering card details is a bit of a ball-ache, I don't think the solution is having a picture of the card on screen...

reledi 12y ago

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

graemian 12y ago

2nd coolest thing I ever saw, just behind Psy's Gangnam Style :-)

tangoalpha 12y ago

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't need to touch the mouse.

Sebguer 12y ago

Oh, 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.

ChrisArchitect 12y ago

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. Fun.