Agregar Stripe checkout (pago único y suscripciones)
Realizar pagos reales: compras únicas y suscripciones recurrentes.
Cuándo usarlo
Cuando estés listo para cobrar por un producto, servicio, plan o depósito de reserva.
Antes de empezar
- Una cuenta de Stripe: crearla es gratis en stripe.com. Mantente en modo de prueba (test mode) mientras construyes; no necesitas una cuenta comercial activa para probar esto.
- Tus productos en Stripe: crea cada artículo que vendas (Dashboard de Stripe → Productos), ya sea pago único o recurrente, y copia el ID de cada precio (comienza con
price_). - Tu clave secreta de Stripe (Dashboard → Desarrolladores → Claves de API, usa la de prueba que comienza con
sk_test_). Pégala donde tu constructor almacene secretos; nunca en una página o mensaje de chat. - Los inicios de sesión ya deberían funcionar (los clientes necesitan una cuenta para tener una suscripción).
El prompt
Estos prompts funcionan mejor en inglés — pégalos tal como están, incluso en páginas traducidas.
Add Stripe payments to my app. Outcome: customers can pay securely for [what I'm selling — e.g., a product / a plan / a booking deposit]. Requirements: - A checkout for [one-time payment of $X / a subscription at $X per month / both]. - A pricing section with [these plans and prices] and a clear call to action. - After payment: a confirmation page, a receipt by email, and mark the order/subscription as active. - Use Stripe Checkout so I never store card details myself. Must-haves: keep all Stripe secret keys on the server (never in the frontend), verify each payment with a Stripe webhook before granting access, and handle declined cards, cancellations and refunds gracefully. Set it up in Stripe TEST mode first. When done, tell me how to test a payment and exactly what to change to go live.
¿Ya estás creando? Pega esto en tu proyecto. ¿Empiezas de cero? Abre una cuenta gratuita en un creador compatible a continuación.
Créalo en
Qué crea esto
- Una página de precios que enumera lo que vendes
- Un flujo de pago que dirige al usuario a la propia página segura de Stripe
- Una página de "gracias, bienvenido" después de un pago exitoso
- Un registro de quién pagó por qué, para que tu aplicación conozca su estado
Comprueba que funcionó
Pega el prompt, espera a que termine la construcción y luego confirma esto — en lenguaje sencillo, sin comprobaciones técnicas:
- Al hacer clic en un botón de compra, se abre la página de pago de Stripe con el precio y la moneda correctos
- Pagar con la tarjeta de prueba de Stripe (4242 4242 4242 4242, cualquier fecha futura, cualquier CVC) completa la transacción y te devuelve a la página de agradecimiento
- El pago aparece en los pagos de prueba de tu dashboard de Stripe
- Tu aplicación ahora trata a esa cuenta como un cliente de pago (su estado cambió)
- Cancelar en la pantalla de pago te devuelve al sitio sin cobrar ni desbloquear nada
¿Falta algo? Es normal — pídelo en un mensaje corto de seguimiento en vez de volver a ejecutar todo el prompt.
Siguientes pasos
Permitir que los clientes gestionen su propia suscripción
Tan pronto como funcionen los pagos recurrentes
Add a "Manage my subscription" button on the account page that sends the customer to Stripe's own customer portal, where they can update their card, change plan or cancel, and then returns them to my site. Show their current plan and next billing date on the account page.
Sabrás que funcionó cuando: Un cliente de prueba que paga puede cancelar desde el portal, y su aplicación muestra el estado actualizado posteriormente.
Bloquear el contenido de pago adecuadamente
Justo después de que el proceso de pago funcione
Make sure paid-only content is genuinely restricted to paying customers: check that someone with a free account, and someone not logged in at all, cannot reach it by typing the address directly. The restriction must be enforced on the data itself, not only by hiding buttons. Show non-paying visitors a short upgrade message instead.
Sabrás que funcionó cuando: Una cuenta de prueba gratuita ve el mensaje de actualización y no puede acceder al contenido de pago por ninguna ruta que pueda encontrar.
Enviar un correo electrónico de bienvenida estilo recibo
Una vez que los pagos sean fiables
After a successful payment, send the customer a short friendly email confirming what they bought, what they now have access to, and how to get help. Send me a notification of the sale as well.
Sabrás que funcionó cuando: Una compra de prueba genera un correo electrónico para el cliente y una notificación para usted.
Ojo con
- El modo de prueba se ve idéntico al modo en vivo. Antes del lanzamiento, intercambia la clave de prueba por la clave real y realiza un pago real tú mismo; muchas personas descubren con su primer cliente que nunca hicieron el cambio.
- El éxito del pago y el acceso son dos cosas distintas. Confirma que el estado de la cuenta haya cambiado realmente después de pagar; si no es así, indícalo claramente en un mensaje de seguimiento en lugar de volver a ejecutar el prompt.
- Nunca pongas tu clave secreta en una página o en un prompt. Solo debe ir en el área de secretos de tu constructor. Si alguna vez se filtra, renuévala en Stripe inmediatamente.
- Los reembolsos, impuestos y facturas se gestionan en Stripe, no en tu aplicación; no intentes reconstruirlos.
Notas por plataforma
Conecta Stripe primero en las tres plataformas. Base44 configura Stripe mediante un prompt con un entorno de pruebas (sandbox); Lovable genera automáticamente las funciones y tablas de Stripe; v0 utiliza la integración del marketplace de Stripe. Realiza siempre pruebas en el modo de prueba de Stripe antes de salir a producción.
Gasta menos créditos
Toda plataforma te cobra por el trabajo que hace su IA — así que el hábito más barato es pensar antes de construir. Estas seis reglas eliminan la mayor parte del desperdicio, elijas la plataforma que elijas.
- Planifica primero en un chat gratuito. Esboza todo en ChatGPT, Claude o Gemini — páginas, funciones, qué recoge cada formulario, cómo debe verse. Pensar allí es gratis; pensar dentro de un builder se factura.
- Empieza con un prompt escrito, no con una frase. "Hazme una web" es la frase más cara al construir con IA. Un primer prompt completo — como los de este sitio — ahorra decenas de rondas de corrección.
- No seas perezoso con los detalles. Cada detalle que omites vuelve como una corrección que pagas. Nombre del negocio, colores, cada página, cada campo del formulario, qué pasa tras el envío — ponlo todo en el primer prompt.
- Después, un cambio por mensaje. "Arregla la cabecera, y el formulario, y los colores" produce un enredo que cuesta más deshacer de lo que ahorró.
- ¿Atascado? Deja de parchear. Si la misma corrección falla unas tres veces, no envíes una cuarta — describe el estado final deseado de toda la sección en un mensaje nuevo.
- Empieza gratis. Mejora el plan cuando necesites más. Usa la cuota gratuita para crear y explorar tu primera versión. Mejora el plan cuando necesites más uso o funciones de pago, y revisa el coste de los servicios conectados antes del lanzamiento.
Los prompts de esta página están escritos para hacer casi todo este trabajo por ti — de eso se trata.
Lee la guía completaPlaybooks relacionados
Prompts relacionados
Revisado el: 2026-07-27