Calendar

En Mango siempre nos encontramos en la búsqueda de nuevas funcionalidades que aporten un mayor valor agregado a los comercios, de manera adicional al funcionamiento meramente transaccional.

En esta oportunidad, les quiero presentar nuestra nueva funcionalidad: Calendario de cobro; una forma más flexible y fácil para los comercios de tener un panorama más amplio con respecto al ingreso de sus fondos.

Cada comercio tiene sus propios acuerdos con las tarjetas de crédito y buscamos que nuestro producto sea lo suficientemente flexible para ajustarse a dichos acuerdos. Hasta el día de hoy, Mango tomaba en cuenta las fechas estándar de pago a los comercios por parte de las tarjetas de crédito: 22 días hábiles para transacciones en un pago y 48hs hábiles para transacciones de más de una cuota.

En nuestra API, el campo deposit_eta presente en el recurso /charges contiene el timestamp correspondiente relacionado a dichas fechas.

Ahora, estas fechas son personalizables por comercio.

Configuración de fechas de cobro

Fechas de Cobro

Por cada emisor, se puede configurar la cantidad de días hábiles.
Es posible cambiar sólo un valor o ambos.

Una vez realizado este cambio, las próximas transacciones (charges) que se realicen a través de la API, tendrán un timestamp en deposit_eta acorde a dicha configuración.

Cronograma de cobro

Como una propuesta de valor adicional, en el Panel de Control proveemos un calendario donde se pueden observar por día y por semana, los valores a cobrar.

Calendario de Cobro

Haciendo clic sobre un día específico, se puede ver el monto discriminado por emisor:

calendar_5

Estamos seguros que esta nueva funcionalidad dará una visibilidad más clara del ingreso de fondos y colaborará con simplificar y optimizar los procesos administrativos de cada comercio.

Para sugerencias sobre esta funcionalidad, como siempre, pueden escribirnos a soporte@getmango.com. Anunciaremos nuevas funcionalidades adicionales muy pronto. Stay tuned!

cursor

Queríamos compartir con ustedes algunas mejoras que implementamos en la nueva versión del Panel de Control de Mango.

Este es el primero de una serie de artículos en los que vamos a estar compartiendo diferentes técnicas que implementamos para mejorar la experiencia en el Panel de Mango utilizando nuevas tecnologías web.

Expiración de sesiones (es por tu bien)

Parte de las medidas de seguridad que utilizamos en el Panel de Control desde el primer momento incluyen el uso de sesiones de usuario que expiran luego de 15 minutos de inactividad.

Esta nueva versión del Panel de Control de Mango incorporó funcionalidades en las cuales los usuarios pueden estar un tiempo prolongado analizando métricas, reportes de sus transacciones o realizando acciones que pueden no necesariamente notificar a nuestros servidores.

Por dicho motivo implementamos un mecanismo de envío de mensajes de keep-alive para avisarle a los servidores de Mango que la sesión sigue activa (esto contempla eventos de mouse, teclado, etc.).

Este mecanismo también se encarga de expirar la sesión si ningún evento es disparado durante dichos 15 minutos. Antes de desactivar la sesión automáticamente, el usuario tiene la opción de «mantener viva» la sesión clickeando un modal que advierte su pronta expiración.

bert

Luego de realizar diferentes pruebas, nos dimos cuenta que la técnica utilizada para expirar la sesión tenía dos puntos débiles en relación a la experiencia del usuario:

  • Si un usuario tenía abierto el panel en más de una pestaña (tab), la actividad de una pestaña no era registrada por sus pestañas hermanas. Es decir, darle más vida a una instancia del panel en una pestaña no afectaba el tiempo de vida client-side del resto.
  • El usuario no tenía forma de saber si el tiempo estaba por agotarse en caso de estar navegando otras pestañas u otras aplicaciones que no estén relacionadas al Panel de Mango.

La experiencia de usuario es uno de nuestros pilares como compañía y es por eso que pensamos técnicas para poder mitigar estos puntos.

El problema de las «tabs hermanas»

