User-Driven jQuery Credit Card Form Plugin
I recently studied and designed a cc form plugin for jquery. It’s open source – get the latest at github, download a zip here, or view it on the plugins.jquery.com site.
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.
13 Comments
Trackbacks/Pingbacks
- エクスクラメーション アイ - [...] $.galleryFocus() jQuery illuminate animate-textshadow.js User-Driven jQuery Credit Card Form Plugin HTML5 Drag & Drop [...]
Awesome plugin!
Test
This is fantastic, thank you.
Great, except in Chrome a field is not selectable with mouse (unless one hits a point right at the start of text), and entered text (black) appears on top of the grayed text. This is only in the download, as your example above doesn’t have these issues.
The solution was to use the jquery.payments.js from this page. Paths to CC images then need initial / removed if not running on server.
I was wondering if you could explain “Paths to CC images then need initial / removed if not running on server” a bit further? I’ve taken the jquery.payments.js form this page and implemented it, however I don’t understand the changes I need to make to get the credit card images to display, as you mentioned. I found where they cc sections are located in the .js but I don’t know what to change.
change the path from /images/ to images/
delete the first /
in the jquery.payments.js file
Would be nice if you had some callbacks and events we could use.
For example if we want to do something when the whole form is valid it’s a bit hard as it is.
I’d like to be able to call the validate methods from my own code to determine if the form is valid since I am using this plugin within a larger framework. For example I’m not using the submit button (actually, i’m only displaying the CC Number, Expiration Date, and Verification Code. My Page has a ‘Next’ button and I’d like to be able to verify that there are no errors prior to moving to the ‘Next’ Page.
Is there any way to do this? I looked into the code and saw the validateCC method for example, but when I try to call that from my code I get “validateCC is not defined” error.
Any help would be appreciated!
I can’t get the form to save the credit card info to process ? How is it done ?Thx
Adoro me mostrar peladinha na web cam
Hi,
This plugin is not working in IE8. Pleas suggest
PITA – if you put the labels int the fields as values, you might submit the wrong data (yes, it’s good practice to check field values before sending to the gateway… yada, yada, yada). Better usage for that type of label is using the HTML5 placeholder element attribute OR include a label plugin or build a label feature into the CC plugin that applies CSS that puts a label/span on top of the field instead of changing the field value.