
The anatomy of a credit card form - cellover
https://medium.com/user-experience-design-1/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bb
======
tomp
> “My card number has spaces. Do I enter my card number with spaces, or
> without?” To solve for this, we limit the input values to numbers only, so
> 0–9. So if a user types a space, it does not register and it does not affect
> the number format.

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.

~~~
nicboobees
Another example of doing it wrong is when the form splits the cc number into 4
separate boxes, and automatically skips along merrily to the next box as you
type it in. This might look nice and everything, but usually breaks if you try
to backspace your entry, or paste etc

~~~
DiabloD3
Also, dealing with AMEX screws up a lot of forms.

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.

~~~
samstave
I wonder if this has any thing to do with why amex was so infrequently an
available payment option online for so long...

~~~
xtreme
I doubt it. A more probable reason is the higher transaction fee charged by
Amex (3.5% compared to 2%).

------
TheOtherHobbes
UK banks sometime sends payments to a separate verification page which either
returns automatically or asks further security questions.

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.

~~~
tommorris
> UK banks sometime sends payments to a separate verification page which
> either returns automatically or asks further security questions.

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.

~~~
junto
The worst thing about these programs is the liability shift. Normally the
merchant is left on the hook for fraudulent transactions.

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...](http://www.alphr.com/realworld/373768/the-security-hole-in-
verified-by-visa)

~~~
tommorris
Thing is it is very difficult to _not_ be signed up for 3D
Secure/VbV/SecureCode. I've had friends who have gone through ludicrous
arguments with banks to get them opted out from 3D Secure.

~~~
david-given
I have been _unable_ to be opted out from 3D Secure. It just doesn't seem to
be possible. The argument the credit card companies usually use is that _they_
aren't forcing it on us; it's the merchants, who set a flag in the transaction
saying they require it.

If you know how to opt out of it, I'd love to know.

~~~
itsybitsycoder
It does seem to work that way, I'm sure I've signed up for Verified by Visa
but I've only had to use it once or twice. Which makes me happy, because I
hate it.

------
leni536
> Is this form safe and secure? We just add a lock icon, sure it's secure.
> Lock means secure, right?

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.

~~~
kuschku
Well, they actually do that – you could just pay per wire transfer
(Überweisung) if you live in the SEPA, especially in DACH it’s more common.

Bank-Authenticated direct-debit (like giropay.de) is also useful for this.

~~~
pjc50
Interesting. I was going to say "there's no web UI for driving the SEPA system
from a merchant's site", but is that what Giropay is?

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.

~~~
kuschku
That’s exactly what GiroPay is. The merchant can use it as simple as they can
use PayPal, but GiroPay then redirects you to the online banking backend of
your bank. Depending on bank, this can use 2-Factor authentication,
SmartCards, etc. Most banks use Smart Cards and 2-Factor authentication.

------
nothrabannosir
_> We realized that users may enter the ZIP code associated with their
personal address, instead of the code associated with their cards. To add
clarity, we added a note in a tooltip, which asks for the code from the
credit’s card billing address._

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.

~~~
tbrake
I noticed that too. I think a "Billing Zip/Postal Code" label would be clear
enough.

------
NolF
> ZIP code: Length must be minimum 5 characters, maximum 10 characters

There goes Australia and their 4 digit zip codes...

~~~
mrweasel
I don't get the name and zip code requirements, is that standard in some
countries? I only ever encounter the "Name on card" when shopping on US and UK
sites. Danish online stores don't care.

Is the name and zip actually used as part of a validation process? If not it
should just be left out.

~~~
dchest
From the article:

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

~~~
mrweasel
Is the zip sent to the card processing company? Do they check that the zip
matches your address? What if the customer just moved?

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.

~~~
eli
Yes. They are asking so that it can be sent to the credit card processing and
used as part of a anti-fraud algorithm. Have you implemented credit card
processing yourself or used something like Stripe? It's honestly a pretty
common option. At least around me in the North Eastern US, pretty much every
gas pump will refuse to sell you gas if you can't provide the billing zip for
the credit card.

~~~
mrweasel
We use multiple companies, all of which are "something like Stripe", to avoid
dealing with PCI requirements. I've never seen any of them check zip or name,
if you want added security you ask for 3D Secure/Verified by VISA. That will
either require the customer to login via their online banking solution of
enter the code sent to them via SMS.

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.

