jQuery Credit Card Dimmer

When shopping online, I’ve experienced a couple of checkout scenarios where as you type the credit card icons dimmed to show which kind of card it was.

The method is nice because you see at a glance what cards the merchant accepts and in a very minimal way feedback is given about the type of card you are using. Recently, I was requested for this feature on a project.

After quite a bit of searching with very little results, I decided to create my own.

The Icons

To make the effect work properly we are going to use a CSS sprite. This will allow us to “dim” the area of the credit card. My sprite is shown below. ( Icons are from Graphic Peel. )

CSS

We will then set it as a background image on a div. And use jQuery to shift the background image placement as the “type of credit card” is detected.

HTML

The text below “Credit card icons.” will not be shown as the CSS will hide it. However, the div itself will be the size of the first row of credit card icons. And this will be our “canvas” so to speak.

	Credit card icons.

CC#: 

jQuery Code

On every keystroke or keyup in the input field, ccinput, will run a bit of logic based on the type of credit card. In this example, if the number matches 4, 5, 6, etc… then shift the background image to the coordinating card. The last if statement makes it so that if you backspace or clear the field then it will “reset” the background positioning to zero.

Based on my research ( and here and there ), for simplicity’s sake:

Visa starts with a 4.
MasterCard starts with a 5.
American Express starts with a 3.
Discover starts with a 6.

Note: Diners Club also starts with a 3 but was not needed for this project. The backend of actually processing a card will be able to thoroughly detect if a card is real or not. The above is for the user interface aspect not for actual credit card processing.

Demo

Check out the working demo.

Update

An awesome reader, Andy, rolled the script into a jQuery plugin. Very cool. Check it at: http://pastebin.com/RbjLL2kN