Pasarela de pago - Baby Life Store

Este proyecto se trata de una pasarela de pago de una tienda online llamada Baby Life Store, ha sido pensado para los usuarios que desean comprar los productos de esta tienda online y le permite completar su compra, validando el número de su tarjeta de crédito.

El formulario consta de las siguientes partes:

• Pantalla de inicio: al ingresar a la pasarela solicita los datos de nombre y tarjeta, mes y año de expiración y código CVV. Los mismos se van actualizando dinámicamente en la imagen de la tarjeta de crédito y a su vez muestra el logo de la tarjeta depende de su marca (Visa o Mastercard).

• Pantalla de confimación: cuando el usuario le da click a confirmar se muestra una pantalla con las siguientes opciones:

  • Si el número de tarjeta es válido, se mostrará un mensaje: "Tu tarjeta es válida. ¡Gracias por tu compra!".
  • Si el número de tarjeta es inválido, mostrará el siguiente mensaje: "Tu tarjeta es inválida. Intenta con otra tarjeta.".

  En ambos casos oculta los dígitos de la tarjeta, a excepción de los últimos 4 para proteger los datos del usuario.

Adicional, si el campo de número de tarjeta está vacío le indica al usuario que debe completar el campo para poder continuar.

De esta forma le permite al usuario completar su compra de una forma ágil, fácil y rápida, indicando mensajes claros de la información que debe ingresar, con el objetivo de brindarle una experiencia satisfactoria.