Credit Card Validator Plugin with jQuery

File Size: 35.7 KB
Views Total: 12024
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Credit Card Validator Plugin with jQuery

An easy, fast Query Plugin for detecting and validating credit card numbers in your checkout form.

Supported Credit Cards:

  • Amex
  • Diners Club Carte Blanche
  • Diners Club International
  • JCB
  • Laser
  • Visa Electron
  • Visa
  • Mastercard
  • Discover
  • Dankort
  • Maestro
  • UATP
  • MIR

How to use it:

1. Install & Download.

# NPM
$ npm i jquery-creditcardvalidator --save

2. Load the jquery.creditCardValidator.js script after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.creditCardValidator.js"></script>

3. Create an input field to accept credit card numbers.

<input class="number" />

4. Call the function on the input field. Once you type something in the input field, the plugin returns an object with four properties:

  • result.card_type: an object containing 3 properties: name, range, and length
  • result.valid: a boolen indicating whether the number is valid
  • result.length_valid: a boolen indicating whether the length is valid
  • result.luhn_valid: a boolen indicating whether the luhn is valid
$('input').validateCreditCard(function(result) {
  $('body').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
  + '<br>Valid: ' + result.valid
  + '<br>Length valid: ' + result.length_valid
  + '<br>Luhn valid: ' + result.luhn_valid);
});

Changelog:

v1.2 (2020-11-18)

  • Added support for MIR cards
  • Updated IIN ranges: Diners Club International, JCB
  • Updated valid lengths: Diners Club Carte Blanche, Diners Club International, JCB, Discover
  • Validate Luhn even if the card number doesn’t match any known cards.
  • luhn_valid is now true if the Luhn checksum is correct, even if the card number is not recognised.

2016-10-09

  • Add UATP card

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