jQuery Plugin For User-Friendly Credit Card Input Field

A simple jQuery plugin to check and display the credit card type as the user types, and to provide Bootstrap validation classes for Luhn check once the correct length has been verified.

See also:

• Credit Card Validator Plugin with jQuery
• jQuery Credit Card Input Mask Plugin - Credit.js
• jQuery Plugin For Easy Credit Card Inputs - Creditly.js
• jQuery Credit Card Form Formatting Plugin - Payment

How to use it:

1. Include the necessary jQuery library and Bootstrap's CSS in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

2. Include the jQuery creditCardValidator plugin after jQuery library.

<script src="jquery.creditCardValidator.js"></script>

3. Create a text field for credit card input.

<input id="checkout_card_number" class="input-text form-control" type="text" size="19" maxlength="19" data-stripe="number" placeholder="1234 5678 9012 3456">
<span class="payment-errors required"></span>

4. The CSS to add a default credit card image into the credit card input.

#checkout_card_number {
  background-image: url(cards.png);
  background-position: 3px 3px;
  background-size: 40px 252px;
  background-repeat: no-repeat;
  padding-left: 48px;
}

5. The Javascript.

var $cardinput = $('#checkout_card_number');
$('#checkout_card_number').validateCreditCard(function(result)
{

if (result.card_type != null)
{
switch (result.card_type.name)
{
case "visa":
$cardinput.css('background-position', '3px -34px');
$cardinput.addClass('card_visa');
break;

case "visa_electron":
$cardinput.css('background-position', '3px -72px');
$cardinput.addClass('card_visa_electron');
break;

case "mastercard":
$cardinput.css('background-position', '3px -110px');
$cardinput.addClass('card_mastercard');
break;

case "maestro":
$cardinput.css('background-position', '3px -148px');
$cardinput.addClass('card_maestro');
break;

case "discover":
$cardinput.css('background-position', '3px -186px');
$cardinput.addClass('card_discover');
break;

case "amex":
$cardinput.css('background-position', '3px -223px');
$cardinput.addClass('card_amex');
break;

default:
$cardinput.css('background-position', '3px 3px');
break;
}
} else {
$cardinput.css('background-position', '3px 3px');
}

// Check for valid card numbers - only show validation checks for invalid Luhn when length is correct so as not to confuse user as they type.
if (result.length_valid || $cardinput.val().length > 16)
{
if (result.luhn_valid) {
$cardinput.parent().removeClass('has-error').addClass('has-success');
} else {
$cardinput.parent().removeClass('has-success').addClass('has-error');
}
} else {
$cardinput.parent().removeClass('has-success').removeClass('has-error');
}
});

---

This awesome jQuery plugin is developed by harrygr. For more Advanced Usages, please check the demo page or visit the official website.