https://static-mxt.smsglobal.com/js/ccFormat.js?v=d573696

1(function($) {
2
3
4    /**
5     *
6     */
7    var _self = this;
8
9
10    /**
11     *
12     */
13    _self.card_types = [
14        {
15            name: 'American Express',
16            code: 'ax',
17            pattern: /^3[47]/,
18            valid_length: [15],
19            formats : [
20                {
21                    length: 15,
22                    format: 'xxxx xxxxxx xxxxx'
23                }
24            ]
25        }, {
26            name: 'Diners Club',
27            code: 'dc',
28            pattern: /^3[68]/,
29            valid_length: [14],
30            formats : [
31                {
32                    length: 14,
33                    format: 'xxxx xxxx xxxx xx'
34                }
35            ]
36        }, {
37            name: 'JCB',
38            code: 'jc',
39            pattern: /^35/,
40            valid_length: [16],
41            formats : [
42                {
43                    length: 16,
44                    format: 'xxxx xxxx xxxx xxxx'
45                }
46            ]
47        }, {
48            name: 'Visa',
49            code: 'vs',
50            pattern: /^4/,
51            valid_length: [16],
52            formats : [
53                {
54                    length: 16,
55                    format: 'xxxx xxxx xxxx xxxx'
56                }
57            ]
58        }, {
59            name: 'Mastercard',
60            code: 'mc',
61            pattern: /^5[1-5]/,
62            valid_length: [16],
63            formats : [
64                {
65                    length: 16,
66                    format: 'xxxx xxxx xxxx xxxx'
67                }
68            ]
69        }, {
70            name: 'Maestro',
71            code: 'ma',
72            pattern: /(^50)|(^56)|(^57)|(^58)|(^6)/,
73            valid_length: [19],
74            formats : [
75                {
76                    length: 12,
77                    format: 'xxxx xxxx xxxx'
78                },
79                {
80                    length: 13,
81                    format: 'xxxx xxxx xxxxx'
82                },
83                {
84                    length: 14,
85                    format: 'xxxx xxxxxx xxxx'
86                },
87                {
88                    length: 15,
89                    format: 'xxxx xxxxxx xxxxx'
90                },
91                {
92                    length: 16,
93                    format: 'xxxx xxxx xxxx xxxx'
94                },
95                {
96                    length: 17,
97                    format: 'xxxxxxx xxxxxxxxxx'
98                },
99                {
100                    length: 18,
101                    format: 'xxxxxxxx xxxxxxxxxx'
102                },
103                {
104                    length: 19,
105                    format: 'xxxx xxxx xxxx xxxx xxx'
106                }
107            ]
108        }
109    ];
110
111    /**
112     *
113     */
114    this.isValidLength = function(cc_num, card_type) {
115        for(var i in card_type.valid_length) {
116            if (cc_num.length <= card_type.valid_length[i]) {
117                return true;
118            }
119        }
120        return false;
121    };
122
123    /**
124     *
125     */
126    this.getCardType = function(cc_num) {
127        for(var i in _self.card_types) {
128            var card_type = _self.card_types[i];
129            if (cc_num.match(card_type.pattern) && _self.isValidLength(cc_num, card_type)) {
130                return card_type;
131            }
132        }
133    };
134
135    /**
136     *
137     */
138    this.getCardFormatString = function(cc_num, card_type) {
139        for(var i in card_type.formats) {
140            var format = card_type.formats[i];
141            if (cc_num.length <= format.length) {
142                return format.format;
143            }
144        }
145    };
146
147    /**
148     *
149     */
150    this.formatCardNumber = function(cc_num, card_type) {
151        var numAppendedChars = 0;
152        var formattedNumber = '';
153
154        if (!card_type) {
155            return cc_num;
156        }
157
158        var cardFormatString = _self.getCardFormatString(cc_num, card_type);
159        for(var i = 0; i < cc_num.length; i++) {
160            cardFormatIndex = i + numAppendedChars;
161            if (!cardFormatString || cardFormatIndex >= cardFormatString.length) {
162                return cc_num;
163            }
164
165            if (cardFormatString.charAt(cardFormatIndex) !== 'x') {
166                numAppendedChars++;
167                formattedNumber += cardFormatString.charAt(cardFormatIndex) + cc_num.charAt(i);
168            } else {
169                formattedNumber += cc_num.charAt(i);
170            }
171        }
172
173        return formattedNumber;
174    };
175
176    /**
177     *
178     */
179    this.monitorCcFormat = function($elem) {
180        var cc_num = $elem.val().replace(/\D/g,'');
181        var card_type = _self.getCardType(cc_num);
182        $elem.val(_self.formatCardNumber(cc_num, card_type));
183        _self.addCardClassIdentifier($elem, card_type);
184    };
185
186    /**
187     *
188     */
189    this.addCardClassIdentifier = function($elem, card_type) {
190        var classIdentifier = 'cc_type_unknown';
191        if (card_type) {
192            classIdentifier = 'cc_type_' + card_type.code;
193            if (card_type.code == 'ax') {
194                $elem.prop('maxlength', card_type.valid_length[0]+2);
195            } else {
196                $elem.prop('maxlength', card_type.valid_length[0]+3);
197            }
198        } else {
199            $elem.prop('maxlength', 23);
200        }
201
202        if (!$elem.hasClass(classIdentifier)) {
203            var classes = '';
204            for(var i in _self.card_types) {
205                classes += 'cc_type_' + _self.card_types[i].code + ' ';
206            }

207            $elem.removeClass(classes + 'cc_type_unknown');
208            $elem.addClass(classIdentifier);
209        }
210    };
211
212    /**
213     *
214     */
215    $(function() {
216        $(document).find('.ccFormatMonitor').each(function() {
217            var $elem = $(this);
218            if ($elem.is('input')) {
219                $elem.on('input', function () {
220                    _self.monitorCcFormat($elem);
221                });
222            }
223        });
224    });
225}(jQuery));