Implementación del modelo freemium y checkout con Stripe

Epica opera con un modelo freemium: informes básicos gratuitos e informes premium de pago. Esta actualización implementó la infraestructura completa para diferenciar ambos tipos y procesar pagos.

Selector de tipo de informe

Añadimos un componente ReportTypeSelector en el Hero que permite elegir entre informe gratuito y premium antes de iniciar la generación. La selección determina el modelo de IA utilizado y el límite de tokens del informe resultante.

Diferenciación de modelos de IA

Los informes gratuitos usan un modelo estándar con límite de 3500 tokens. Los informes premium utilizan Gemini 3 Pro con capacidad de grounding (acceso a información actual de la web) y límite de 6000 tokens. La diferencia en extensión y profundidad del análisis es considerable.

La función de generación recibe el parámetro isPremium y selecciona el modelo y configuración correspondiente. También hay lógica diferenciada para la generación de imágenes.

Integración de Stripe

Implementamos Stripe Embedded Checkout para procesar pagos sin redireccionar a páginas externas. El flujo funciona así:

1. Usuario selecciona premium y envía el formulario
2. Frontend llama a función serverless que crea una sesión de Stripe
3. Se renderiza el formulario de pago embebido en un modal
4. Tras pago exitoso, Stripe redirige a página de confirmación
5. La página de confirmación inicia la generación del informe

El modal de pago pasó por varias iteraciones de diseño. La versión final usa el componente Drawer de Vaul para móviles (desliza desde abajo) y Dialog de Radix para escritorio. Esto se implementa con un hook useMediaQuery que detecta el viewport.

Controles administrativos

Los administradores tienen bypass de límites para testing. Esto se controla con un parámetro URL ?premium=true que solo funciona para usuarios con rol admin.

Cambios técnicos

• Componente ReportTypeSelector con estado en contexto
• Stripe Embedded Checkout con @stripe/react-stripe-js
• Función serverless para crear sesiones de pago
• Modal responsive con Drawer (móvil) / Dialog (escritorio)
• Configuración de modelos de IA por tipo de informe
• Bypass de admin vía parámetro URL verificado en backend