Show HN: Card – An interactive CSS3 credit card form • Hacker News Board

Re: Show HN: Card – An interactive CSS3 credit card form

#61

Post by ultimoo » Wed, Jun 04, 2014, 9:01 PM UTC

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.

Re: Show HN: Card – An interactive CSS3 credit card form

#62

Post by r00fus » Wed, Jun 04, 2014, 9:05 PM UTC

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?

Re: Show HN: Card – An interactive CSS3 credit card form

#63

Post by BillinghamJ » Wed, Jun 04, 2014, 9:05 PM UTC

r00fus wrote: post #45

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

Validation on the expiry date would be nice too.

Re: Show HN: Card – An interactive CSS3 credit card form

#64

Post by smrz » Wed, Jun 04, 2014, 9:06 PM UTC

Can't tab out of the expiration date field FYI

Re: Show HN: Card – An interactive CSS3 credit card form

#65

Post by harlanlewis » Wed, Jun 04, 2014, 9:10 PM UTC

Igglyboo wrote: post #59

wwarren wrote: post #4

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

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

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.

Re: Show HN: Card – An interactive CSS3 credit card form

#66

Post by leepowers » Wed, Jun 04, 2014, 9:11 PM UTC

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

Re: Show HN: Card – An interactive CSS3 credit card form

#67

Post by dclowd9901 » Wed, Jun 04, 2014, 9:18 PM UTC

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.

Re: Show HN: Card – An interactive CSS3 credit card form

#68

Post by jmcejuela » Wed, Jun 04, 2014, 9:19 PM UTC

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

Re: Show HN: Card – An interactive CSS3 credit card form

#69

Post by iLoch » Wed, Jun 04, 2014, 9:50 PM UTC

This 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!

Re: Show HN: Card – An interactive CSS3 credit card form

#70

Post by pix64 » Wed, Jun 04, 2014, 9:53 PM UTC

Zikes wrote: post #48

pestaa wrote: post #36

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

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')})

yandex was being blocked by Disconnect for me