The anatomy of a credit card form
medium.com
medium.com
They failed, at the most important part of the form. The correct, i.e. the most user friendly solution is, obviously, to allow spaces (and optionally other characters, like "-,._") but ignore them when submitting the form. That way, users can type in the number any way they want. Using spaces to group digits makes it much easier to check the number after you've entered it (not that it's necessary, but I still often do it).
Edit: they seem to stick to this failure mode with other inputs as well, e.g. with the postal code input. In almost all circumstances, it's better to allow users to enter anything, and give feedback on whether it's correct or not (either when the focus moves to the next input, or better yet in realtime when the user is entering information, as long as you make sure that partially entered, potentially correct information is not labelled an error). For bonus points, reformat the entered information to some standard format (e.g. grupped dogits for card number) after the focus moves away.
15 numbers, 4 then 6 then 5. Yes, only 3 groups. And the CVV2/CVC2/CID is on the front and four digits, not three.
I do know a LOT of places where this gets missed, and a typo goes to the next field, but reflexive backspace correction also fails.
You can try it here http://codepen.io/anon/pen/WvygyO
VISA: 4242 4242 4242 4242 AMEX: 3782 822463 10005 Diners: 3056 930902 5904
[0]https://stripe.com/blog/jquery-payment / https://github.com/stripe/jquery.payment
As a matter of fact, you won't even have to worry about the expiry date format for the rest of your life. None of the valid YY or YYYY codes for the next 84 years (15-99, 2015-2099) collide with a valid MM code (01-12). There's no ambiguity. So just let the customer enter any 4 or 6 digit number, figure out which part is the month and which part is the year, and convert it into your preferred format with a few lines of JS.
This is especially important if you ever plan to expand into countries where nobody is used to the MM/YY format. If the customer enters 2207, it's obviously July 2022, not the 22nd month of 2007.
The instructions say "MM/YY", but do not indicate whether the month is required to have two digits, or just permitted to have two digits. My card says it expires 1/16 So when I key in 1, does a slash get appended? Probably not. Instead, it gets appended after 11. 11/6. now what?
It even works if you put the year first. 16/1 is valid, and it's clear that 16 is the year. Meanwhile, 1/61 either contains an invalid month or is too far in the future to be a valid expiration date.
NearlyFreeSpeech.net [1] does it right. It accepts anything between 3 and 6 digits (MYY, MMYY, MYYYY, MM YYYY, YYYY/MM, etc) and only throws an error if parsing it results in an impossible date.
[1] https://blog.nearlyfreespeech.net/2015/05/13/new-payment-fea...
Right now, the only "does this credit card number look right" validation they do in JS is to look for a known prefix digit, and the length of the number. Otherwise the send it to the server for processing.
This is silly. In 1954, the Mod 10 (AKA Luhn Algorithm) was designed specifically to catch people mistyping in account numbers and all credit cards use it. It's a check digit, where the last digit of your credit card number is based on the all the other numbers. It catches transposed digits, and mistyped digits, which are super common when asking a human to type in 15+ digits.
You can try the demo: https://s3.amazonaws.com/gabe-cc-form/index.html
https://medium2.global.ssl.fastly.net/max/800/1*QzxyS4KGIvCw...
Several developers on the team opined that it must be the worst idea in the history of input validation, yet the customer still wanted it that way.
... Except I don't have a zip code. Which usually meant I either had to prepay inside (and then go back inside to receive the remaining balance as cash) or leave my credit card unattended with the clerk while I filled.
>Note that the placeholder text includes a “/”, but this is not required to be typed by the user. We limit the input value to numbers only, so if a user does type a forward slash, it is not registered.
Frankly, I'd prefer that field to be split into two, but I'd be fine with a single field, if they didn't ignore slash. It's pretty annoying to see a form silently fail and ignore characters that the form itself seemingly required (by showing them in the placeholder). A cluster of numbers like 0515 for date is not very intuitive either.
In my opinion much better way is to allow characters like spaces, dashes and slashes, show them when they are typed, but strip them on validation and further operations, working with only numbers.
Edit: okay seems like it is more thought out than I assumed.
Things get fun if you try to go back and edit the number, though. Forms are hell :)
I don't think this form is going to work with those banks.
A couple of takeaways:
1. This has been a standard problem for twenty years now. Why are designers and developers still having to reinvent the wheel?
2. Reinventing the wheel is really hard. If you want to support international trade, card and address formats are a non-trivial problem. It's easy to get something 90% right, but those edge cases will kill you and piss off your customers.
I suppose in an ideal world the card industry could think about standardised industry-approved forms with international support and customisable CSS. Maybe they'll get around to it in another twenty years or so.
Considering the incredible size of the financial industry, its inability to create efficient friction-free payment systems is shameful.
Ahh, 3D Secure/Verified By Visa/MasterCard SecureCode.
It really needs to die right now. Basically it teachers consumers to fill in random iframes on merchant sites.
And the fact that the card industry thinks 3D Secure is secure or in any way a good idea is why they'll never make standardised forms.
With VbV and 3DS that liability passes back to the credit card company. Since the credit card company doesn't want that liability, and obviously there are no security holes in their system, then only one person can be responsible for not taking adequate care of their card and security details. Yep, you the consumer (read your small print).
Hence, by signing up for any of these programs as a consumer, you are shooting yourself in the foot.
Added to which, the program has been shown to be insecure, since if you hold the card in your hand (i.e. you skimmed the card), you can/could simply choose to reset your password: http://www.alphr.com/realworld/373768/the-security-hole-in-v...
If you know how to opt out of it, I'd love to know.
Impressed?
Meanwhile, in Malaysia, all credit card transaction must be in 3DS.
Joke aside sure, it's not the designer's fault. Every time I fill out a credit card form without even pulling out my card I cringe. Why do I need a physical credit card for this, I just authenticated myself with only something I know and not something I own and I know. And my authentication credentials are just written down on a piece of plastic. Why don't banks just host openid servers so I could authenticate myself and pay using that? It would be even more secure and convenient. Credit card security (for most card types) is a joke.
Bank-Authenticated direct-debit (like giropay.de) is also useful for this.
Bank authentication systems themselves aren't great here in the UK. I'd be much happier with a USB/Bluetooth gizmo that behaved like a chip+pin terminal+card combo: display the value on the device, confirm payment with a pin/password on the device, bypass the PC's possibly-compromised keyboard and display entirely.
With Apple Pay, I now get iOS notifications for all the purchases on my Amex card.
Barclays now let me use their iPhone app as a software 2FA (bank-specific hardware 2FA needs to die—not being able to check your online banking at the office or whatever is a major PITA).
Both Barclays and NatWest have TouchID in their iOS apps.
I'm hopeful that mobile might lead the banks and card issuers to turn this ship around and make things less crap.
It's actually very frustrating when I don't have the 2fa device on me.
By the time some people start typing, they are looking at the keyboard and not at whatever is changing in the UI. The people who might need this tooltip won't be the ones to see it.
There goes Australia and their 4 digit zip codes...
Is the name and zip actually used as part of a validation process? If not it should just be left out.
Postcodes are quite specific, they only cover around 1-30 addresses. My workplace has at least 4 postcodes to itself (different buildings). My home address shares the postcode with about 15 other houses on the same side of the road (odd numbers 1-31).
Minimal British address examples: "SW1A 1AA" (Buckingham Palace), "6, M1 4EX" (could be a house).
"As an extra security measure, we have to ask customers for the ZIP code associated with their card. There is a trade-off here: adding extra inputs to the form can increase bounce rates, but by adding it, our business is more secure and less prone to fraud."
I've implemented card payments on multiple occasions, but not once have I seen a credit card processor that offered to validate the zip code.
Unless the name and zip can actually be sent to the credit card processor, and they have access to that information based on the credit card number alone, I don't see the use. Which brings up names, how fare of can your name be? I know plenty of people who wouldn't think twice about leaving out a middle name that they hate.
On of our payment providers just told us today that by August 1st. 3D Secure will be required for all online transaction in the EU. It might be later, less than one month doesn't seem like a reasonable notice.
Honestly name and zip seems like something that's easily obtained by a scammer.
I don't know how many people actually use it, but it's definitely a common option. The idea is that it would be another layer in your anti-fraud protection, not that it would replace something else.
And I haven't met a bank that didn't ignore the middle initial when validating a credit card. Even though they all say "enter your name as it appears on the card".
Which just makes it easier for them to be stolen. If someone gets a hold of your card number they probably also have the record of what you bought. If you had it delivered to your house they have your first and last names and zip code. All they need is the CVV2 (pick a random number from one to one-thousand) and they're in the clear.
I really don't get credit card security at all. Seems to me to be a lot of smoke and mirrors that the banks just plaster over with insurance for when they have to give back stolen money. It doesn't actually prevent or deter theft, just sweeps it under the rug.
Zip codes are used for avs checks, along with house number, not the street.
Too many or few characters, like you point out as the case for Taiwan, would be the problem.
To say nothing of Iceland, the Faroes or Madagascar (3 digits) let alone Jamaica (2 digits, and only in Kingston and St Andrew elsewhere there's no zip code) or Somalia (2 letters)
They could place the capacitive fingerprint sensor where the ON/OFF button used to be, it would actually be a neat way to wake up the machine without typing a password too.
For now, I just have my credit card number memorized so I can checkout fairly quickly without having to fiddle with physical objects in my pocket.
Suggestion: instead of generating garbage-looking "verification code" I as a user would prefer to have a string of digits separated in groups. Imagine the experience of spelling the code in its current incarnation over the phone...
Nit: the passage about "getting rid of physical cards" by replacing them with Apple Pay. If you use your phone to pay, it's still a "physical card", albeit more hi-tech.
they do not want to be entering long strings of numbers (whether its a credit card number, bank IBAN number, prepaid card #, or a bitcoin address) into forms
they just want to pay
Either way the UX process was interesting, and I think helpful for those who haven't had the chance to think through the painful development of credit card inputs.
Except for the authorisation step, which could be done in other ways, most of the convenience is already in bitcoins. Any other payment URI scheme could do the same thing.
I was thinking something along the lines of some sort of new HTML "payment" tag so it could signal to the browser things such as "product details, price, available/preferred merchant payment method"
and then the browser would pay from an in browser wallet containing stored credit card numbers, or bitcoins or prepaid/voucher codes, or bank account information
Some browsers could outsource this by starting a separate wallet program altogether, sort of how some links on mobiles open up other apps like maps
Someone above mentioned bitcoin links, that be a very good example of how to do UI payment flow nicely, especially nowadays that
Eitherway I think credit card forms are anything but user friendly, even the cleanest of forms such as Stripe would dumbfound new internet users such as my mother who rightly asked before "is it safe for me to be entering my cardcode on the internet"
Apple Pay would be the right solution if it weren't so proprietary.
I think I know what they're trying to get at in the context of the form, but this doesn't do much for my confidence in how much care they take in protecting my number at the backend.
But, once you have a valid number, that's all it is, a number. So you still have to round-trip to the payment processor, via the server, to check the number represents an actual payment card, and has money available.
An enemy of password managers is for example the 4 boxes with 4 digits, as well as form-reloads on changing card types.
https://twitter.com/BritishGasHelp/status/620956147680432128
British Gas have JavaScript that actively prevents you from using LastPass because "as a business we've chosen not to have the compatibility with password managers".
I want to be a fly on the wall at the meeting where they decided that making security worse was a good idea.
What does tapping mean? And in what countries do you swipe nowadays? I also need to type in my pin so wouldn't say zero typing.
Interesting that the article didn't mention it as a validation point (only card number length), but testing their demo it does do the check.
The lesson here is that when you're dealing with those pirates that do the "Rachel from Account Services" scam cold calling, transpose two digits seperated by another digit. Don't monkey with the first 7 digits or the final digit. You can get those idiots to go all the way through verifying your (incorrect) card number, as the BIN/IIN is correct and Luhn check passes. Waste some time on double checking your card number before spewing vitriol and profanity on them.
"Good design is when your hopes and expectations come true".
So I ask again, why not?
Their tech is amazing. They autodetect credit card fields when you focus on them and show a little popover where you can choose the card that you want to use. Just click on the card and everything fills up.
http://dashlane.com - email me if you'd like a referral link to get 6 months of premium service for free, btw.
As to the whole fraud problem that intermediaries like Paypal or credit card companies are supposed to solve; this is orthogonal to the problems of authentication, authorisation, and consensus, which bitcoins solve. We could have both, such as banks, escrow, and arbitration (in the sense of having a third party decide if a transaction should proceed or not) even with bitcoins. We really do need better systems than what traditional internet money has done so far.
Anecdotally, the only time I have ever been defrauded of money was when my debit card was skimmed. The fraudsters kept trying to withdraw money, which I didn't keep in that account as I immediately took it elsewhere. It was the account in which I received my paycheque. The fraudsters were able to steal one of my paycheques, and the bank was completely ineffective in protecting me. I got no warnings of unusual activity, and I got no money back. I should have gotten some sort of warning, since someone was repeatedly trying to withdraw money from unusual locations from my empty account. Even my account history showed nothing. Not until I asked the bank after the money was already gone did I learn that the fraudsters had been attempting every day to withdraw the money.
How many stories like mine are there compared to bitcoin stories?
http://www.theukcardsassociation.org.uk/plastic_fraud_figure...
http://www.theukcardsassociation.org.uk/plastic_fraud_figure...