~~~
eli
Stripe actually has a checkbox in the settings to check the zip code and
address: [https://support.stripe.com/questions/what-is-
avs](https://support.stripe.com/questions/what-is-avs)

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.

------
newscracker
When I look at the logos on the top of the form, I feel like I should click on
the one (Visa/Mastercard/Amex/Discover) I'm going to use to tell the form
which one I'm entering the details for. Although this can be deduced from the
number, most online forms require the user to select it explicitly (although
most commonly with radio buttons or drop downs). This minor friction and
confusion could be avoided by just saying "We accept " followed by the logos.

------
adamsch
Apple should integrate Touch ID into their Macbooks and turn Apple Pay into a
service for ecommerce. Payment would be one tap, similarly to Apple Pay IRL.

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.

------
jimbobimbo
Nice write up.

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.

------
pmontra
Bug: enter a VISA number (example: the 4111 1111 1111 1111 test number), enter
an expiration date, enter a 4 digit security code. An error appears: "enter a
3 or 4 digit security code". I entered 4 digits so the message is
inappropriate. Probably it should be "enter a 3 digit security code", assuming
that all VISA cards have 3 digit codes.

------
yc1010
Has anyone actually stepped back and looked at the larger picture, what a
buyer wants to do is pay X (credit card is only one of them payment methods
available and not really popular in some countries)

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

~~~
jordigh
With bitcoins, I click on a bitcoin address in my web browser. That opens up a
bitcoin client with the information already filled in (amount and receiving
address). I then have to type my bitcoin password for the transaction to
complete.

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.

~~~
StavrosK
Bitcoin is the most convenient way of payment, bar none. I point my phone at
the QR code, keep my fingerprint on the sensor, the page refreshes, done. None
of the CC crap.

------
prof_hobart
>But we realized that the credit card number is not a “secret”. You can’t do
much with just a card number.

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.

------
amolgupta
Use Luhn's algorithm to validate the card number on client side ranther than
throwing an error from server.
[https://en.wikipedia.org/wiki/Luhn_algorithm](https://en.wikipedia.org/wiki/Luhn_algorithm)

~~~
grkvlt
Which is exactly what it does. Try entering a random 16 digit numer - it will
probably be invalid, but then edit the last digit until it is accepted.

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.

------
klausjensen
From a primarily selfish perspective, I would like developers to think about
password managers like Lastpass etc.

An enemy of password managers is for example the 4 boxes with 4 digits, as
well as form-reloads on changing card types.

~~~
tommorris
If you think that is bad, check this out:

[https://twitter.com/BritishGasHelp/status/620956147680432128](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.

------
Kiro
> Nothing beats tapping/swiping your card at a physical terminal. Zero typing
> required.

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.

~~~
viraptor
Paywave / Paypass / Tap & pay / whatever your country or bank calls it. With
NFC payments you don't have to type a PIN when using a card. Although you can
use extra PIN when paying using your phone.

~~~
jakobegger
In Austria you do need a PIN for contactless payments over 25€ (might depend
on your bank).

~~~
StavrosK
It depends on your account (you can set it higher if you sign a form).

------
markbnj
Interesting post, and I'm not surprised to see a diversity of opinion on the
design. Question: does anyone still use the CRC validity check for client- or
server-side validation of payment card numbers?

~~~
incarnate
You're talking about a Luhn check? I still see it as common practise,
particularly on the client side.

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.

~~~
markbnj
Yes, exactly. I had forgotten the name, and I also found it interesting that
it wasn't mentioned.

------
z3t4
Do user testing (watch them, ask them) to figure out what works or not.
Everything else is a waste of time.

"Good design is when your hopes and expectations come true".

------
OliverJones
Thanks for taking the time to think this through and write it up, Mr. Tomescu.
It's good stuff! All the grumbling notwithstanding.

------
thomasrossi
"supports credit card autofill" .. don't use it:) unless you have TouchID!

~~~
mynameisvlad
Uhh... Why not? Generally speaking, password managers are pretty good at
encrypting secrets, considering it's their only job and all.

~~~
thomasrossi
basically there are tons of browser plugins which listens to your keyboard, or
anyway see everything you enter in a form. One nice example was facebook color
changer;P

~~~
mynameisvlad
... And that is a problem with password managers why? It doesn't matter who
enters the credit card, you or your password manager, those would still get
it.

So I ask again, why not?

~~~
thomasrossi
About the plugins, you are right, it's weak anyway, my bad. To better answer
your question this is a paper explaining some critical vulnerabilities in the
concept of password managers (let alone the implementation)
[http://devd.me/papers/pwdmgr-usenix14.pdf](http://devd.me/papers/pwdmgr-
usenix14.pdf)

~~~
mynameisvlad
Your paper talks about vulnerabilities in _web_ password managers. A subset of
password managers as a whole. Most managers are desktop-based.

------
kjs3
You think CC #s are a pain? Try phone numbers.

------
gregschlom
I use Dashlane and stopped entering credit card and billing info manually 2
years ago :-)

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](http://dashlane.com) \- email me if you'd like a
referral link to get 6 months of premium service for free, btw.

------
jordigh
Ever since we've had cryptography, money on the internet has always seemed
unnecessarily clunky to me. Everyone should have a password, then it's just a
matter of encrypting who has how much money. While people make fun of how
"fake" bitcoins are (as if any other money were not just a slightly more
consensual mass hallucination), I really do like how they have demonstrated
that internet money can be a lot more convenient. I hope that bitcoins or
something like them become the standard for money online.

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.

~~~
pjc50
Bitcoin has shown how critical the fraud problem is. Between wallet loss and
exit fraud by bitcoin companies, bitcoin users have lost vast amounts.

~~~
jordigh
Do we have a comparison of how much is lost to fraud otherwise, without
bitcoins?

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?

~~~
pjc50
A few seconds of googling gives me UK figures of £479m fraud on a volume of
£573bn, which is under 0.1%, and much of that falls on merchants.

[http://www.theukcardsassociation.org.uk/plastic_fraud_figure...](http://www.theukcardsassociation.org.uk/plastic_fraud_figures/index.asp)

[http://www.theukcardsassociation.org.uk/plastic_fraud_figure...](http://www.theukcardsassociation.org.uk/plastic_fraud_figures/index.asp)

