Conectar Stripe
MGX ahora admite la configuración rápida de pagos de Stripe mediante Supabase Edge Functions.
Requisitos
Antes de integrar Stripe, asegúrate de tener:
- Una aplicación MGX en funcionamiento.
- El proyecto de MGX ya está conectado a un proyecto de Supabase. (Más información sobre Supabase.)
- Productos creados y sus precios correspondientes en tu dashboard de Stripe.
Nota: El modo de vista previa no se puede usar para probar la funcionalidad de pagos. Implementa tu app de MGX y cambia Stripe a modo de prueba para verificar la integración.
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
Configuración de pagos de Stripe
Conectar Supabase
- Haz clic en el botón de Supabase en la esquina superior derecha de MGX
- Sigue las Guías de Conectar Supabase para seleccionar tu proyecto de Supabase de destino
- Una vez conectado, puedes configurar los ajustes de pago mediante Supabase
Describe los requisitos de tu suscripción en lenguaje natural
- Ejemplo: Crea un sistema de pagos que admita tres planes de suscripción a $4.99 por semana, $14.99 por mes y $149.99 por año.
Después de enviarlo, el Agente de MGX generará botones de configuración. Tendrás que completar al menos dos campos.
Haz clic en el botón
Add Stripe Secret Key
- Introduce tu clave secreta de Stripe en el campo STRIPE_SECRET_KEY.
- Para cada plan, introduce su ID de precio de Stripe correspondiente en el campo que termina en PRICE_ID.
Puedes obtener tu clave secreta de Stripe aquí: https://dashboard.stripe.com/test/apikeys
Ve a Product Catalog > Products y obtén el ID de precio usando cualquiera de los siguientes métodos:
- En la lista "Pricing", haz clic en el botón “More” a la derecha del precio correspondiente y luego haz clic en "Copy Price ID".
Puedes hacer clic directamente en el nombre del precio para abrir la página de detalles y luego copiar el ID de precio que se muestra en la esquina superior derecha.
Por último, pega con precisión cada ID de precio en el campo de entrada correspondiente.
Nota: Por privacidad y seguridad, nunca pegues tu clave secreta directamente en el chat de MGX. La exposición puede permitir el acceso no autorizado a tu cuenta de Stripe. Usa en su lugar el botón "Add API Key" de MGX para almacenarla de forma segura.
Haz clic en el botón
Add Stripe Webhook Secret Key
- Introduce tu clave secreta de Webhook
Cómo encontrar la clave secreta de Webhook:
En Stripe, haz clic en “Developers” en la esquina inferior izquierda y luego selecciona la opción Webhooks.
En la página de Webhooks, haz clic en el botón "Add destination".
Selecciona los eventos de webhook que coincidan con las necesidades de tu proyecto:
checkout.session.async_payment_failedcheckout.session.async_payment_succeededcheckout.session.completedcheckout.session.expired
Después de hacer clic en "Continue", selecciona "Webhook endpoint."
Introduce la URL del endpoint de Supabase.
Cómo encontrar la URL de tu endpoint de Supabase:
Haz clic en
View Edge Functionen MGX.
Haz clic para seleccionar la edge function con el sufijo
_webhookcorrespondiente.
En el panel Details de la edge function correspondiente, copia la URL del Endpoint y pégala en Stripe Event Destination.
Prueba tu Integración
Usa el modo de prueba de Stripe para probar pagos.
Detalles de la tarjeta de prueba:
- Número de tarjeta: 4242 4242 4242 4242
- Cualquier fecha de vencimiento futura
- Cualquier CVC de 3 dígitos
Preguntas frecuentes
¿Por qué no puedo probar pagos en el modo de vista previa?
El modo de vista previa se ejecuta en un entorno local, que no proporciona una URL de Webhook accesible públicamente. Debes implementar tu app para recibir eventos de Stripe.
¿Cómo cambio al modo de producción?
Puedes desactivar el modo de prueba en el Dashboard de Stripe y usar tu Secret Key activa y tu Webhook Secret activo.
¿Cómo puedo verificar si un pago de prueba fue exitoso?
Después de completar un pago de prueba, ve a la página Payments en Stripe para ver los registros de tus transacciones de prueba.