Side note: I’m not sure if this should be called a jQuery plugin or a jQuery extension, or neither – so correct me if I’m wrong.  Either way, it uses jQuery and I hope people find it helpful.

Design Process

I chose to build it using the following features based on some classic PITA moments I’ve experienced with credit card forms, below. I also studied Google Checkout’s credit card form, as well as read this really great blog post about Apple’s checkout design.

Demo

Here’s a working demo.  Please don’t enter real credit card numbers since this page isn’t SSL encrypted.  You can generate test credit card numbers at this site, or you can use one of these randomly generated numbers:

American Express, 3705 9584 5057 067, 04/14
Discover, 6011 1111 1111 1117, 08/11
MasterCard, 5446 8823 7512 9691, 01/12

Features

Labels Inside Fields, iPhone style

The labels for each field are inside the field.  When you click in, the label doesn’t disappear until you start typing.

Dynamic Card Type Indication

There’s a simple algorithm you can use to determine a card number’s card type.  Therefore, users don’t need to select their credit card type from a drop down menu – you can do it for them, automatically.

Easy Expiration Date Entry

The user can enter “8″, and then they tab out it’ll format to “08″.  It’s personal preference, but I prefer input fields over drop down menus.  Usually you can type when you have a drop down menu selected, however – not all users are aware of this and use their mouse to select from the drop down menu.  Furthermore, that function doesn’t always function as anticipated.

Validation

• Checks to make sure it’s a valid card number – this happens on the front end, prior to the info being sent to the payment server
• Checks to see if it’s a valid type of card offered
• Checks to make sure the card isn’t expired
• Makes sure each required field is filled out

Download the plugin

You can download a zip here, get the latest on github, or get a copy from the plugins.jquery.com site.

Design Inspirations

PITA #1: We don’t Accept that Kind of Card

I just entered my entire credit card, billing address, security code – and now you’re telling me you don’t take Amex? I know you have the logos there, but I didn’t see them.  Man, couldn’t you have told me before somehow?

PITA #2: Select your Card Type
Did you know that every single credit card in the world can be identified by its numbers based on the card type? Therefore, it’s literally not required to force you users to select their card type from a drop down menu

PITA #3: January… February, March… December
When was the last time you saw a card that said “August” on it?  Credit cards don’t have the months written out. The format is MM/YY… not August/2011.  So why the hell do I have to select August from a drop down menu? (As an aside, maybe there’s some security reason for it?).  I’m aware that some credit card gateways want a string for the card type (“Visa”, “Mastercard”), so maybe it’s sheer laziness of the developer/designer.

Got a PITA you want to add? I’m only one person of many. Comment below and I’ll make sure to consider it for an update to the form.