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.
> 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.
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.
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.
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?
This 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 the card to make them more prominent.
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".
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.
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.
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.
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.
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.
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
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.
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.
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.
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/) with the simplicity of creditcardJS (creditcardjs.com). I love it!
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.
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.
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!
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.
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.
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...
[+] [-] dclowd9901|11 years ago|reply
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|11 years ago|reply
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.
[+] [-] lakep|11 years ago|reply
[+] [-] dshankar|11 years ago|reply
[+] [-] atmosx|11 years ago|reply
But it looks gorgeous for sure and it's probably part of the future.
[+] [-] logicallee|11 years ago|reply
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?
[+] [-] protomyth|11 years ago|reply
This is great work.
[+] [-] chandrew|11 years ago|reply
[+] [-] leepowers|11 years ago|reply
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".
[+] [-] goeric|11 years ago|reply
[+] [-] squeaky-clean|11 years ago|reply
[+] [-] jgrowl|11 years ago|reply
[+] [-] jacquesm|11 years ago|reply
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|11 years ago|reply
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
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
[+] [-] wingerlang|11 years ago|reply
And as someone else said, I also tried entering ON the card rather than below it.
[+] [-] chucknelson|11 years ago|reply
[+] [-] dlhavema|11 years ago|reply
[+] [-] aresant|11 years ago|reply
Example Amazon:
http://i.imgur.com/aK8K4UY.png?1
Single name on card field Card # Dropdown for EXP
Example Stripe:
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|11 years ago|reply
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.
[+] [-] r00fus|11 years ago|reply
http://en.wikipedia.org/wiki/Luhn_algorithm
[+] [-] BillinghamJ|11 years ago|reply
[+] [-] wmeredith|11 years ago|reply
[+] [-] timme|11 years ago|reply
[+] [-] joeframbach|11 years ago|reply
[+] [-] JoshTriplett|11 years ago|reply
[+] [-] brandon272|11 years ago|reply
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.
[+] [-] tomhschmidt|11 years ago|reply
[+] [-] sullivanmatt|11 years ago|reply
[+] [-] primitivesuave|11 years ago|reply
[+] [-] ultimoo|11 years ago|reply
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|11 years ago|reply
[+] [-] stock584|11 years ago|reply
[+] [-] xj9|11 years ago|reply
[+] [-] iLoch|11 years ago|reply
[+] [-] Kequc|11 years ago|reply
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.
[+] [-] gameguy43|11 years ago|reply
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.
[+] [-] kdd|11 years ago|reply
[+] [-] christudor|11 years ago|reply
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...