This is very cool. @Copypastaa My experiences have been largely the same. I spend most of my time working on actual commerce infrastructure — backend and front end. I've found that even the faintest hint of skeuomorphism rarely works. Most products would be better off covering as many validation and parsing cases as possible, leaving formatting for last. By validation I mean luhn testing cards, but also doing things like enforcing a minimum length of 4 for the CVC on an Amex card vs 3 for others. By parsing I mean things like letting the user enter whatever they want and then doing things like regexing out punctuation when you parse the view value into a data model. Formatting is the trickiest. Doing things like adding spaces to a card number has far more edge cases to contend with. You have to anticipate people pasting data, moving the cursor to places you don't expect, and all kinds of other weird behavior. In certain cases it can add to the experience but it's something that requires mountains of unit and Selenium tests to get right.

Two way data binding frameworks like Angular are particularly well suited for this kind of problem. The ability to define a parsing and formatting pipeline for translating from/to input values to/from objects. Might think about creating a companion directive to my WIP on Angular CC form validation (https://github.com/bendrucker/an...).

@jessepollak Will do. No promises since as mentioned above it's not really something I'd justify putting on my todo list for my applications. On the other hand it's a one hour project, maybe less. If just one of the people groveling in GH issues would actually sit down and write some code it'd already be done :)

This one is awesome

Congratulations on shipping something and putting it out there! Is there any a/b tests behind this? Because to be honest I don't think this will increase conversion rate in most cases. The only cases were I could see this helping with the conversion rate would be website / project / etc targeted at the design crowd or on premium products. Happy to be proven wrong though :)

This project just started out as me wanting to implement credit card faces and logos in CSS. I'd see a lot of things done (like Skeuocard), but thought that most of them were pretty ugly, so I was curious to see if I could make beautiful and reusable image free components for the web. After getting all the design done, I realized that it might be nice to bundle it into something that people could drop into their checkout and out came Card. Happy to answer any questions! Disclaimer: I'm yet to deploy this in a production environment, so I don't know the actual affects on conversion — would love to see some testing on that.

On an indirect product note, this was one of a few side projects that's been sitting on my computer for a long time. I committed the bulk of code in December, but just never got around to finishing up that final 10% (even though I knew that it was likely something people would get excited about). I think there two main reasons I do that with projects. 1) Often, the last 10% isn't nearly as exciting as the first 90%. With 'real' work already taking up almost all my time, it can be tough to commit free time to the 'slog' of pushing side products out the door. It took me just committing a Friday night to it — started at 5pm, forgot about time, and walked 3mi home from the office at 3am (my bike was broken :/). 2) Fear of people not liking it is definitely another factor that keeps things on my computer. When things aren't public, it's really easy to day dream about them being successful. Once you put them out there, though, the fantasy fades and the likely truth is that not that many people care. Don't think there's much I can do about this fear besides push back on it. Figured I'd share :)

@bendrucker — A bunch of people in the Github issues requested an Angular directive, so if you do that, let me know and I'll link back to it.

Very interesting. While it may not help with conversion, I can see it helping with a stickiness factor as part of customer experience (until it became a universal feature, but then that's a validation of the idea). Nicely done.

Either way nice execution on the idea. I would be very curious to see this deployed live on a site large enough to support good A/B testing. This could be one feature of a larger product that helped automatically implement best practices for checkout pages like the things @bendrucker is discussing.

great product