Kortic, Anthony Ladeuil

Validateur de carte bancaire

Script complet (CSS, JS, SVG) de validation à la volée de formats de cartes de crédit.
Le script valide le type de carte (American Express, Discover, JCB Card, Mastercard, Visa / Carte bancaire, Diners Club).

Exemples de numéros valides

Cliquer sur un numéro pour appliquer le contrôle de format dans le champ ci-dessus.
Source : https://ccardgenerator.com/fr/

American Express
3487 8228 3860 066
3735 5071 1452 204
3793 1956 8730 904
3429 1530 3518 936
3492 5193 3941 303
Discover
6011 1151 8027 2080
6011 2058 2673 3031
6011 9572 1674 4388
6011 9317 4414 6069
6011 3489 0370 0331
JCB Card
3588 9580 0266 3584
3549 2173 2553 3422
3578 9020 4489 0005
3539 9676 7293 3938
3529 4069 0776 3168
Mastercard
5333 5933 1005 5687
5282 4065 4325 9318
5512 3755 1312 9672
5374 0521 0623 4089
5351 5968 3168 6671
Visa / Carte bancaire
4291 1868 2920 9789
4373 0977 3270 0163
4837 5170 3031 5679
4737 2893 2381 1274
4534 5411 7357 4914
Diners Club
3000 4715 4611 88
3004 2745 8721 31
3002 3141 4106 43
3000 5754 1570 17
3006 2521 5821 83

Les sources

CSS
https://www.kortic.com/v2.cc-validator.css
Javascript
https://www.kortic.com/v2.cc-validator.js
Icones (SVG)
https://www.kortic.com/svg/cc.svg
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton… ou scanner le QR code.
QR CODE Paypal

Source CSS

@charset "UTF-8";
/********************************************************************
* CSS [pretty source] file updated on Sat, 17 Aug 2019 11:15:28 +0200
* File https://www.kortic.com/v2.cc-validator.css
********************************************************************/

/* credit-cards.css*************************************************/ 

[data-cc-name]:after {
    content: '\A0:\A0' attr(data-cc-name);
    font-weight: 400;
}

[data-cc-type] {
    background-size: 2.5rem 2.5rem;
    background-position: calc(100% - 0.375rem) center;
    padding-right: 2.625rem;
}

[data-cc-type=null] {
    background-image: none;
}

[data-cc-type=amex] {
    background-image: url('/svg/cc.svg#cc-amex');
}

[data-cc-type=discover] {
    background-image: url('/svg/cc.svg#cc-discover');
}

[data-cc-type=jcb] {
    background-image: url('/svg/cc.svg#cc-jcb');
}

[data-cc-type=mastercard] {
    background-image: url('/svg/cc.svg#cc-mastercard');
}

[data-cc-type=visa] {
    background-image: url('/svg/cc.svg#cc-visa');
}

[data-cc-type=diners] {
    background-image: url('/svg/cc.svg#cc-diners');
}

Source Javascript

/*******************************************************************
* JS [pretty source] file updated on Sat, 17 Aug 2019 11:15:28 +0200
* File https://www.kortic.com/v2.cc-validator.js
*******************************************************************/

/* 50_cards-validator.js*******************************************/ 

;(function ($) {

    'use strict';

    $.fn.cc_patten = function(){

        var creditCardsPatterns = {
                visa:         /^4[0-9]{12}(?:[0-9]{3})?$/,
                mastercard: /^5[1-5][0-9]{14}$|^2(?:2(?:2[1-9]|[3-9][0-9])|[3-6][0-9][0-9]|7(?:[01][0-9]|20))[0-9]{12}$/,
                amex:         /^3[47][0-9]{13}$/,
                discover:     /^65[4-9][0-9]{13}|64[4-9][0-9]{13}|6011[0-9]{12}|(622(?:12[6-9]|1[3-9][0-9]|[2-8][0-9][0-9]|9[01][0-9]|92[0-5])[0-9]{10})$/,
                diners:     /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,
                jcb:         /^(?:2131|1800|35[0-9]{3})[0-9]{11}$/
            },

            creditCardsLabels = {
                visa: 'Visa / Carte Bancaire',
                mastercard: 'Mastercard',
                amex: 'American Express',
                discover: 'Discover',
                diners: 'Diners Club',
                jcb: 'JCB Card'
            },

            checkLuhn = function (luhn) {
                var ca,
                    sum = 0,
                    mul = 0,
                    len = luhn.length;

                while (len--) {
                    ca = parseInt(luhn.charAt(len),10) << mul;
                    sum += ca - (ca > 9) * 9;
                    mul ^= 1;
                };

                return (sum % 10 === 0) && (sum > 0);
            },

            checkCreditCard = function (value) {

                let val = value.replace(/\D/g, ''),
                    accepted = [];

                Object.keys(creditCardsPatterns).forEach(function(key) {

                    (creditCardsPatterns[key].test(val) && checkLuhn(val)) && accepted.push(true, key);

                });

                return accepted;
            };




        $(this).each(function() {

            var cardnumber = $(this),
                label = $('[for='+ cardnumber.attr('id') +']');

            cardnumber.on('input', function(){

                let v = checkCreditCard(cardnumber.val());

                if(cardnumber.val().length) {
                    if(v[0]) {
                        cardnumber.attr('data-cc-type', v[1]),
                        label.attr('data-cc-name', creditCardsLabels[v[1]])
                    } else {
                        cardnumber.attr('data-cc-type', 'null'),
                        label.attr('data-cc-name', '');
                    }

                } else {
                    cardnumber.attr('data-cc-type', 'null'),
                    label.attr('data-cc-name', '');
                }

            });

            return this;
        });

    };

})(jQuery);
Voir aussi…
2019-08-17