Skip to content

Primeros pasos en Javascript. Proyecto de especialización Front End para la generación 16 de Laboratoria.

Notifications You must be signed in to change notification settings

CarolAbcl/SCL016-card-validation

 
 

Repository files navigation

Formulario para suscripción a servicios (con validación de tarjetas de crédito)

Índice


1. Prototipo

Actualmente es muy comun la suscripción a distintos productos o servicios vía internet, para ello usualmemte nos piden tarjeta de credito como opción de pago. En Chile existe un servicio de Transbank, llamado transdata, donde se cargan los datos de las personas para hacerles el cargo con pago automatico. Esto funciona a traves de un formulario, el cual será utilizado como base donde se incorporará el sistema de validación de tarjetas desarrollado.

  • Usuarios:

Por una parte tenemos a los oferentes de productos y servicios por suscripción quienes le harán llegar el formulario a sus clientes mediante un enlace. Siendo estos los usuarios finales, quienes completarán el formulario y podrán validar inmediatamente si su numero de tarjeta quedó bien ingresado.

  • Objetivos de estos usuarios en relación al sistema:

Los usuarios quieren completar los datos correctamente para acceder a los productos y servicios por suscripción. Y los oferentes (el cliente) desean validar los datos para que no haya problema con los cobros.

Este sistema genera un ingreso más limpio y actualizado de los datos, es más fácil de enviar. Mejora aspectos como la legibilidad, ya que, cada dato va en su campo y valida instantaneamente los input para evitar inconvenientes posteriores.

Insumos y Testeo

Formulario frecuentemente utilizado para iniciar cargo automatico de tarjetas: Formulario frecuentemente utilizado

Formulario diseñado en Figma: Versión en web para el formulario anterior. Formulario Figma

Para los usuarios le pareció más amigable y entendible la versión prototipada que el formulario en word. Les agradaba que fuera simple, formal y con colores claros. Me dieron indicaciones sobre tamaño y el tipo de letra a utilizar.

Entrega del Proyecto

Screenshot final del proyecto:

Formulario Figma

Enlace a presentación del demo en loom:

Enlace Loom

About

Primeros pasos en Javascript. Proyecto de especialización Front End para la generación 16 de Laboratoria.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 50.2%
  • JavaScript 32.0%
  • CSS 17.8%