Visiting most e-commerce sites you’ll see a form like this on checkout:

Empty form flow

It’s pretty straight-forward and simple, but we can refine it a little further by auto-detecting which credit card the user has entered, rather than asking them to specify it manually.

So how’s it done? Every credit card type has a specific number (or 2 numbers) that it starts with. Visa always starts with 4, American Express uses 34 & 37 and Mastercard uses 51-55. You can find a full list including other cards over at Wikipedia.

Credit card info

Pair a simple javascript with some pretty icons and you’ll have a form that looks great and simplifies the user checkout process.

Credit card types

Here’s an example of the finished form.

Credit card form

If you shop around the internet, you’ll notice that many sites have started doing this kind of credit card detection. It’s a simple adjustment and a great way to take away another task the user has to do.