jQuery Credit Card Form Formatting Plugin - Payment

jQuery Payment is an useful and simple jQuery plugin for E-commerce website to format and validate credit card form input field. Supported card types: Visa, MasterCard, American Express, Diners Club, Discover, UnionPay, JCB, Visa Electron, Maestro, Forbrugsforeningen, Dankort.

Features:

• Card number formatting
• Expiry formatting
• CVC formatting
• Restrict Numeric
• Disable input of invalid number
• Data validation on submit
• Cross browser. Supports old IE 7/8.

See also:

• Credit Card Validator Plugin with jQuery

How to use it:

1. Include the latest version of jQuery library and jQuery Payment Plugin on your website

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.payment.js"></script>

2. Create a input field for credit card number

<form validate autocomplete="on">
<h2>Card number formatting</h2>
<input type="text" class="cc-number" pattern="\d*" x-autocompletetype="cc-number" placeholder="Card number" required>
</form>

3. The javascript

<script>
jQuery(function($){
$('.cc-number').payment('formatCardNumber');

$('form').submit(function(e){
e.preventDefault();
$('input').removeClass('invalid');
$('.validation').removeClass('passed failed');

var cardType = $.payment.cardType($('.cc-number').val());

$('.cc-number').toggleClass('invalid', !$.payment.validateCardNumber($('.cc-number').val()));

if ( $('input.invalid').length ) {
$('.validation').addClass('failed');
} else {
$('.validation').addClass('passed');
}
});
});
</script>

Change logs:

v3.0.0 (2016-09-28)

• update

v2.0.0 (2016-08-24)

• update

v1.4.4 (2016-08-16)

• update

v1.4.3 (2016-07-07)

• update

v1.4.2 (2016-06-02)

• update

v1.4.1 (2016-05-04)

• Reduce Elo formats a bit more.

v1.4.0 (2016-05-03)

• Add support for 'Elo' credit card brand

v1.3.3 (2016-04-19)

• Allow 506-prefixed maestro cards.
• Fix single digit expiry > 2 with leading zero.

v1.3.2 (2015-08-06)

• Change MasterCard range to 51-55

v1.3.1 (2015-08-05)

• Fix Japanese IME input

v1.3.0 (2015-07-31)

• Support new MasterCard BIN ranges (222100–272099)
• bugfix

v1.2.3 (2015-03-27)

• DinarsClub of Fixed card number format

v1.2.2 (2015-02-03)

• improve Android expiry formatting

v1.2.1 (2015-01-22)

• Support Zepto

v1.2.0 (2015-01-21)

• update.

v1.1.4 (2014-08-28)

• update.

v1.1.2 (2014-08-19)

• Fixed: do not call indexOf on undefined

v1.1.1 (2014-08-14)

• rename slash to char in formatForwardSlashAndSpace()

v1.1.0 (2014-07-18)

• More card types

v1.0.0 (2014-07-17)

• More autocomplete updates
• Improve card type data

v0.1.3 (2014-05-23)

• update.

---

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