Para conocer el uso actual de las distintas instancias del panel (tabs) al mismo tiempo y sincronizar los tiempos de vida de las sesiones, acudimos a un truco de un viejo amigo: localStorage (IE8+).

Un uso poco conocido de la API de localStorage es que el objeto window emite el evento storage al resto de los tabs con el mismo esquema (según CSP).

Este truco es muy útil a la hora de enviar mensajes entre las tabs que controlamos. Utilizando esta API del navegador es muy simple notificar a las otras instancias de la aplicación cada vez que un evento de keep-alive se dispara en un tab.

// Para que se ejecute el evento 'storage', se debe setear un valor distinto al anterior.
// Es por eso que usamos 'new Date()'.
localStorage.setItem('keep-alive', (+new Date()) + '');

...

// En otra parte de la aplicación
window.addEventListener('storage', function(eve) {
  if (eve.key === 'keep-alive' && isActive()) {
    refreshSession();
  }
}, false);

De este modo, manteniendo «viva» una sola sesión nos aseguramos de mantener el resto «vivas» también.

Notificaciones para todos

Gran cantidad de navegadores ya implementaron un método para poder notificar a los usuarios de eventos importantes cuando no están activamente usando nuestra aplicación o incluso cuando tienen el navegador minimizado.

Se llaman Web Notifications y varias aplicaciones ya están comenzando a utilizar este patrón aprovechando su gran poder para mejorar la experiencia de aquellos usuarios que utilizan navegadores modernos.

Las Web (o Desktop) Notifications nos permiten disparar notificaciones nativas del sistema operativo a través del navegador. A continuación podrán ver nuestra notificación previo a que expire la sesión:

desktop-notification-v2

Con una porción muy pequeña de código (como la del ejemplo a continuación) lograremos captar la atención del usuario para que realize la acción de «mantener viva» la sesión en caso de que quiera hacerlo. Adicionalmente, tenemos la posibilidad de redireccionar al usuario directamente a la pestaña en la que se emitió el evento cuando hace click en la notificación.

const desktopNotification = (title, options={}) => {
  if (document.hidden && 'Notification' in window) {
    const notification = new Notification(title, options);
    notification.onclick = () => { try { window.focus(); } catch(e) {} };
    return notification;
  }
};

Conclusión

Es muy importante conocer y tener en cuenta las tecnologías disponibles hoy en día y aprovecharlas al máximo para mejorar la experiencia de nuestros usuarios. En nuestro caso, de manera simple pudimos implementar dos soluciones que tienen un valor agregado para la experiencia de los usuarios en nuestro producto.

En el próximo artículo hablaremos sobre como utilizando nuevas tecnologías podemos achicar la brecha entra las aplicaciones web y el mundo móvil.

Cualquier duda/comentario o experiencias que quieran compartir, nos pueden contactar vía Twitter a @impronunciable o @pazguille.

Las compras con tarjeta de crédito a través de internet y en aplicaciones móviles se encuentran en constante crecimiento. En nuestra región también existen otros medios de pago alternativos muy utilizados. Es importante entender la idiosincrasia de cada país y atacar los problemas particulares a la hora de realizar pagos.

Nuestro objetivo es que Mango pueda ofrecer una solución integral a las necesidades de cobro que tienen las empresas y organizaciones. Hoy damos un paso en la dirección correcta en pos de este objetivo, permitiendo -además de aceptar cobros con tarjetas de crédito- la posibilidad de crear cupones de pago.

Esta funcionalidad se encuentra disponible a partir de hoy en modo beta para Argentina, permitiendo la creación de cupones tanto para Pago Fácil como Rapipago. Los cupones se presentan tanto en formato png como pdf, facilitando tanto la previsualización en un navegador como así también la impresión.

Adicionalmente, estamos trabajando para ampliar la oferta a proveedores locales de cupones de pago en otros países de América Latina.

Ejemplo de cupón

ejemplo-cupon

¿Por qué en BETA?

Los códigos de barra utilizados en este tipo de servicios pueden llegar a ser muy heterogéneos por el hecho de que se prestan a satisfacer necesidades muy variadas. Internamente tomamos la dirección de establecer un punto medio donde haya una estandarización de la estructura de la barra, sin perder la flexibilidad que necesita cada empresa u organización.

