Validar tarjeta de crédito para la compra de boleto de viaje

Índice

• 1. Resumen del proyecto
• 2. Usuarios
• 3. Primer prototipo
• 4. Feedback recibido
• 5. Imagen del prototipo final
• 6. Plan de acción

---

1. Resumen del proyecto

Aplicación web que le permite al usuario validar el número de su tarjeta de crédito/ débito para continuar de manera segura con la compra de su boleto de autobús en línea.

2. Usuarios

El usuario es un residente de la Ciudad de Puebla que próximamente viajará a la Ciudad de México para celebrar el 16 de septiembre con su familia y amigos. Para ello, decidió comprar su boleto de autobús por internet y elegió el método de pago con tarjeta de crédito o débito. Para continuar de manera segura, la página le solicitirá validar el número de tarjeta que ingresa. Si pasa la validación, el usuario podrá realizar con éxito la compra de su boleto.

3. Primer prototipo

• Elaborado en papel

• Descripción

  De lado derecho el usuario ve su boleto y de lado izquierdo el formulario que necesita llenar para continuar con la compra. Al aplastar el botón "Validar tarjeta" saldrán dos posibles opciones:

  1. (Nombre del usuario) + tu tarjeta es válida.
  2. (Nombre del usuario) + Lo sentimos, tu tarjeta no ha pasado las pruebas de validación. Revisa los datos.

4. Feedback recibido

Mis compañeras me recomendaron que, al momento que el usario de click en el botón, también aparezca el número de tarjeta que ingreso, para cumplir con el objetivo de

• Ocultar todos los dígitos de su número de tarjeta menos los últimos 4 caracteres.

5. Imagen del prototipo final

• Elaborado con Figma

6. Plan de acción

Dividí el proyecto en tres mini- trabajos. En el primero sólo se planeó el uso de HTML. En el segundo se agregó JavaScript.

Por último, como mi prioridad fue hacer que la página fuera funcional desde los primeros días del sprint, las mejoras y diseño en CSS se dejaron hasta el tercer miniproyecto.