Como añadir formato de tarjeta de credito con javascript


En este ultimo año he desarrollado varios sitios en wodpress que requieren recibir donativos o hacer cargos de servicios a travez de una tarjeta de debito o credito todos desarrollados con conekta.io

en todos estos sitios se maneja un formulario donde el usuario ingresa su tarjeta bancaria con el nombre, número de tarjeta de credito que pueden ser 16 digitos para visa y mastercard o 15 digitos para american express

Para facilitar al usuario escribir los numeros de su tarjeta una es ideal que se puedan añadir con el formato que viene en su tarjeta por ejemplo de 4 en 4 para vista y master card ó 4, 5 y 6 digitos para american express

existen varias librerias o frameworks que hacen este proceso pero ya que trato de hacer mis desarrollos con la menor cantidad de codigo y usando solo pure javascript y dejar por un lado algunos como jQuery.

vamos empezar creando un archivo index.html donde vamos añadir un input donde vamos a escribir los digitos de nuestra tarjeta

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ejemplo de formato de tarjeta de credito con javascript</title>
        <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="form">
            <label>Tarjeta de credito</label>
            <input
                id="creditcard"
                maxlength="19"
                placeholder="Número de tarjeta de credito"
            />
        </div>
    </body>
</html>

Como puedes ver añadimos un poco de css para darle un toque visual y añadimos un input tiene la propiedad maxlength=”19″ ya que queremos que el usuario no puede ingresar mas de los digitos permitos para master card 16 digitos y 3 espacios en blanco por eso el valor de 19.

ahora vamos añadir un poco de javscript ya que por si solo no hace nada nuestro input debemos cumplir las siguientes reglas:

  1. Solo debe aceptar numeros, las letras o simbolos se deberan bloquear.
  2. Para visa y master card deben ser 16 digitos y estar separados de 4 en 4.
  3. Para american express debe aceptar 15 digitos y estar separados por 4, 6 y 5 digitos.
var creditcard = document.getElementById('creditcard');

function onkeyPress(event){
    creditcard.value = creditcard.value.replace(/[a-zA-Z]/g, '');
}

creditcard.addEventListener('keypress',onkeyPress);
creditcard.addEventListener('keydown',onkeyPress);
creditcard.addEventListener('keyup',onkeyPress);

Como puedes observar en el codigo anterior validamos que cada vez que el usuario presione o suelte una tecla remplazamos las letras.

var creditcard = document.getElementById('creditcard');

function onkeyPress(event){

    creditcard.value = creditcard.value.replace(/[a-zA-Z]/g, '');

    //validamos si es american express para esto quitamos todos los espacios en blaco y luego veriricamos que tenga 4, 6 y 5 digitos.
    if(creditcard.value.replace(/ /g, '').match(/\b(\d{4})(\d{6})(\d{5})\b/))
        creditcard.value = creditcard.value
            .replace(/\W/gi, '')//quitamos todos los espacios demas
            .replace(/\b(\d{4})(\d{6})(\d{5})\b/, '$1 $2 $3') //si cumple el formato añadimos 3,6 y 5 digitos
            .trim();
    else //si no es american express entonces es una tarjeta visa o master card
        creditcard.value = creditcard.value
            .replace(/\W/gi, '')
            .replace(/(.{4})/g, '$1 ')
            .trim()
}

creditcard.addEventListener('keypress',onkeyPress);
creditcard.addEventListener('keydown',onkeyPress);
creditcard.addEventListener('keyup',onkeyPress);

en el codigo anterior validamos si es una tarjeta american express para hacer la representacion **** ****** ***** o si es visa para que muestre los digitos como **** **** **** ****

cuando tengas que enviarlo a tu proveedor de pagos solo remplaza todos los espacios para que sean los 16 digitos o 15 como se muestra en el siguiente ejemplo:

var creditcard = document.getElementById('creditcard');

var send        = document.getElementById('send');

send.addEventListener('click', function(e){
    e.preventDefault();
    alert('Tarjate de credito es: '+creditcard.value.replace(/ /g, '') );
});
function onkeyPress(event){

    creditcard.value = creditcard.value.replace(/[a-zA-Z]/g, '');

    //validamos si es american express para esto quitamos todos los espacios en blaco y luego veriricamos que tenga 4, 6 y 5 digitos.
    if(creditcard.value.replace(/ /g, '').match(/\b(\d{4})(\d{6})(\d{5})\b/))
        creditcard.value = creditcard.value
            .replace(/\W/gi, '')//quitamos todos los espacios demas
            .replace(/\b(\d{4})(\d{6})(\d{5})\b/, '$1 $2 $3') //si cumple el formato añadimos 3,6 y 5 digitos
            .trim();
    else //si no es american express entonces es una tarjeta visa o master card
        creditcard.value = creditcard.value
            .replace(/\W/gi, '')
            .replace(/(.{4})/g, '$1 ')
            .trim()
}

creditcard.addEventListener('keypress',onkeyPress);
creditcard.addEventListener('keydown',onkeyPress);
creditcard.addEventListener('keyup',onkeyPress);

Puedes ver el ejemplo completo en la siguiente url gracias por comentar y compartir este tutorial en otro capitulo les enseñare como tokenizar y procesar pagos con tarjetas de credito y conekta.