Upload the "images" and "js" directory into your site.

Link to the location of your cardcheck plugin. You should use the minified version in production.

			
<script src="js/cardcheck.min.js" type="text/javascript"></script>
 

Don't forget to upload the images to your server. The directory included with cardcheck.js includes the folder called "images" that contains the default credit card type icons you see in the demo (Visa, Mastercard, etc). You can easily replace these icons with any other ones that you may have. The sizes do not matter, just the naming scheme.

Basic Initialization

You can get off the ground running without having to pass any settings. Although CardCheck is highly configurable, you do not have to be a javascript expert to use this plugin.

$(document).ready(function() {
	$('#credit-card').cardcheck();
});

Initialization With Custom Settings

Card Check is highly configurable so that you can adjust most of the functionality. Here is an example of how to initialize Card Check with some settings. Learn more in the API Settings section.

$(document).ready(function() {
	$('#credit-card').cardcheck({
		iconLocation: '#accepted-cards-images',
		allowSpaces: false
	});
});

Alternate Methods for Initializing Card Check

Pass an input directly to cardcheck.js as the first parameter. Learn more in the API Settings section.

$(document).ready(function() {
	
	// Method #1 via jQuery Selector
	$('#credit-card').cardcheck({ iconLocation: '#accepted-cards-images' });
	
	// Method #2 - first param = element, second param = options
	$.cardcheck('#credit-card', { iconLocation: '#accepted-cards-images' });
	
	// Method #3 first param defines element through input option along with other options, Second param ignored
	$.cardcheck({ input: '#credit-card', iconLocation: '#accepted-cards-images' });
	
});

Chainable

Chain additional jQuery methods after initializing cardcheck.js.

$.cardcheck('#credit-card').addClass('myclass');
 

StandAlone NEW

You control the entire implementation. Copy the code below and paste it in your console.

var myCard = CardCheck({ allowSpaces: false });


myCard.onValid(function(card) {
	alert(card + ' is valid');
});

myCard.cardNumber('4012888888881881');
 

You can access the internal instance of the CardCheck object by doing the following:

var myCard = $('#credit-card').cardcheck().cardcheck('instance');

// This allows you to chain as many callbacks as you want 
myCard.onValid(function(card) {
	console.log('callback1');
}).onValid(function(card) {
	console.log('callback2');
});
 

Manually Fire Evaluation NEW

There may be some edge cases where the plugin does not fire automatically. On these cases we allow you to manually call the evaluation method on an instantiated cardcheck element. This example should NOT be implemented, but proves the flexibility of the plugin.

var creditCard = $('#credit-card2');

creditCard.on('cc:onValid', function(event, card) {
	console.log(card);
}).cardcheck();

// Don't manually manipulate the internal instance properties
// You can... but there is probably a better way to achieve what you want.
var instance = creditCard.cardcheck('instance');
instance._cardNumber = '4012888888881881'; 

creditCard.cardcheck('evaluate');

acceptedCards:  [
	'visa',
	'mastercard',
	'amex',
	'discover',
	'diners',
	'jcb',
	'maestro'
]

$('#credit-card').cardcheck({
	acceptedCards: [
			'visa', 
			'mastercard'
		]
});

<?php 
// Here are two example in PHP for how to accomplish this
$credit_card = '4111 1111 1111 1111';

// Simple string replace
echo str_replace(' ', '', $credit_card);
// Outputs: 4111111111111111


// String replace with preg_replace
echo preg_replace('/\s+/', '', $credit_card);
// Outputs: 4111111111111111

?>

$('#credit-card').cardcheck({
	enableIcons: false
});

{ iconDir: "http://www.example.com/images/" }

{ iconDir: "images/" }

$.cardcheck({
	input: '#credit-card'
});

Additional Settings Adding Card Types

There are a couple additional settings that are not included above as they involve advanced configuration of the plugin. They really should only need to be edited if one is adding additional credit card types. The uncompressed source code is fairly well documented to support you in this and the actual options are as follows: niceNames, regExpNumCheck, regExpApprox, startNum, and cardLength. Get in touch if you're looking to add a credit card type and we'll assist you in crafting the proper settings.

This is the HTML and scripts used in the demo above. The classes you see here (control-group, controls, pull-left, etc.) are used with Twitter's Bootstrap v2.3.1 CSS.

<!-- Credit Card Number Input -->
<div class="control-group">
    <label class="control-label" for="credit-card"><strong>Card Number</strong></label>
    <div class="controls">
        <input class="xlarge" id="credit-card" name="credit-card" type="text">
        <span id="credit-card-type-text" class="help-inline"></span>
    </div>
</div>

<!-- Card Images Output -->
<div class="control-group">
    <label>Accepted Cards</label>
    <div class="controls">
        <div class="pull-left" id="accepted-cards-images">
            <!-- Icons Automatically Inserted Here -->
        </div>
    </div>
</div>

<!-- Script to control the card input -->
<script type="text/javascript">

// Make sure that this code goes within a doc ready
$(document).ready(function() {
    
    // Step #1: Cache Selectors
    var creditCard = $("#credit-card"),
        cardGrandParent = creditCard.parent().parent();
    
    // Step #2: Setup Callbacks on Events
    creditCard.on("cc:onReset cc:onGuess", function() {

        cardGrandParent.removeClass().addClass("control-group");

    }).on("cc:onInvalid", function() {

        cardGrandParent.removeClass().addClass("control-group error");
        $("#credit-card-type-text").text("");

    }).on("cc:onValid", function(event, card, niceName) {

        cardGrandParent.removeClass().addClass("control-group success");

    }).on("cc:onCardChange", function(event, card, niceName) {

        $("#credit-card-type-text").text(niceName);

    // Step #3: Initialize the cardcheck plugin
    }).cardcheck({ iconLocation: "#accepted-cards-images" });

});
</script>

Testing ensures the stability of the internals of the stand-alone script. The jQuery plugin is only adding a listener to the core and providing card images. View the tests