Card Number Formatting using jquery

21 Oct
2021

Card Number Formatting using jquery

by Shubham Batra

188

Card Types -

So to start from , there are different types of card available around the world and some use there own format which can be different than others. Some of those Cards are these

Amex(American Express) - 371449635398431

MasterCard - 5200828282828210

VISA - 4000056655665556

So, you can see some difference in the formatting across cards and so it becomes tough to implement correct formatting while the user types the card number. So for implementing that we will take one input box and add some script on page

 <div class="col-md-6" style="padding:50px;">

    <input type="text" id="txtcard" onkeypress="return formatCardNumber(event)" />

</div>
 <script>
 
 var defaultFormat = /(?:^|\s)(\d{4})$/;

   var cards = [
        {
            type: 'maestro',
            patterns: [5018, 502, 503, 506, 56, 58, 639, 6220, 67],
            format: defaultFormat,
            length: [12, 13, 14, 15, 16, 17, 18, 19],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'forbrugsforeningen',
            patterns: [600],
            format: defaultFormat,
            length: [16],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'dankort',
            patterns: [5019],
            format: defaultFormat,
            length: [16],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'visa',
            patterns: [4],
            format: defaultFormat,
            length: [13, 16],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'mastercard',
            patterns: [51, 52, 53, 54, 55, 22, 23, 24, 25, 26, 27],
            format: defaultFormat,
            length: [16],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'amex',
            patterns: [34, 37],
            format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
            length: [15],
            cvcLength: [3, 4],
            luhn: true
        }, {
            type: 'dinersclub',
            patterns: [30, 36, 38, 39],
           format: /^(\d{4}|\d{4}\s\d{6})$/,
            length: [14],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'discover',
            patterns: [60, 64, 65, 622],
            format: defaultFormat,
            length: [16],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'unionpay',
            patterns: [62, 88],
            format: defaultFormat,
            length: [16, 17, 18, 19],
            cvcLength: [3],
            luhn: false
        }, {
            type: 'jcb',
            patterns: [35],
            format: defaultFormat,
            length: [16],
            cvcLength: [3],
            luhn: true
        }
    ];
  var formatCardNumber = function (e) {
        var $target, card, digit, length, re, upperLength, value;
        digit = String.fromCharCode(e.which);
        if (!/^\d+$/.test(digit)) {
            return;
        }
        $target = $(e.currentTarget);
      value = $target.val();
      debugger;
        card = cardFromNumber(value + digit);
      length = (value.replace(/\D/g, '') + digit).length;
      if (length > Math.max.apply(null, card.length)) {
          return false;
      }
        upperLength = 16;
        if (card) {
            upperLength = card.length[card.length.length - 1];
        }
        if (length >= upperLength) {
            return;
        }
        if (($target.prop('selectionStart') != null) && $target.prop('selectionStart') !== value.length) {
            return;
        }
        if (card && card.type === 'amex') {
            re = /^(\d{4}|\d{4}\s\d{6})$/;
        } else {
            if (card != null && card != undefined) {
                re = card.format// /(?:^|\s)(\d{4})$/;
            }
            else {
                re =  /(?:^|\s)(\d{4})$/;
            }
        }
        if (re.test(value)) {
            e.preventDefault();
            return setTimeout(function () {
                return $target.val(value + ' ' + digit);
            });
        } else if (re.test(value + digit)) {
            e.preventDefault();
            return setTimeout(function () {
                return $target.val(value + digit + ' ');
            });
        }
    };
   var cardFromNumber = function (num) {
        var card, p, pattern, _i, _j, _len, _len1, _ref;
        num = (num + '').replace(/\D/g, '');
        for (_i = 0, _len = cards.length; _i < _len; _i++) {
            card = cards[_i];
            _ref = card.patterns;
            for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
                pattern = _ref[_j];
                p = pattern + '';
                if (num.substr(0, p.length) === p) {
                    return card;
                }
            }
        }
    };
	</script>

So, this code is using jquery so make sure you have added the jquery reference on the page before using this. So, about this script in this we have added some predefined card formats in the array along with there max character size. And we are calling formatCardNumber on keypress of input box. Which find the card type based on starting characters and format accordingly. You can see the output with different card number and output format

With MasterCard

With Visa card Format

With Amex Card Format

So, you can see the formatting working differently with different card types. So this is how we can implement Card Number formatting with Jquery. If you have any issues you can comment and ask.

Comments