Añade pagos con Stripe a tu app de Coderblock

Descubre cómo añadir productos, precios y flujos de checkout reales de Stripe a una app de Coderblock con solo chatear con el agente de IA. Este tutorial explica la configuración de Stripe con una cuenta gestionada o propia, las pruebas, el acceso a la base de datos y la publicación.

7 de agosto de 2026 8 min

Qué vas a crear

Con Coderblock puedes añadir pagos con Stripe a una app existente sin tener que programar manualmente endpoints de checkout, webhooks ni código para gestionar los pagos. Solo tienes que describir en el chat lo que quieres conseguir: el agente conecta el frontend, el backend, la base de datos y la configuración de Stripe necesarios para completar la integración.

En este tutorial aprenderás a añadir:

una suscripción recurrente;
un pago único.

Empezarás en el modo de prueba de Stripe, comprobarás todo el recorrido del cliente y, cuando todo funcione correctamente, pasarás a los pagos reales y publicarás la app. Antes de empezar, define:

qué comprarán los clientes;
si el pago será único o recurrente;
el precio y la moneda;
qué funciones o contenidos estarán disponibles después del pago;
si quieres utilizar una cuenta de Stripe gestionada por Coderblock o tu propia cuenta de Stripe.

Paso 1: abre o crea tu app

Abre el proyecto de Coderblock al que quieras añadir los pagos. Si empiezas desde cero, puedes describir la app en lenguaje natural o elegir una de las plantillas de producto disponibles. Por ejemplo:

Crea un sitio de suscripción para cursos de cocina online. Los visitantes pueden explorar los cursos, pero solo los suscriptores de pago pueden ver los vídeos completos.

Coderblock genera el frontend con React, Vite, TypeScript y Tailwind, además de un backend real y una base de datos Postgres específica para el proyecto. Durante el desarrollo, puedes previsualizar la app en <app>.coderblock.dev. Los cambios se aplican mientras sigues trabajando con el agente mediante el chat. Si la app requiere cuentas de cliente, es recomendable añadirlas antes de configurar los pagos:

Añade el registro y el inicio de sesión para los clientes. Protege el área privada para que solo puedan acceder los usuarios autenticados.

El agente utiliza Supabase Auth en lugar de crear una tabla personalizada para las contraseñas. También configura la gestión de sesiones, las rutas protegidas y la Row Level Security de Postgres vinculada a cada usuario autenticado.

Paso 2: describe el modelo de pago

Ahora explícale al agente qué quieres vender. Indica el nombre del producto, el precio, la moneda, la frecuencia de facturación y lo que debe ocurrir después del checkout.

Para una suscripción

Puedes escribir:

Añade una suscripción a Cooking Club por 9,99 € al mes. Los clientes autenticados deben poder suscribirse desde la página de precios. Después del pago, permíteles acceder al área privada protegida.

Para un pago único

O bien:

Añade un checkout de pago único de 49 € para el Curso avanzado de repostería. Después del pago, indica que el cliente tiene acceso al curso.

El agente creará el producto y el precio reales en Stripe, configurará la experiencia de checkout, la vinculará al cliente autenticado y añadirá la lógica de backend necesaria para registrar el estado del pago. También se encargará de la integración con el webhook de Stripe. En este punto, revisa la vista previa en directo. Comprueba que:

el nombre del producto;
el precio;
la frecuencia de facturación;
la llamada a la acción;
la experiencia posterior al checkout

sean los que deseas. Si quieres cambiar algo, solo tienes que pedirlo en el chat:

Cambia el texto del botón a «Inicia tu suscripción» y muestra encima una breve lista de ventajas.

Paso 3: elige cómo conectar Stripe

Coderblock permite conectarse a Stripe de dos formas. La opción gestionada es la predeterminada y no requiere claves de API.

Opción A: utiliza una cuenta de Stripe gestionada

Pide al agente que continúe con la configuración gestionada predeterminada. Te hará algunas preguntas sencillas, como el país y el nombre de la empresa, y creará la cuenta de Stripe para el proyecto. No tendrás que copiar claves de API ni configurar manualmente los webhooks: Coderblock gestiona el webhook de pagos y conecta el proyecto de forma automática. Más adelante podrás completar la verificación de identidad y la configuración de las transferencias mediante el enlace de onboarding de Stripe que te proporcionará el agente. Cuando estés listo para recibir pagos reales, abre el enlace y completa la información empresarial solicitada por Stripe.

Opción B: utiliza tu propia cuenta de Stripe

Si ya tienes una cuenta de Stripe y quieres conectarla al proyecto, escribe:

Conecta este proyecto a mi cuenta de Stripe actual.

El agente solicitará STRIPE_SECRET_KEY mediante un campo seguro específico para variables de entorno. Introduce la clave únicamente en ese campo. Coderblock guarda los secretos en el almacenamiento server-side del proyecto, lo que evita que la clave se incluya en el código generado o aparezca en el chat. Después de recibir la clave, el agente registra automáticamente el webhook necesario y completa la integración. No introduzcas manualmente secretos en los archivos del frontend ni pidas a la app que los exponga en el código ejecutado por el navegador.

