Visiting most e-commerce sites you’ll see a form like this on checkout:
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.
Pair a simple javascript with some pretty icons and you’ll have a form that looks great and simplifies the user checkout process.
Here’s an example of the finished 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.