search

kenkeiter / skeuocard

Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface.
http://kenkeiter.com/skeuocard/
MIT License
3.24k stars 231 forks source link

Added ability to show both faces of the card at the same time. #120

Open cvrabie opened 10 years ago

cvrabie commented 10 years ago

I'm currently working on a project where the user base is skewed toward people with very little experience with computers. After doing some user testing I discovered that the only negative comment about our payment section is that not everybody understands right away that they need to flip the card (even though there's a big red/green button that says so ... i know).

I also saw a few other people make similar comments in the issues section, and a few websites like pingdom which chose to go with a two-face visual card option.

So I've made this patch that allows you to disable the flip and show both faces at the same time. It seemed to be better received by our targeted customers. Skeuocard two-face.

The solution is completely CSS based. You can make it work by simply adding the two-face class on the skeuocard element. Alternatively you can also specify it in the initialization parameters like this

new Skeuocard($("#skeuocard"), {
  twoFace: true
});

Not sure if you're interested in merging such a feature in the main branch but here it is. Also, thank you very much for making Skeuocard available in the first place!

brightcommerce commented 10 years ago

Nice work Cristian, I like it. I think would be our preferred way to display it too. Thanks for sharing.

jackspirou commented 10 years ago

@cvrabie this is an interesting feature. Can you merge into dev instead of master? Thx!

Zakay commented 9 years ago

Great! Exactly what it needed!

ghost commented 9 years ago

Just what I needed. Thanks.