Paso 4: prueba todo el flujo de checkout

Mantén la integración en modo de prueba hasta que hayas comprobado que todo el recorrido funciona correctamente. Abre la vista previa en directo y prueba la experiencia como lo haría un cliente:

Crea una cuenta de usuario de prueba o inicia sesión con una existente.
Abre la página de precios o del producto.
Selecciona el producto de pago.
Completa el checkout de prueba de Stripe.
Vuelve a la app después del pago de prueba.
Comprueba que se hayan desbloqueado el contenido, la función o el estado de cuenta correctos.
Actualiza la página o vuelve a iniciar sesión para comprobar que el acceso siga activo.

No pruebes únicamente el recorrido satisfactorio. Haz también una prueba con una cuenta que no haya realizado el pago y comprueba que no pueda acceder a las funciones de pago protegidas.

Comprueba también el backend

Desde la pestaña Backend del editor de Coderblock puedes revisar:

las tablas;
los usuarios autenticados;
el almacenamiento;
las funciones de la app.

Comprueba que la información del pago o de la suscripción esté asociada al usuario autenticado correcto. La Row Level Security también debe impedir que un cliente lea o modifique los datos privados de otro cliente. Si algo no funciona como esperabas, describe al agente el comportamiento que observas en lugar de intentar modificar manualmente el código de los pagos. Por ejemplo:

El checkout se completa correctamente, pero el panel del área privada sigue bloqueado. Actualiza el acceso después de confirmar el pago con Stripe y asegúrate de que siga funcionando después de volver a iniciar sesión.

El agente podrá intervenir en el frontend, el esquema de la base de datos, las reglas de seguridad y el comportamiento del backend.

Paso 5: añade vistas para clientes y administradores

Un buen flujo de pago debe mostrar con claridad al cliente el estado de su cuenta después del checkout. Por ejemplo, puedes pedirle al agente:

Añade a la página de la cuenta del cliente una sección de facturación que muestre el plan actual y el estado del pago.

También puedes crear una vista específica para administradores:

Añade una página de administración protegida que muestre los clientes, el producto elegido y el estado actual del pago. Solo los usuarios con el rol de administrador pueden abrirla.

Las apps de Coderblock ya incluyen una tabla de perfiles y una estructura básica de roles. Por tanto, el agente puede vincular el acceso administrativo a los roles autenticados y aplicar las políticas adecuadas en la base de datos.

Paso 6: pasa a los pagos reales y publica

Cuando hayas comprobado que el checkout, las cuentas y las rutas protegidas funcionan correctamente, comunica al agente que estás listo para pasar a los pagos reales. Antes de continuar:

confirma los precios definitivos;
comprueba la moneda;
revisa los intervalos de facturación;
completa cualquier trámite de Stripe necesario para recibir transferencias;
completa la verificación de identidad, si es necesaria.

A continuación, realiza una última comprobación de la configuración en modo live. Asegúrate de que el producto en producción, el precio, la moneda, el intervalo de facturación, el comportamiento posterior al pago y las funciones restringidas sean correctos. Cuando todo esté listo, haz clic en Publicar. La app se desplegará en <app>.coderblock.app, con SSL incluido.

Si prefieres utilizar un dominio personalizado, abre Configuración → Dominios. Puedes conectar un dominio que ya tengas siguiendo el proceso guiado de configuración DNS o comprar uno directamente en Coderblock, con configuración automática de DNS y SSL.

Una última prueba en producción

Después de publicar, vuelve a comprobar el checkout en el entorno de producción. El cambio del modo de prueba al modo live requiere una comprobación específica: asegúrate de que pueda comprarse el producto correcto, que el pago actualice la cuenta correctamente y que solo los usuarios autorizados puedan acceder al contenido restringido. Si necesitas realizar cambios, puedes seguir trabajando en el chat, comprobarlos en la vista previa en directo y publicarlos mediante una nueva actualización.

Checklist final

Antes de aceptar clientes reales, comprueba que:

Los nombres de los productos, los precios, las monedas y los intervalos de facturación sean correctos.
El inicio de sesión sea obligatorio cuando los pagos deban asociarse a un usuario.
Los pagos completados desbloqueen exclusivamente las funciones previstas.
Los usuarios que no hayan pagado no puedan acceder al contenido protegido.
Los datos de pago estén asociados a la cuenta correcta.
La Row Level Security proteja los datos de los clientes.
Los secretos se hayan proporcionado únicamente mediante los campos seguros.
El onboarding de Stripe esté completo para poder recibir pagos reales.
El dominio de producción y el flujo de retorno desde el checkout funcionen correctamente.

Listo. Tu app de Coderblock ya dispone de un flujo de pago real con Stripe, conectado al frontend, el backend, la autenticación y la base de datos Postgres. Y lo más importante es que puedes seguir modificándolo con solo describir en el chat lo que quieres cambiar.