509

Why do credit card forms ask for Visa, MasterCard, etc.? The simple answer is that 10-20 years ago, no one knew any better and it sort of just became the convention. A slightly more complex answer indirectly deals with PCI (Payment Card Industry) compliance. If you want to accept credit cards online, you have to have an IMA (Internet Merchant Account). You ...


246

I would generally always opt for the simplest solution. In this case, one single field for the user to type into. With split fields, such as the 4-box one you propose it adds in an extra cognitive load to the user. "Do I need to manually jump to each field?" "Will the system do it for me?" "What if I hit tab myself but the form automatically jumped - will ...


144

This answer and this answer cover some of the points nicely but for some reason nobody is discussing auto-fill support. Don't use 4 separate fields. First, it's annoying, a lot of those reasons are covered in the other answers. Also, a CC number isn't four 4-digit numbers, it's a single long number. Some credit cards don't even have groups of four, in ...


78

Entering a default month and date can be confusing to a user because you are presuming an answer. As a result, the user may skip over the field, if she is in a hurry, or assume it has been auto-filled after she entered her credit card number. A placeholder value is better, you can use: MM / YYYY This indicates to the user (a) what the format of the ...


77

This is also a way to let the user know which cards are supported by the merchant. If you only see Visa and Mastercard options available, you won't pull out your Amex and punch all the numbers in just to have the site tell you they don't accept Amex. Many sites do not accept Amex or Discover because of the extra fees they charge for processing. Users with ...


66

As someone who happens to use virtual credit cards, I'm strongly in favour of a single field. Every time I want to pay, there is a new card number generated for me by the banking app, and it's very tedious to have to copy-paste four times instead of one. I'm assuming here that your form won't fill the 4 fields if I paste 16 digits in the first one. Will it? ...


64

Funny thing, I just did the research on this recently, because we faced the same "issue" in our e-commerce shop. There is a good Baymard article referencing exactly this: Visually Reinforce the Credit Card Section One method we consistently observe to perform well for increasing users’ perceived security of sensitive fields is to visually ...


44

It probably is possible to design a system that figures that out on its own but it isn't great systems design to set it up that way. Different cards have different numbers of digits and it is best to explicitly state how the system should parse the values and number of digits it should expect. In the case of an error, it makes error handling easier as well. ...


44

Short Answer Ask for the name after asking for the credit card number, adopting either idea 2 or 3. Long Answer I recently did some admittedly basic research into this question. The reason for this research was that I had noticed the incidence of online credit card forms not requiring the "name on card" field seemed to be on the increase. This pattern ...


22

The simplest, if not necessarily the absolute best, solution is a single credit-card field that lets a user input any string of digits and spaces. It should be trivial for the server-side logic to strip the spaces out of the submitted string before checking whether the resulting string of digits is or is not a valid credit card number. If the user chooses to ...


19

My answer won't be voted up but you need this one if people from China is in your customer base, which is roughly 20% of earth's population. Most online transactions in China are though 'UnionPay' system in a certain stage, and most of them are not MasterCards, none are VISA cards (due to some nasty competition issue between UNIONPAY and VISA). It is a ...


14

How about, possibly in addition to logos, adding a link entitled something like "Security of your information" or "Security details". When the user clicks the link, a paragraph of security details is revealed (or opens in a new tab). This both reassures and possibly educates the user, depending on what you decide to put in the paragraph. As a user, whether I'...


13

Option 3 is the obvious choice. Both other options involve including an input that is not required for the majority of interactions. (Assuming most cards meet the definition "not Amex") Including unnecessary inputs breaks (the updated and revised version of) Steve Krug's first law of usability: Don't make users think or act unnecessarily It ...


13

Placeholders gone terribly wrong tl;dr When a placeholder doesn't clarify anything, it shouldn't be there. This is a great example of the negative impact of placeholder text pointed out by NN/g quite some time ago. Summary: Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check ...


11

Moonmeth shows some valid points about expectancy why you should ask for the name after the number Rule of least surprise: I would not hide the name-field completely and only show it when the number matches, instead I would always show the name field at second position. But when you enter a complete Number which is not american express, I would disable the ...


9

