/// work · lealtad · react · azure

Marca global de consumo — portal de lealtad transaccional

Registro de socios, monedero de tarjetas, recargas, transferencias, e-gifts y niveles del programa, para México y Chile sobre una sola base de código.

presupuesto> $25,000 USD
estadoCompletado
modalidadColaboración
tecnologíaReact · Azure
sectorRetail / lealtad
mercadosMéxico · Chile
serviciosArquitectura frontend, desarrollo, integraciones de pago y antifraude
/// contexto

Una marca global de consumo necesitaba el portal web de su programa de lealtad para México y Chile: registro de socios, monedero de tarjetas de saldo, recargas con tarjeta bancaria, transferencias de saldo, envío de tarjetas de regalo digitales (e-gifts), niveles del programa y acumulación de puntos de lealtad.

La aplicación se construyó en React como producto whitelabel: una base de código configurable por país.

/// el problema

El portal maneja dinero: recargas, saldos y compras de e-gifts con tarjetas bancarias. Eso impone cuatro restricciones:

  • Alcance PCI controlado. Mantener el frontend fuera del alcance estricto de PCI DSS mediante tokenización.
  • Prevención de fraude a nivel de cuenta, con telemetría de dispositivo en los flujos de sesión.
  • Verificación OTP en operaciones de alto valor: recargas sobre umbral, recarga automática y cambio de correo.
  • Independencia de pasarela. El proveedor de cobros puede cambiar por país o por contrato; la aplicación no puede acoplarse a uno.
/// la solución

Capa de pagos con patrón adapter

La aplicación no interactúa con SDKs de pasarelas dentro de las vistas de negocio: lo hace contra una interfaz abstracta —inicialización, huella de dispositivo, tokenización, cobro— y cada proveedor (OpenPay, Stripe, Adyen) se implementa como un adaptador intercambiable. Cambiar de pasarela es un cambio de configuración, no una reescritura.

Tokenización y alcance PCI

Los datos de tarjeta bancaria se capturan y tokenizan a través de la pasarela activa; el frontend transacciona con tokens, lo que mantiene la aplicación fuera del alcance estricto de PCI DSS.

Firma de peticiones y antifraude

Los endpoints críticos —autenticación, refresco de token, registro— se firman con SHA-256 sobre timestamp, con cabeceras de verificación por canal. La telemetría de dispositivo del sistema antifraude se recolecta en el cliente y viaja embebida en los flujos de sesión para la evaluación de riesgo por transacción.

Verificación OTP en operaciones de alto valor

Recargas sobre umbral, configuración de recarga automática y cambio de correo requieren un token temporal generado y validado por la API antes de ejecutar la operación.

Monedero y transacciones

Las tarjetas del socio se ordenan por saldo y muestran saldo en tiempo real. Los flujos cubren recarga con tarjeta bancaria, transferencia de saldo entre tarjetas propias, recarga automática e historial de movimientos consolidado: compras, recargas, promociones y vencimiento de puntos.

e-Gifts

Catálogo por categorías con diseños por ocasión, personalización de monto, remitente, destinatario y mensaje, cobro con medio de pago bancario y entrega por correo electrónico al destinatario.

Whitelabel por país

Una base de código con configuración por mercado: reglas, proveedores de pago y contenido locales para México y Chile, con paridad funcional entre ambos.

/// resultados
  • Portal transaccional en producción para dos mercados sobre una sola base de código.
  • La arquitectura de pagos permite cambiar de proveedor de cobros por configuración, sin reescribir flujos de negocio.
  • Los controles de fraude y OTP operan sin fricción visible para el usuario en operaciones normales.

stack: react · azure · api gateway · oauth 2 · sha-256 request signing · tokenización de pagos · otp