Hola todos!
Otra vez me encontré en el trabajo con uno de esos issues menores en el JIRA pero que de alguna manera son mas interesantes que cualquier otro. Se trataba de hacer un algoritmo de validación de tarjetas de crédito con jquery para validar el numero de tarjeta en tiempo real.
Así que comparto con ustedes mis hallazgos sobre esta situación.
Para validar el número de una tarjeta de crédito, se deben seguir algunos pasos sencillos los cuales describo a continuación:
Como preámbulo digamos veamos algunos de los dígitos utilizados por algunas marcas reconocidas para sus tarjetas de credito como IIN de sus siglas en ingles “Issuer Identification Number” es el número utilizado para reconocer la empresa que emitio la tarjeta
IIN | Empresa |
---|---|
34xxxx / 37xxxx | AMEX |
4xxxxx | VISA |
51xxxx / 55xxxx | Master Card |
6011xx/ 644xxx/ 65xxxx | Discover |
Algoritmo “Mod 10”
bien para verificar si un número de tarjeta de crédito es falso debemos seguir los siguientes pasos.
Tomemos el número de ejemplo siguiente:
4 | 8 | 1 | 7 | 5 | 3 | 9 | 5 | 8 | 3 | 5 | 6 | 0 |
---|
Paso 1
El primer paso es tomar todos los números en posiciones impares y multiplicarlos por 2:
4 | 8 | 1 | 7 | 5 | 3 | 9 | 5 | 8 | 3 | 5 | 6 | 0 |
---|---|---|---|---|---|---|---|---|---|---|---|---|
8 | 2 | 10 | 18 | 16 | 10 | 0 |
Paso 2
Los números que duplicamos que exceden 9, es decir tienen dos dígitos deben ser reducidos a un dígito sumando ambos, por ejemplo si el resultado es 10, se debe sumar 1 + 0, si el resultado es 18 debe sumarse 1 + 8 y colocarse el resultado en la casilla, de la siguiente manera
4 | 8 | 1 | 7 | 5 | 3 | 9 | 5 | 8 | 3 | 5 | 6 | 0 |
---|---|---|---|---|---|---|---|---|---|---|---|---|
8 | 2 | 1 | 9 | 7 | 1 | 0 |
Paso 3
Ahora regresamos los numeros que no duplicamos a las casillas originales mezclandolos con los que si duplicamos, de la siguiente forma:
4 | 1 | 5 | 9 | 8 | 5 | 0 | ||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
8 | 8 | 2 | 7 | 1 | 3 | 9 | 5 | 7 | 3 | 1 | 6 | 0 |
Paso 4
El paso 3 nos da un nuevo número del cual debemos sumar todos los dígitos:
8 + 8 + 2 + 7 + 1 + 3 + 9 + 5 + 7 + 3 + 1 + 6 + 0 = 60
Paso 5
Si el resultado de la sumatoria es divisible dentro de 10, en nuestro caso de ejemplo (60%10) la validación cumple como verdadera y es mas seguro procesar este número de tarjeta.
Finalmente comparto con ustedes la implementacion de este algoritmo utilizando html y jQuery:
El HTML:
<input type="text" name = "checkout.cardNumber" id="ccnum" /> <div id="type"></div>
El script en jQuery
$("#ccnum").keyup(function(e){ var num = $(this).val().toString(); var charCount = num.length; /* VALIDACION DE TIPO */ if(charCount == 1) { if(num == "4"){ $("#type").html("VISA"); } } if(charCount == 2){ if(num == "34" || num == "37"){ $("#type").html("AMEX"); } else if( num == "51" || num == "55" || num == "53"){ $("#type").html("MASTER CARD"); } else if( num == "55" ){ $("#type").html("DISCOVER"); } } if(charCount == 3){ if(num == "644"){ $("#type").html("DISCOVER") } } if(charCount == 4){ if(num == "6011"){ $("#type").html("DISCOVER"); } } /* !VALIDACION DE TIPO */ /* ALGORITMO */ if(charCount == 13 || charCount == 14 || charCount == 15 || charCount == 16){ var valid = isValid(num, charCount); if(valid){ $("#type").html("valida"); $("input").attr("name", "checkout.cardNumber").attr("class", "valid-card"); } else { $("#type").html("invalida"); $("input").attr("name", "checkout.cardNumber").attr("class", "invalid-card"); } } /* !ALGORITMO */ }); function isValid(ccNum, charCount){ var double = true; var numArr = []; var sumTotal = 0; for(i=0; i<charCount; i++){ var digit = parseInt(ccNum.charAt(i)); if(double){ digit = digit * 2; digit = toSingle(digit); double = false; } else { double = true; } numArr.push(digit); } for(i=0; i<numArr.length; i++){ sumTotal += numArr[i]; } var diff = eval(sumTotal % 10); console.log(diff); console.log(diff == "0"); return (diff == "0"); } function toSingle(digit){ if(digit > 9){ var tmp = digit.toString(); var d1 = parseInt(tmp.charAt(0)); var d2 = parseInt(tmp.charAt(1)); return (d1 + d2); } else { return digit; } }
Si quieren verlo en acción, les comparto el fiddle tambien: http://jsfiddle.net/RicardoGeek/4jpna/
Ademas Un link a la wiki del algoritmo de Luhn: http://en.wikipedia.org/wiki/Luhn_algorithm
Saludos!
🙂
gracias!
no sirve hdp!
Si funciona, lo que debes agregar un referencia al jquery como
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js”
a mi tampoco me funciono, lo que hice fue quitar las instrucciones de jquery y poner lo mismo pero con puras instrucciones de javascript
Si me funciono el codigo pero no valida correctamente nos numeros de AMEX de México, solo VISA
No me vale la targeta de crédito es