Mujer revisando sus formatos de cuenta

Creación: formato de tarjeta de crédito

La mayoría de las personas usan tarjetas de crédito en línea o desde aplicaciones, la creación de un formato es importante.

Formato para diferentes pantallas

Formato de crédito

Desde el principio, sabíamos que queríamos crear un formato que pudiera usarse en diferentes tamaños de pantalla (es decir, receptivo) y diferentes pantallas (es decir, dentro de la aplicación Wave para iPhone).

Al usar un objeto de formulario singular, solo tenemos que realizar cambios en el formato en un lugar. No tenemos que mantener múltiples bases de código.

Dentro de la aplicación de iPhone Invoice by Wave, implementamos inicialmente un formato de tarjeta de crédito nativo, que se basaba en el patrón de diseño de entrada de una sola línea . La entrada fue funcional, pero con algunos errores. Más importante aún, percibimos una mala experiencia con la forma en que esta entrada muestra las etiquetas y la forma en que un usuario tiene que navegar entre las entradas si hay errores presentes.

Formato de tarjeta de crédito

Ahora, usando un iFrame HTML, inyectamos el nuevo formato de tarjeta de crédito dentro de la aplicación. Los usuarios tienen una experiencia de pago casi idéntica cuando ingresan los detalles de su tarjeta de crédito en linea o dentro de la aplicación. En el futuro, dentro de nuestra aplicación para iPhone, aplicaremos estilo a los elementos del formulario utilizando CSS para que coincidan con el diseño de otros formatos dentro de la aplicación.

Y ahí lo tienes, ¡la anatomía de un formato de tarjeta de crédito en linea! Hemos revisado todo, desde copia, diseño de entrada de formatos, manejo de errores y dispositivos móviles. Nuestro formato de tarjeta de crédito definitivamente evolucionará con el tiempo, así que estate atentos a las novedades. El espacio de pagos no es exactamente atractivo, pero aprender y comprender las interacciones del usuario detrás de aceptar un pago con tarjeta de crédito fue realmente divertido.

Más información:

También te puede interesar: Consejos para comprar comestibles