Requisitos
Antes de integrar Stripe, asegúrese de contar con lo siguiente:
Una aplicación de MGX en funcionamiento.
Un proyecto de MGX ya conectado a un proyecto de Supabase (consulte la guía de Supabase para más detalles).
Productos creados y precios correspondientes en su panel de Stripe.
Nota: El modo de vista previa (Preview) no puede usarse para probar la funcionalidad de pago. Debe desplegar (Deploy) su aplicación de MGX y cambiar Stripe a Modo de Prueba (Test Mode) para verificar la integración.
Tarjeta de prueba: 4242 4242 4242 4242
Cualquier fecha de vencimiento futura y cualquier CVC de tres dígitos son válidos.
Configuración de Pagos con Stripe
1. Conectar Supabase
Haga clic en el botón Supabase en la esquina superior derecha de MGX.
Siga la guía de conexión de Supabase para seleccionar su proyecto de Supabase de destino.
Una vez conectado, podrá configurar los ajustes de pago desde Supabase.
2. Describir los Requisitos de Suscripción en Lenguaje Natural
Ejemplo: “Cree un sistema de pago que admita tres planes de suscripción: $4.99 por semana, $14.99 por mes y $149.99 por año.”
Después de enviar la solicitud, el Agente de MGX generará los botones de configuración. Debe completar al menos dos campos.
3. Agregar la Stripe Secret Key
Haga clic en Add Stripe Secret Key.
Ingrese su clave secreta de Stripe en el campo STRIPE_SECRET_KEY.
Para cada plan, ingrese el Price ID de Stripe correspondiente.
Cómo encontrar la Stripe Secret Key:
Cómo copiar el Price ID:
Vaya a Product Catalog > Products.
Haga clic en el botón More a la derecha del precio correspondiente y seleccione Copy Price ID.
o
Haga clic en el nombre del precio para abrir la página de detalles y copie el Price ID que aparece en la esquina superior derecha.
⚠️ Atención: Por motivos de seguridad, no pegue su clave secreta directamente en el chat de MGX.
Use el botón Add API Key para guardarla de forma segura.
4. Agregar la Stripe Webhook Secret Key
Haga clic en Add Stripe Webhook Secret Key.
Ingrese su Webhook Secret Key.
Cómo encontrar el Webhook Secret Key:
En Stripe, haga clic en Developers en la esquina inferior izquierda y seleccione Webhooks.
Haga clic en Add destination.
Seleccione los eventos de webhook que se adapten a las necesidades de su proyecto:
checkout.session.async_payment_failed
checkout.session.async_payment_succeeded
checkout.session.completed
checkout.session.expired
Haga clic en Continue y luego seleccione Webhook endpoint.
Ingrese la Endpoint URL de Supabase.
Cómo encontrar la Endpoint URL de Supabase:
En MGX, haga clic en View Edge Function.
Seleccione la función con el sufijo _webhook.
En el panel de detalles, copie la Endpoint URL y péguela en el destino de eventos de Stripe.
Prueba de la Integración
Use el Modo de Prueba de Stripe para realizar pagos de prueba.
Datos de la tarjeta de prueba:
Número de tarjeta: 4242 4242 4242 4242
Fecha de vencimiento: cualquier fecha futura
CVC: cualquier número de 3 dígitos
Preguntas Frecuentes (FAQ)
P. ¿Por qué no puedo probar pagos en el modo de vista previa?
R. El modo de vista previa se ejecuta en un entorno local que no proporciona una URL de Webhook accesible públicamente. Debe desplegar la aplicación para recibir eventos de Stripe.
P. ¿Cómo cambiar al modo de producción?
R. En el panel de Stripe, desactive el Test Mode y use su Secret Key y Webhook Secret en vivo.
P. ¿Cómo verificar si un pago de prueba fue exitoso?
R. Después de completar un pago de prueba, vaya a la página Payments de Stripe para ver el registro de la transacción de prueba.