I would have no usable default, so if the user skips it, the page doesn't post, and it indicates the expiration date in a red outline, bold type, or some other fairly obvious means, mainly so the user knows they missed a field, as opposed to typoing a CAPTCHA or something like that. As stated above, I'd have MM-YY as defaults, and when the year elapses, ...


8

The last time I paid an invoice with PayPal it automatically detected the type of card I was entering. I was a bit surprised to not have to enter my card type but I was reassured after seeing the correct card type highlighted. TL;DR the whole thing but here is an article with a few other examples I found after a quick search: http://webstandardssherpa.com/...


8

Many early e-commerce systems were fairly unsophisticated and were just text boxes that passed payment data along, so they had to record the card type to pass along to the payment processing system. I think that has just become a standard that has stuck. Payment processing systems need to know what type a card is so that they can pass it on to the relevant ...


8

The fact that your credit card has been issued by Mastercard, Visa or American Express is not necessarily related to the method of payment. While this is true for chip-less cards, it is not for cards which embeds a chip. The Europay Mastercard Visa (EMV) standard specifies how the chip should behave, and one of the features of these chip is to support ...


8

Luke Wroblewski, a UX expert with great insights on building efficient forms, answered this question: use a single numeric input field (here’s a video of how this works). As you can see in the video above of Zachary’s demo, a single input field is used to capture credit card number first. If the credit card number is invalid an error is displayed that ...


7

There isn't really a "good" answer to your question, simply because they're engaged in bad practice. While that sounds negative, the simple answer is that they are not considering the User Experience properly: a flaw many designers and developers have, and one which I'm guilty of displaying myself on occasion. It may be that it takes too long, that they ...


7

It sends a signal on which payment methods you're accepting. Arguably, it could be equally well-accomplished by displaying the logos, but this way the customer who tends to ignore any extra information and immediately proceeds to fill in the numbers won't be told "Sorry, we don't accept Discover round here" after they've gone through the whole process of ...


7

I would suggest to make the bar on top of the page - in a different color - with an arrow pointing up to URL line and text saying something like "If you see small green lock in the URL line, then you know, that THIS page is secure." So that is for increasing awareness about what is REALLY important. And if you think so, this bar could have all those nice ...


5

Many of the answers I've seen have been very enlightening but I want to throw another angle based on my own experience. Many forms which are prevented to the user to collect money need to be signed off by banks and financial institutions involved. These often have very strict guidelines surrounding layout and format of the fields. Any deviation from this ...


5

Please follow the advice of others and do not attempt to reinvent the wheel. Not unless you have read and understood the ISO standard ISO/IEC 7812 that governs Payment card numbers, which, by the way, range from 13 to 19 digits and usually (but not always - read the spec) include a check digit that you can use to validate the input. Inserting spaces where ...


5

I simply can't believe they did this. First of all, it shows a definite bias. Cards starting with 4 belong to VISA, so I can imagine all other CC card companies complaining. Another thing: 4 groups of 4 digits, equalling 16 digits number. It sounds nice.... if it wasn't because I'm an AMEX owner. AMEX cards use the format NNNN NNNNNN NNNNN (4 digits + 6 ...


5

Display name, CC type, and add "Ending in" before the last 4 digits I agree with the comments and other answers. However, when it comes to a design suggestion based on your question I would do this: Display the last 4 digits but with "Ending in" added. This assures users that those 4 digits are the last 4 of the credit card number. Display the Name. Helps ...


4

Show as much information as you can without compromising security. The security team/audit may get excited if you report directly "CVV mismatch" as there are only 999 alternatives. BUT this does not mean that you have to fall back to the generic "Card Declined" error. If you are not allowed to be explicit, then categorise in a useful manner, e.g. Incorrect ...


4

Why do web designers force users to enter credit card numbers without hyphens or spaces? Laziness. In general, super-strict form field format requirements rarely benefits the end user. It's typically implemented that way due to lax parsing on the back end/status quo/low priority. Which is unfortunate.


4

I think Card.js is my favorite user experience when it comes to adding cards. Not only it lets you type in very quickly (single fields etc.), they also show you where those fields are on your particular cards so you don't have to wonder where's expiration date or CVV. I recommend you check it out.


Only top voted, non community-wiki answers of a minimum length are eligible