Card
Web and SaaS
payment form ui
SHOW HN2014
376points
112comments
#27of 2,272 in 2014
Top 2%of 2014 by points
How HN took it
MixedNo clear lean
15 positive, 29 neutral or asking, 10 mixed, 32 critical, out of 86 comments about the project. Thread score -0.22.
Design: 7 for, 11 againstExecution: 4 for, 14 againstIdea: 3 for, 3 againstPrivacy: 0 for, 3 againstPerformance: 0 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Visually beautiful and well executed design
From 4 comments
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…
dshankar on HNThis 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…
protomyth on HNLooks 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…
brainless on HNGorgeous. 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…
HarrietJones on HN
Open source and self-hosted, so code can be audited
From 2 comments
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…
benaiah on HNLooks 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…
brainless on HN
Objections
Card visual may confuse users, who try to type on the card itself
From 4 comments
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.
goeric on HNOn 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.
wingerlang on HNIt'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…
JoshTriplett on HNI 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…
jakejake on HN
Flashy form may make users distrust payment entry
From 3 comments
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…
shogun21 on HNLooks 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…
brainless on HNSame here, I mean if I saw this on my paypal account I would kind of worried, looks too "flashy". But it looks gorgeous for sure and it's probably part of the future.
atmosx on HN
Unnecessary for a payment form and takes up space
From 3 comments
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…
leepowers on HNThis 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.
wmeredith on HNThere's nothing painful about a regular form with the minimum amount of fields.
timme on HN
Tab navigation and autocomplete bugs reported
From 4 comments
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…
simcop2387 on HNCan't tab out of the expiration date field FYI
smrz on HNTab 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.…
lugg on HNLooks nice, but doesn't play well with autocomplete in chrome (tab completing my name didn't show up on the card)
muaddirac on HN
Broken or inconsistent in some browsers such as Safari and IE 11
From 3 comments
Doesn't seem to show the card at all in Safari. Works in Chrome, however.
xdissent on HNMouse scrolling is broken on that page in IE 11.
frik on HNLooks 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.
cesarbs on HN
Requests
Add Luhn checksum validation for card numbers
From 2 comments
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
r00fus on HNGorgeous. 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…
HarrietJones on HN
Support more card types such as Diners Club and JCB
From 1 comment
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…
harlanlewis on HN
Support password manager and autofill
From 1 comment
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?
r00fus on HN
Run conversion or user testing
From 2 comments
looks cool. Any A/B test results on conversion rates?
jpeg_hero on HNIf anyone ends up doing some user testing with this form, please let us know the results!
reledi on HN
Questions
Does it convert better than a standard form?
From 2 comments
looks cool. Any A/B test results on conversion rates?
jpeg_hero on HNInteresting 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…
brandon272 on HN
Alternatives named
Skeuocard
From 3 comments
You mean like this: http://kenkeiter.com/skeuocard/
xerophtye on HNPretty nice, pretty similar to JS Skeuocard (http://kenkeiter.com/skeuocard/)
stock584 on HNThis 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…
iLoch on HN
Stripe Checkout
From 1 comment
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.
encoderer on HN
creditcardJS
From 1 comment
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…
primitivesuave on HN