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 may obtain your IMA through a bank or PSP (Payment Service Provider).
For the sake of this scenario, we will assume you are not PCI compliant and elect to go through a PSP to obtain your IMA and to process credit card transactions. At that point, you are at the mercy of whatever PSP you choose to go with. If their credit card form asks for the card type, then by proxy you are asking for the card type. Obviously, you decide what PSP you want to use, so you can find one whose credit card form has the functionality you want.
The good news is that the convention is changing to more of a user experience convention.
Designmodo has a great article called The Ultimate UX Design of: the Credit Card Payment Form.
Here are some quotes from that article:
Help people succeed
Will you help your users succeed in their purchase, or rather make it really hard for them? It’s up to you.
If you ask for tons of optional information, therefore risking distraction, have unclear labels, or don’t inform what type of credit card you accept, your call to action is obscure and data transfer isn’t safe… don’t be surprised if many people will leave the process without completing the payment.
You’re not helping them. You’re creating additional obstacles.
Amazon tries to be as simple as possible
They also minimized the information needed to just “Card number”, “Name on card” and “Expiration date” fields. In most cases they don’t even ask for the infamous CVV code (though how they manage to proceed with the transaction without the CVV is somehow mysterious).
Amazon tries to help their customers to go through the process as quickly as possible.
Do the job for them
Gumroad choose the same way of pointing out to the user that they know what kind of credit card you’re using.
Technically it’s rather simple. Credit card numbers are created in a consistent way. American Express cards start with either 34 or 37. Mastercard numbers begin with 51–55. Visa cards start with 4. And so on. This information can be used to detect what type of credit card someone is using simply by looking at their credit card number.
Comments to this answer, since removed, brought up another question:
Do you have to display credit card logos?
With respect to displaying credit card logos @ChrisLively mentioned the following:
The reason sites put the logos up and ask the user to select is because VISA, MC and others either require it or give slightly better rates when you do. Period.
He did not cite a source, but @alastair mentioned the following later:
The bit about displaying logos is part of the scheme rules (requirements of which are typically passed on to merchants by their acquirer); MasterCard’s website mentions that it’s compulsory. I’m not sure where VISA and AMEX mention it (or whether they mention it) on their websites.
In the MasterCard Acceptance Mark Uses source @alastair cited, it says the following:
Display the Acceptance Mark at parity with all other acceptance marks/symbols/logos also displayed (with the exception of MasterCard POI locations in the U.S., where a specific regional Standard that permits otherwise exists. Refer to MasterCard Rules, Rule 5.11.1 “Discrimination” of Chapter 15, “U.S. Region Rules”).
This is sort of confusingly worded. Due to the use of the word parity in that statement, it seems to me that you only have to show their logo if you show other logos, as parity means equivalent to, or a state of equality. I could be wrong though, it doesn’t seem to be very clear.
Later on the same page, it seems to clarify things a little bit more:
Use on Internet Merchant Locations
At internet merchant locations, cardholders must be able to determine immediately that the particular brand is accepted. The most effective way to ensure this is to display the appropriate Acceptance Marks on the merchant’s home page. At the very least, the appropriate Acceptance Marks always must be displayed where payment options are presented.
So here, the last sentence MasterCard states that Acceptance Marks always must be displayed where payment options are presented. However, they don’t tell you what happens if you don’t.
In conclusion, it seems that you should display credit card logos, but I’m not sure if it’s an actionable offense if you don’t. If anyone has a source that clarifies whether or not it is, I’d love to know and update this section.
The last thing I want mention piggybacks the original question by asking:
How can I automatically detect the credit card type so I don’t have to ask for it in the form?
So for those who are curious about or don’t know what the breakdown of the credit card is, I found an article on Mint.com that has an info graphic that breaks things down rather well. As a bonus, it also shows you how validate a credit card number with your mind by using the Luhn algorithm:
Now, as you should have noted from the info graphic, we are able to determine the type of a credit card by looking up the first 6 digits of the card number. These first 6 digits make up what is called the credit card’s IIN (Issuer Identification Number) or BIN (Bank Identification Number).
There are a few ways you can perform a lookup of an IIN:
Make your own database comprised from the known IINs listed on Wikipedia for you to query. This list is pretty much outdated, however.
Use BinBase’s lookup feature.
a. You only get a limited amount of free lookups and then you have to purchase a license.
Go through ISO by purchasing ISO/IEC 7812-1:2006 and/or ISO/IEC 7812-2:2007.
a. ISO/IEC 7812-1:2006 specifies a numbering system for the identification of issuers of cards that require an issuer identification number to operate in international, inter-industry and/or intra-industry interchange.
b. ISO/IEC 7812-2:2007 is one of a series of International Standards describing the parameters for identification cards, and the use of such cards for international and/or inter-industry interchange. It describes the application and registration procedures for numbers issued in accordance with ISO/IEC 7812-1.
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 Amex cards will usually check the list first preferring to use their Amex, but if it’s not listed they will (begrudgingly, in my experience) fall back to their Visa or MC.
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.
If the consumer says it is an American Express card yet enters more than 15 digits, you can check against the first digits of the card to cross-check the type of card and, if that matches, give an error that extra digits were entered. Without that cross-check, the source of the error may be harder to figure out.
Also, it simply a way to verify the credit card. It’s a check. It’s also very helpful for the consumer. If he intends to pay with his Visa and he grabs his wallet and starts type 5455… he may then say “Whoa I didn’t want the MasterCard.”
The number of digits really isn’t an issue. The first set of numbers determine the type of card so they don’t need all the numbers.