Cómo añadir formato de tarjeta de crédito con javascript


A lo largo del último año he desarrollado varios sitios web en WordPress que requieren recibir donativos o hacer cargos de servicios a través de una tarjeta de débito o crédito. En este tipo de sitios se maneja un formulario donde el usuario ingresa su tarjeta bancaria con el nombre y número de tarjeta de crédito (16 dígitos para VISA/Mastercard o 15 dígitos para American Express).

Para facilitar al usuario el escribir los números de su tarjeta correctamente, es ideal que se puedan añadir con el formato que maneja su tarjeta. Es decir, de cuatro en cuatro para VISA/MasterCard o cuatro, cinco y seis dígitos para American Express.

Existen varias librerías o frameworks que hacen este proceso, pero ya que tratamos de hacer el desarrollo con la menor cantidad de códigos y usando sólo pure JavaScript, dejaremos de lado este tipo de biblioteca como jQuery.   

Comenzaremos creando un archivo index.html donde vamos a añadir un input en el cual vamos a escribir los dígitos de la tarjeta en cuestión:

<!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 podemos observar, añadimos un poco de CSS para darle un toque visual y un input que tiene la propiedad maxlength=”19”. Esto último se debe a que queremos que el usuario únicamente pueda ingresar los dígitos permitidos: 16 dígitos para Mastercard y 3 espacios en blanco, por eso el valor de 19.

 Ahora vamos a agregar un poco de JavaScript, ya que por sí solo nuestro input no hace nada. Para esto debemos cumplir con las siguientes reglas:

  • Sólo debe aceptar números. Las letras o símbolos se deberán bloquear.
  • 16 dígitos Para VISA y Mastercard separados de 4 en 4 dígitos.
  • Para American Express debe aceptar 15 dígitos y estar separados por 4, 6 y 5 dígitos.
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 se muestra en el código anterior, validamos que cada vez que el usuario presione o suelte una tecla, reemplazamos 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 código de la imagen anterior validamos si es una tarjeta American Express para la representación **** ****** ***** o si es VISA para que muestre los dígitos como **** **** **** ****.

Para finalizar, cuando tengas que enviarlo a tu proveedor de pagos, solo reemplaza todos los espacios para que sean los 15 o 16 dígitos, 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 el siguiente enlace.

¡Gracias por leer y compartir este tutorial!, Si deseas puedes hacer un donativo de 1 dolar para seguir manteniendo y subir más contenido en este sitio.