Contenido del curso
Stripe Customer Portal sin código en Lovable
Integrar Stripe con Lovable te permite gestionar suscripciones, limitar funciones por plan y ofrecer un portal de cliente sin construirlo desde cero. Aprenderás a conectar el frontend con la infraestructura de pagos para que tus usuarios gestionen sus planes y tú monetices con límites estratégicos.
Cómo agrego configuración de usuario en el frontend
La primera pieza que faltaba en la app era un espacio donde el usuario pudiera ver y gestionar su cuenta. En lugar de una página tradicional, abrimos un drawer desde la barra de navegación que despliega contraseña, notificaciones, privacidad y, lo más importante, el estado de la suscripción.
Desde ese mismo drawer incluimos un botón de Manage Subscription que envía al usuario al portal de Stripe. Así evitas construir flujos de cancelación, cambio de tarjeta o descarga de facturas desde cero [01:50].
¿Qué es un drawer en una app? Es un panel lateral que se desliza sobre la pantalla actual sin cambiar de página. Funciona bien para configuraciones rápidas porque mantiene al usuario en contexto.
Qué es el Customer Portal de Stripe y por qué te ahorra trabajo
Stripe ofrece un portal no-code llamado Customer Portal que tus usuarios pueden usar para administrar su suscripción sin que escribas una línea de código adicional. Dentro del portal pueden:
Para activarlo, en el dashboard de Stripe buscas portal, entras a Customer Portal y activas el test link. Cuando pases a producción, reemplazas ese enlace por el de la cuenta live [02:30].
Cómo conecto el portal con mi app
Pegas el enlace del portal en el botón Manage Subscription dentro del drawer. Al hacer clic, se abre una nueva pestaña con la información del plan del usuario ya cargada. Si tiene dos suscripciones activas, puede cancelar una sin salir de Stripe.
Esto significa que toda la lógica compleja de billing queda del lado de Stripe, y tu app solo se encarga de mostrar el estado actual.
Cómo limito funciones según el plan del usuario
Tener pagos no sirve si no diferencias la experiencia entre cuentas gratuitas y pagas. Aquí entra el concepto de feature gating: bloquear o liberar funcionalidades según el nivel de suscripción.
En la app de fotos aplicamos una regla simple:
El badge no es decoración. Es una señal visual que refuerza el valor de pagar y hace sentir al suscriptor que está accediendo a algo distinto. Puedes ser creativo con el lenguaje y con los límites: el objetivo es que el power user sienta la fricción y vea clara la razón para suscribirse [05:20].
¿Qué es feature gating? Es la práctica de restringir funciones específicas detrás de un plan pagado. Sirve para incentivar upgrades sin romper la experiencia básica del usuario gratuito.
Cómo pruebo que la limitación funciona
Para validarlo, cierras sesión y entras con una cuenta de prueba sin plan activo. Al intentar subir más de dos fotos, la app debe rechazar el resto. Con una cuenta pagada, la misma acción carga todas las fotos sin problema y las muestra en la tabla del dashboard.
Este tipo de prueba cruzada es clave: confirma que tanto la lógica de Stripe como la del frontend están leyendo correctamente el estado de la suscripción.
Cómo convierto un error en una oportunidad de upsell
Mostrar un toast de error cuando alguien intenta superar el límite es la opción perezosa. La opción inteligente es transformar ese momento de fricción en un upsell.
En lugar del toast, mostramos un modal con tarjetas de precios que invita al usuario a suscribirse. El usuario puede cerrarlo y reintentar con dos fotos, o pasar directo al flujo de pago [08:10].
Algunas variantes que puedes implementar según tu producto:
La lógica de fondo es la misma: cada vez que el usuario topa con un límite, ofrécele una salida que también sea una conversión.
Por qué importa la jerarquía visual del modal
Un modal con pricing cards comunica más que un mensaje de error. Muestra opciones, precios y beneficios en el momento exacto en que el usuario tiene la intención de hacer algo. Ese contexto eleva la probabilidad de conversión frente a una página de pricing visitada en frío.
Lovable se encarga de generar el componente, modificar el dashboard para disparar el modal y crear el display de pricing simplificado. Tú decides el copy y la estética.
¿Has probado integrar Stripe con un no-code builder como Lovable? Cuéntame en los comentarios qué límites te han funcionado mejor para convertir usuarios gratuitos en pagados.
