jQuery Credit Card Form Formatting Plugin - Payment

jQuery Credit Card Form Formatting Plugin - Payment
File Size: 22.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.