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.
™
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…