Esta primera iteración contempla lo que consideramos una implementación flexible y de simple uso, validada con múltiples clientes. Sin embargo el objetivo es realizar mejoras progresivas a partir de nuevas inquietudes y casos de uso comunes en la región.

Implementación

Pueden encontrar en nuestra API de pago un nuevo recurso llamado Coupons. Como figura en la referencia del recurso, la representación de un cupón contiene en su campo media los vínculos a los archivos pdf y png correspondientes. Además de crear cupones, la API contiene otros endpoints adicionales para consultar un cupón específico, obtener un listado o actualizar su estado (pago/impago).

Con la intención de hacer más simple el trabajo de los desarrolladores, las librerías oficiales ya se encuentran actualizadas, ofreciendo los recursos necesarios para implementar cupones de pago en el lenguaje de su preferencia.

Adicionalmente, en el Panel de Control se pueden consultar los cupones de pago generados por el comercio con el detalle de cada uno.

screencapture-panel-getmango-com-stores-673-coupons-1437678050318

screencapture-panel-getmango-com-stores-673-coupons-coupon_2at70j19fet6zor6xb7orn0d6g9qp8x2-1437678073245

Consultas y sugerencias

Cualquier consulta o sugerencia sobre esta funcionalidad, no duden en escribirnos a soporte@getmango.com

mango_sale

Uno de nuestros pilares principales como compañía es la misión de poder hacer fácil lo difícil. Esta visión se traslada a nuestro servicio y especialmente a nuestros productos y tecnología.

En esta oportunidad les quiero presentar Promociones, una funcionalidad en la que estuvimos trabajando arduamente los últimos dos meses.
Realmente fue de alta complejidad incorporarla debido a su naturaleza. Hubo que considerar muchísimos casos de uso y variables diferentes a la hora de planificar, diseñar y programarla.

Queríamos compartir con ustedes en este artículo, el alcance y los usos posibles de esta funcionalidad cuando la utilicen.

Nombre, código y duración

bin_9

Selección de tarjeta/franquicia

Se puede elegir para que tarjetas (una o varias) se desea aplicar la promoción

bin_3

Esta modalidad es para las tarjetas de cualquier entidad financiera.
También se puede optar por hacer una promoción específicamente para las tarjetas de determinada entidad configurando sus números de BIN.

Números de BIN

bin__

Los números de BIN identifican el emisor del plástico.
Puede ser una empresa, organización o banco.

Se puede configurar para cada entidad financiera sus respectivos números, agregando un punto de control adicional a la hora de transaccionar. Por cada número también se le puede asignar un tipo de tarjeta y un nivel o categoría (Gold, Black, etc.)

bin_2

Cuando se elige una entidad determinada en la promoción, se muestran los números de BIN cargados anteriormente. Si un consumidor intenta utilizar la promoción a la hora de pagar, y su tarjeta no coincide con el banco, la transacción no se realiza.

Cuotas

Permite definir las cuotas para la promoción.
Puede ser una en específico o un rango.

bin_4

Tasas de interés

Ofrecemos tres opciones para las tasas de interés de una promoción:

bin_6

En el caso de elegir la opción de matriz diferencial, se permite configurar coeficientes de interés particulares para dicha promoción:

bin_7

Números de comercio

Algunos bancos prefieren que el comercio genere el alta de un número de comercio particular para la promoción. Es posible elegir ese número para la promoción:

bin_5

En caso de no haber acordado un número de comercio específico para la promoción, se pueden elegir los números por defecto del comercio, que son los que se utilizan para realizar las transacciones normales.

Reintegros

Hay promociones donde el banco le hace un reintegro directamente a la persona.
Con esta opción, esto queda asentado en la promoción.

bin_8

Esta es una funcionalidad muy poderosa que le ayudará a los comercios ahorrar trabajo y dolores de cabeza a la hora de gestionar y hacer el seguimiento de sus promociones.

Si ya estás operando online y tu solución de pago no soporta este tipo de administración de promociones, te invitamos a crear una cuenta en Mango y probar esta funcionalidad.