Sitio corporativo / Fintech
Paguetodo
Website
16 rutas · 4 audiencias · 0 pasos de build
El sitio corporativo de una fintech venezolana: 16 rutas, un mega menú de tres columnas y un formulario que abre tickets reales en el back-office.
Desarrollo front-end y empaquetado (autor declarado en package.json)
el catálogo enrutado
12 productos vendibles
Punto de venta
MiniPOS, AISINO A80 y A90 con ficha técnica
Soluciones de pago
El paraguas comercial de toda la casa
Recargas
Telefonía y servicios del ecosistema
Gestión de inventario
Existencias del comercio
Gestión de caja
Cierre y arqueo diario
Cobranza
Cobro recurrente a clientes
Sistema de vuelto
Versión comercio y versión banca
Botón de pago
Cobro en línea para empresas
Merchant
Consola centralizada de la cadena
Red de recaudación
Puntos de cobro repartidos
Canales
Integración para terceros
Cadenas comerciales
Multi-sucursal bajo un mismo techo
Acerca el cursor: cada pieza del tablero se inclina hacia el puntero y las vecinas se retraen.
Ocho productos, cuatro visitantes distintos
La navegación no se ordenó por catálogo sino por a quién le sirve cada cosa. Antes de hacer clic, el visitante ya se ha reconocido.
Comercios
El abasto de la esquina que quiere cobrar con tarjeta.
MiniPOS · 75 $
Cadenas comerciales
Varias sucursales que necesitan una sola consola.
Merchant
Empresas
Cobro en línea y red de recaudación propia.
Botón de pago
Bancos
Ampliar cartera con productos ya montados.
POS banca · Vuelto
El problema
Paguetodo vende ocho productos financieros distintos a cuatro audiencias que apenas se solapan: un comercio de barrio que quiere un MiniPOS de 75 $, una cadena comercial que necesita un merchant centralizado, una empresa que busca botón de pago y red de recaudación, y un banco que quiere ampliar su cartera. Un sitio plano de tres páginas obligaba a cada visitante a filtrar contenido que no le corresponde, y el canal de contacto era un correo genérico: las solicitudes llegaban sin área, sin tipo y sin datos fiscales, y había que perseguirlas por teléfono. Además, el equipo ya tenía una CDN interna y un back-office propio de tickets, así que la web no podía ser un sitio aislado ni depender de un stack de build ajeno al resto de la casa.
La solución
Se construyó una SPA de rutas por producto —una por cada solución vendible— y se organizó la navegación por audiencia en vez de por catálogo: el mega menú abre tres columnas de tarjetas donde cada enlace lleva su propia frase explicativa, de modo que el visitante identifica su caso antes de hacer clic. La portada refuerza esa lectura con dos carruseles Swiper (audiencias primero, productos después) y una cinta de aliados y bancos. El contacto se resolvió tipificando: `list.config.js` define la taxonomía área × tipo de solicitud → identificador de plantilla, así que el formulario ya no manda texto libre sino un ticket clasificado, con RIF validado por expresión regular y teléfono enmascarado, que entra directo al back-office. Y para no arrastrar un toolchain moderno, todo el framework llega minificado desde la CDN propia y Grunt se encarga de versionar, concatenar y reescribir el HTML de producción.
Lo que sostiene el sitio
Mega menú de tres columnas
Comercios, Empresas y Bancos despliegan un panel de tarjetas donde cada destino lleva chevron amarillo, título azul y una línea que explica el producto. En móvil la misma lista se convierte en un sidebar acordeón con `dropdown-trade`, `dropdown-company` y `dropdown-bank`.
16 rutas sin un solo paso de build
`app.router.js` registra 16 componentes con `RouterModule.forRoot(..., {useHash: true})`. Todo el framework se declara con la API ES5 de Angular, así que el proyecto corre abriendo `index.html` — sin compilar, sin `node_modules` en runtime.
Catálogo de POS con precio y ficha técnica
MiniPOS a 75 $, AISINO A80 a 230 $ y AISINO A90 a 300 $, cada uno con su imagen, sus tres virtudes y un desplegable «Ver detalle» que abre la especificación real (banda magnética, NFC, ARM 32-bit 192 MHz, batería 250 mAh, dimensiones).
Formulario que abre un ticket real
Valida RIF con `/^([VEJPG]{1})([0-9]{4,9}$)/`, teléfono de 10 dígitos con máscara de jQuery y correo, cruza área y tipo de solicitud contra la taxonomía de `list.config.js` y envía `multipart/form-data` a `/issue_open` con cabeceras `X-Paguetodo-ID` y `app-id`.
Empaquetado Grunt con versión automática
`grunt production` sube la versión en package.json, minifica 26 ficheros JS a un único `compress_v<version>.js`, comprime el CSS, copia `assets/` y `views/`, reescribe `#principal_js` / `#principal_css` en `dist/index.html` y comenta los `<script>` de desarrollo.
El sitio, pantalla por pantalla
Cabecera azul de borde a borde, amarillo reservado para la acción y gris muy claro para los paneles. Reconstruido aquí en HTML y CSS.
MiniPos
El control de tu negocio
en tus manos
PAGUETODO
Bs 1.240,00
Inserte o acerque la tarjeta
Canales
Soluciones pensadas para este perfil.
Conoce más →Comercio
Soluciones pensadas para este perfil.
Conoce más →Bancos
Soluciones pensadas para este perfil.
Conoce más →Gestiona tu Negocio
SIN ESPERAS
Soluciones financieras para comercios, cadenas, empresas y bancos.
CONÓCENOSProductos
Punto de Venta
INFORMACIÓNSistema de caja
INFORMACIÓNBotón de pago
INFORMACIÓNINVENTARIO
INFORMACIÓNCobranza
INFORMACIÓNVuelto
INFORMACIÓNMerchant
INFORMACIÓNAliados comerciales
Portada (/init)
Para tu comercio
Punto de venta
El POS es un sistema esencial para la gestión eficaz de ventas y operaciones del día.
Gestión de Inventario
Controla existencias, entradas y salidas sin salir del mostrador.
Gestión de caja
Arqueo y cierre diario con el detalle de cada movimiento.
Para cobrar mejor
Sistema de vuelto
Devuelve el cambio en saldo en vez de en efectivo escaso.
Recargas
Telefonía y servicios vendidos desde el mismo terminal.
Soluciones de pago
El paraguas que agrupa todas las formas de cobro de la casa.
Para tu empresa
Botón de pago
Cobro en línea integrado a tu web o a tu aplicación.
Cobranza
Cobro recurrente y seguimiento de la cartera de clientes.
Red de recaudación
Puntos de cobro repartidos para recibir por ti.
.activea marca el enlace abierto · el chevron gira de ▾ a ▴
Mega menú de cabecera
Punto de venta
Gestión de inventario
Gestión de caja
Sistema de vuelto
el mismo menú, en móvil
Tres terminales con precio y ficha técnica
Pulsa «Ver detalle» en cualquiera de las tres tarjetas: el disparador cambia de ＋ a − y abre la especificación real del equipo.
La Solución que NECESITAS
Puntos de venta para comercios y banca
Puntos de venta
PAGUETODO
Bs 1.240,00
Inserte o acerque la tarjeta
MINIPOS
$75
Inalámbrico
Bluetooth
Fácil de usar
Banda magnética
Tarjeta NFC
Compatible con Android
Procesador ARM 32-bit 192 MHz
Batería de litio 250 mAh 3,7 V
99 × 59,03 × 16,1 mm
PAGUETODO
Bs 1.240,00
Inserte o acerque la tarjeta
AISINO A80
$230
Inalámbrico
Impresora
Pantalla táctil
PAGUETODO
Bs 1.240,00
Inserte o acerque la tarjeta
AISINO A90
$300
Inalámbrico
Android
Batería extendida
Gestión rápida
Diversidad de cobro
Atención personalizada
Sencillez
Preguntas frecuentes
Todo lo que un comercio pregunta antes de instalar su primer terminal.
1. Enciende el terminal. 2. Marca el monto. 3. Pide al cliente insertar o acercar la tarjeta.
Punto de venta (/point-sales)
Un contacto que abre un ticket real
Área del servicio × tipo de solicitud: la combinación decide la plantilla del back-office. Elige una y mira lo que se envía.
Escríbenos
is-invalid · el correo no tiene formato válido
Área del servicio
POSTipo de solicitud
SolicitudAsunto
Instalación de terminal¿Quiénes somos? (/us)
list.config.js
Área del servicio
Tipo de solicitud
POST /issue_open
Content-Type: multipart/form-data
X-Paguetodo-ID: ‹id de la aplicación›
app-id: website
— — — —
area: POS
type: Solicitud
rif: J-410258963
phone: 04148624450
template: resuelta ✓
¡Gracias por enviar su solicitud! — el ticket entra tipificado al back-office.
RIF validado con /^([VEJPG]{1})([0-9]{4,9}$)/ y teléfono enmascarado a 10 dígitos con jQuery Mask.
Y una ruta que no vende nada: suscribir un equipo por su serial
Se abre desde un enlace con ?identifier=, consulta el parque de equipos financieros y decide qué mostrar. Prueba los dos desenlaces.
/#/suscription-finantial-app?identifier=SN-A90-44127
Suscríbete
Acepto el contrato de servicio (PDF)
Suscribir equipoSuscripción de equipo financiero (/suscription-finantial-app)
Las maquetas reproducen la interfaz real; los datos que muestran son de ejemplo.
el repositorio en números
16
rutas SPA registradas
22
vistas HTML
19
componentes Angular
5
instancias Swiper
3
endpoints REST consumidos
4.382
líneas de CSS propio
177
imágenes y SVG en assets
334
cadenas en el diccionario es
El mismo tablero, ahora en orden de carga
index.html no compila nada: encadena los ficheros en un orden que importa. Estas son las seis capas, de la CDN a los controladores.
CDN
shim.min.js · all-node-modules.js
Los bundles de Angular ya minificados desde staticd.paguetodo.com
Configuración
index_v4.js
Dominio, realm, business_id y URLs de la API
Taxonomía
list.config.js
Áreas × tipos de solicitud → plantilla del back-office
Utilidades
i18n · messages.es · utils · msg · loading
Diccionario en español y helpers de interfaz
Servicios
app.callservices.js
La única puerta a la red: cabeceras, timeout de 120 s y sesión
Pantallas
paguetodo-controllers/* · app.router.js · app.module.js
19 controladores IIFE, 16 rutas con useHash y 24 declaraciones
Arquitectura de SPA clásica montada sin transpilación. `index.html` carga en orden: los bundles de Angular desde la CDN interna (`shim.min.js` y `all-node-modules.js`), la configuración de entorno (`index_v4.js`, con dominio, realm, business_id y URLs de API), la taxonomía comercial (`list.config.js`), las utilidades (`i18n.js`, `messages.es.js`, `utils.js`, `msg.js`, `loading.js`, `custom-table.js`), la capa de servicios (`app.callservices.js`) y por último los 19 controladores, el componente raíz, el router y el módulo. Cada controlador es un IIFE que registra un componente en `window.app` con `ng.core.Component({selector, templateUrl}).Class({...})` y apunta a su plantilla en `views/`. El módulo declara 24 entradas —19 pantallas más `LoadingServiceComponent`, `MsgComponent`, `CustomTableComponent`, `AppComponent`— y provee `AppCallService`. Ese servicio es la única puerta a la red: normaliza cabeceras, resuelve tres casos (`website-request`, `device-get`, `device-suscribe`) contra dos bases de enlace, aplica `timeout` de 120 s, muestra y oculta el spinner, y en las respuestas 401/403 o con mensaje de sesión inválida limpia storage y redirige al login. Header, footer y sidebar son componentes globales embebidos en cada vista, y el footer concentra la inicialización de los cuatro carruseles Swiper. Para producción, Grunt colapsa los 26 ficheros en un bundle versionado, minifica el CSS, copia `assets/` y `views/` a `dist/` y reescribe el `index.html` con `replace_attribute` + `toggleComments`.
Cinco decisiones que hubo que defender
reto 01
Mantener un sitio Angular sin adoptar TypeScript ni Angular CLI, y sin que el equipo dependiera de un toolchain distinto al del resto de la casa.
cómo se resolvió
Se usó la API ES5 del framework: cada componente es `ng.core.Component({...}).Class({constructor: [...deps, function(){}]})` con inyección por arreglo, y los bundles del framework se sirven ya minificados desde `staticd.paguetodo.com`. El resultado corre abriendo el HTML, sin paso de compilación en desarrollo.
reto 02
26 archivos JS sueltos, 4.382 líneas de CSS y 177 imágenes: en desarrollo eso son decenas de peticiones por carga.
cómo se resolvió
Un pipeline de Grunt (`bump` → `uglify` → `cssmin` → `copy` → `replace_attribute` → `toggleComments`) genera `compress_v<version>.js` y `compress_v<version>.css`, reescribe los atributos `src`/`href` de los tags `#principal_js` y `#principal_css`, y comenta el bloque de `<script>` de desarrollo del `index.html` de `dist/`. La versión del bundle sale de package.json, así que el nombre de archivo rompe caché en cada publicación.
reto 03
Las solicitudes de la web llegaban sin clasificar al equipo comercial, imposibles de enrutar.
cómo se resolvió
Se modeló la taxonomía completa en `list.config.js`: cinco áreas (POS, Recarga, Soluciones de pago, Cobranza, Desarrollo a la medida) por cuatro tipos (sugerencia, reclamo, queja, solicitud), cada combinación mapeada al UUID de plantilla del back-office. El formulario encadena los selects, y cuando una combinación no tiene plantilla abre un modal que deriva al correo de operaciones en vez de fallar en silencio.
reto 04
Quince destinos de producto no caben en una barra de navegación, y menos en móvil.
cómo se resolvió
En escritorio, tres ítems (Comercios, Empresas, Bancos) abren mega paneles de tres columnas con descripción por enlace; en móvil, un sidebar oscuro con acordeones que cierran a los demás al abrir uno y se colapsan al hacer clic fuera. La hamburguesa adicional tiñe su icono de amarillo mientras el panel está abierto.
reto 05
Los contadores de «Comprometidos con tu éxito financiero» se reiniciaban cada vez que el usuario volvía a la sección.
cómo se resolvió
Un flag `hasAnimated` en el componente y un listener `mouseover` sobre el contenedor: el `setInterval` que incrementa años, clientes y aliados arranca una única vez por visita y se limpia al alcanzar el objetivo.
Todo lo que ya está publicado
Portada con banner MiniPos, CTA «Regístrate» hacia el registro de la app y dos carruseles Swiper: audiencias (Canales, Comercio, Bancos, Empresa, Cadenas Comerciales) y productos (Punto de Venta, Sistema de caja, Botón de pago, Inventario, Cobranza, Vuelto, Merchant).
Cintas horizontales de «Aliados comerciales» (Sunmi, Meru, Apolo, Servipunto), «Bancos aleados» y «Servicios disponibles», con autoplay cada 3,5 s y breakpoints de 2 a 5 tarjetas.
Páginas dedicadas para punto de venta, punto de venta banca, soluciones de pago, botón de pago, recarga, cobranza, red de recaudación, gestión de inventario, gestión de caja, sistema de vuelto (comercio y banca), merchant y canales.
Acordeón de preguntas frecuentes por producto, con icono chevron amarillo que alterna arriba/abajo y respuestas paso a paso (cómo cobrar, qué tarjetas se aceptan).
Página «¿Quiénes somos?» con misión, visión y tres contadores animados —años de experiencia, clientes conectados, aliados comerciales— que se disparan una sola vez al pasar el ratón por la sección.
Formulario de contacto con selección en cascada: área del servicio (POS, Recarga, Soluciones de pago, Cobranza, Desarrollo a la medida) → tipo (Sugerencia, Reclamo, Queja, Solicitud) → asunto concreto, y modales Bootstrap de éxito, fallo y «no hay plantilla para esta combinación».
Ruta de suscripción de equipos financieros que lee el `identifier` del query string, consulta el serial contra el parque de equipos y permite suscribir el dispositivo a un plan.
Cabecera azul fija con logo SVG, botón «Iniciar sesión» hacia `app.paguetodo.com` y hamburguesa que abre un panel de todos los productos.
Pie negro con dirección de Altamira, teléfonos, WhatsApp, dos correos operativos, enlaces de interés y cinco redes sociales.
Capa de mensajes en español centralizada (`messages.es.js` + helper `_()`), con más de 300 cadenas de error del ecosistema Paguetodo.
Cinco capas y ni un node_modules en el navegador
Framework
UI y estilos
Utilidades de navegador
Build y tooling
Integración
Lo que el sitio vende de verdad
Capturas de la aplicación Paguetodo: recargas, inventario, métodos de pago y recibos. El sitio corporativo es la puerta de entrada a este ecosistema.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
Arrastra para recorrer las 16 capturas.
Un sitio corporativo
que trabaja
Sitio institucional y comercial de Paguetodo, empresa venezolana de soluciones financieras: puntos de venta, recargas, cobranza, botón de pago, gestión de caja e inventario.
Es una SPA de Angular escrita íntegramente con la API ES5 (`ng.core.Component(...).Class(...)`): sin TypeScript, sin Angular CLI y sin `node_modules` en el navegador — los bundles del framework se cargan por `<script>` desde una CDN propia, `staticd.paguetodo.com`.
19 componentes y 22 vistas HTML cubren 16 rutas de producto, agrupadas en cuatro audiencias comerciales: Comercios, Cadenas comerciales, Empresas y Bancos.
El único formulario del sitio no es decorativo: arma un `FormData` validado (RIF, teléfono venezolano, correo) y lo publica contra `/issue_open` de la API de Paguetodo, creando una solicitud tipificada en el sistema interno.
La compilación es un pipeline de Grunt que sube versión, minifica todo a un solo `compress_vX.Y.Z.js`, reescribe los atributos del `index.html` y comenta los `<script>` de desarrollo.
Paguetodo Website
¿Quieres algo así para tu producto?
Un sitio institucional que no se queda en folleto: enruta 16 productos por audiencia, clasifica cada solicitud antes de enviarla y se publica con un pipeline propio. Si necesitas algo así —web comercial conectada a tu back-office— es terreno conocido.