En este tutorial veremos cómo crear un formulario para introducir los datos de una tarjeta de crédito. Lo haremos todo desde cero, ayudándonos un poco con Bootstrap 3 para la interfaz, y con Payform.js para la validación del propio formulario en la parte del cliente. Ojo, almacenar datos de tarjetas de crédito en tu servidor es algo bastante peliagudo. A menos que sepas lo que estás haciendo, lo mejor es utilizar servicios de terceros como Paypal o los TPVs de servicios bancarios, que hacen todo esto por ti.
Empezando con el proyecto
Este será el listado de archivos que utilizaremos en el proyecto:
assets
-- css
---- demo.css
---- styles.css
images
---- amex.jpg
---- mastercard.jpg
---- visa.jpg
-- js
---- jquery.payform.min.js
---- script.js
-- index.html
Hay dos ficheros css y dos ficheros javascript que deben ser incluidos en nuestro HTML. Todos los demás recursos como Bootstrap, jQuery y las fuentes serán incluidas externamente vía CDN.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Credit Card Validation Demo</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
</head>
<body>
<!-- The HTML for our form will go here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/jquery.payform.min.js" charset="utf-8"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Ahora que todo está configurado, podemos empezar a construir el formulario para la tarjeta de crédito. Vamos a empezar con el diseño HTML.
Diseño
El formulario para la tarjeta de crédito debe ser simple, corto y directo. Solo deben incluir como máximo cuatro campos, que son:
- Nombre del propietario de la tarjeta
- Número de la tarjeta
- Código secreto (también conocido como CVV/CVC/CID)
- Fecha de expiración
Todo lo que tenemos que hacer es crear un form y añadir todos los campos obligatorios. Para el propietario, número de tarjeta y CVV usaremos campos de texto simples. Para la fecha de expiración utilizaremos una combinación de dos campos selects con opciones predefinidas.
Además, nuestro formulario contará también con un encabezado, un botón submit e imágenes con los proveedores de tarjetas de crédito más populares. Puesto que trabajamos con Bootstrap, el código de nuestro diseño será un poco más extenso, pero estará más organizado y será totalmente responsive.
<div class="creditCardForm">
<div class="heading">
<h1>Confirm Purchase</h1>
</div>
<div class="payment">
<form>
<div class="form-group owner">
<label for="owner">Owner</label>
<input type="text" class="form-control" id="owner">
</div>
<div class="form-group CVV">
<label for="cvv">CVV</label>
<input type="text" class="form-control" id="cvv">
</div>
<div class="form-group" id="card-number-field">
<label for="cardNumber">Card Number</label>
<input type="text" class="form-control" id="cardNumber">
</div>
<div class="form-group" id="expiration-date">
<label>Expiration Date</label>
<select>
<option value="01">January</option>
<option value="02">February </option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select>
<option value="16"> 2016</option>
<option value="17"> 2017</option>
<option value="18"> 2018</option>
<option value="19"> 2019</option>
<option value="20"> 2020</option>
<option value="21"> 2021</option>
</select>
</div>
<div class="form-group" id="credit_cards">
<img src="assets/images/visa.jpg" id="visa">
<img src="assets/images/mastercard.jpg" id="mastercard">
<img src="assets/images/amex.jpg" id="amex">
</div>
<div class="form-group" id="pay-now">
<button type="submit" class="btn btn-default" id="confirm-purchase">Confirm</button>
</div>
</form>
</div>
</div>
Ahora que tenemos los campos, tenemos que definir las reglas de validación.
Validación
Todas las validaciones que implementaremos en este formulario se harán desde la parte del cliente, es decir, mediante Javascript. Para empezar, vamos a definir todos los selectores de jQuery que necesitaremos.
var owner = $('#owner'),
cardNumber = $('#cardNumber'),
cardNumberField = $('#card-number-field'),
CVV = $("#cvv"),
mastercard = $("#mastercard"),
confirmButton = $('#confirm-purchase'),
visa = $("#visa"),
amex = $("#amex");
Después, utilizamos Payform.js para convertir nuestros campos inputs en inputs especiales para tarjetas de crédito. Simplemente necesitamos llamar a la función adecuada y la librería automáticamente se encargará de formatear los campos y el máximo de caracteres de cada uno de ellos.
cardNumber.payform('formatCardNumber');
CVV.payform('formatCardCVC');
Ahora, necesitamos habilitar el feedback en tiempo real para los usuarios que estén escribiendo los digitos de su tarjeta de crédito. Para llevarlo a cabo, desarrollaremos una función que llevará a cabo dos acciones:
Comprueba si el texto introducido en el campo es perteneciente a una tarjeta de crédito o no. Añade el color adecuado en caso de error o de éxito en el campo de texto.
Dependiendo de los caracteres introducidos, comprueba si es Visa, MasterCard o American Express. Esto se realiza mediante el método payform.parseCardType().
Ya que queremos ejecutarla siempre y cuando el usuario escriba algo en el campo de texto, utilizaremos el detector de eventos de jQuery keyup().
cardNumber.keyup(function() {
amex.removeClass('transparent');
visa.removeClass('transparent');
mastercard.removeClass('transparent');
if ($.payform.validateCardNumber(cardNumber.val()) == false) {
cardNumberField.removeClass('has-success');
cardNumberField.addClass('has-error');
} else {
cardNumberField.removeClass('has-error');
cardNumberField.addClass('has-success');
}
if ($.payform.parseCardType(cardNumber.val()) == 'visa') {
mastercard.addClass('transparent');
amex.addClass('transparent');
} else if ($.payform.parseCardType(cardNumber.val()) == 'amex') {
mastercard.addClass('transparent');
visa.addClass('transparent');
} else if ($.payform.parseCardType(cardNumber.val()) == 'mastercard') {
amex.addClass('transparent');
visa.addClass('transparent');
}
});
Otra cosa que debemos hacer es comprobar si el texto contiene datos válidos cuando el usuario pulsa el botón de submit.
La validación de nombres puede ser bastante complicada. Para que este tutorial no se alargue mucho más, no entraremos en ese tema. Solo comprobaremos si el nombre del propietario tiene al menos 5 caracteres. Payform nos proporciona los métodos necesarios para validar el resto del formulario.
confirmButton.click(function(e) {
e.preventDefault();
var isCardValid = $.payform.validateCardNumber(cardNumber.val());
var isCvvValid = $.payform.validateCardCVC(CVV.val());
if(owner.val().length < 5){
alert("Wrong owner name");
} else if (!isCardValid) {
alert("Wrong card number");
} else if (!isCvvValid) {
alert("Wrong CVV");
} else {
// Everything is correct. Add your form submission code here.
alert("Everything is correct");
}
});
El código que puedes ver arriba es solo con fines educacionales, no debe ser utilizado en proyectos comerciales. Incluye siempre tanto validación de parte del cliente como por parte del servidor, especialmente cuando trabajamos con tarjetas de crédito.
Estilos
Al trabajar con Bootstrap, muchos estilos vienen dados por el framework. Nuestro CSS abarca el tamaño de los campos inputs y varios paddings, márgenes y estilos de fuente. Nada más.
styles.css
.creditCardForm {
max-width: 700px;
background-color: #fff;
margin: 100px auto;
overflow: hidden;
padding: 25px;
color: #4c4e56;
}
.creditCardForm label {
width: 100%;
margin-bottom: 10px;
}
.creditCardForm .heading h1 {
text-align: center;
font-family: 'Open Sans', sans-serif;
color: #4c4e56;
}
.creditCardForm .payment {
float: left;
font-size: 18px;
padding: 10px 25px;
margin-top: 20px;
position: relative;
}
.creditCardForm .payment .form-group {
float: left;
margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
line-height: 40px;
height: auto;
padding: 0 16px;
}
.creditCardForm .owner {
width: 63%;
margin-right: 10px;
}
.creditCardForm .CVV {
width: 35%;
}
.creditCardForm #card-number-field {
width: 100%;
}
.creditCardForm #expiration-date {
width: 49%;
}
.creditCardForm #credit_cards {
width: 50%;
margin-top: 25px;
text-align: right;
}
.creditCardForm #pay-now {
width: 100%;
margin-top: 25px;
}
.creditCardForm .payment .btn {
width: 100%;
margin-top: 3px;
font-size: 24px;
background-color: #2ec4a5;
color: white;
}
.creditCardForm .payment select {
padding: 10px;
margin-right: 15px;
}
.transparent {
opacity: 0.2;
}
@media(max-width: 650px) {
.creditCardForm .owner,
.creditCardForm .CVV,
.creditCardForm #expiration-date,
.creditCardForm #credit_cards {
width: 100%;
}
.creditCardForm #credit_cards {
text-align: left;
}
}
Así, nuestro formulario para tarjetas de crédito quedaría completo.
Fuente: tutorialzine.com