Integración de Stripe en un stack Flutterflow + Xano

1. Descripción general del objetivo de la integración

Este tutorial explica cómo integrar Stripe Checkout en una aplicación creada con Flutterflow (front-end) y Xano (backend).

El objetivo es permitir que los usuarios accedan a una página de checkout de Stripe y paguen por productos cuyos precios se definen dinámicamente, en lugar de depender de IDs de precios almacenados en Stripe.

Esto resulta especialmente útil en escenarios que requieren cálculos en tiempo real, como descuentos o servicios con precios personalizados.

---

2. Configuración de la Stripe checkout session

En lugar de usar la propiedad estándar line_items.price (que hace referencia a un ID de precio preexistente en Stripe), la solución utiliza line_items.price_data.
Esto permite definir todos los atributos necesarios de forma dinámica:

• ** (currency)**
• Currency
• Unit amount (en céntimos)
• Quantity

Estos campos se configuran de manera programática, permitiendo una fijación de precios totalmente flexible por transacción.

---

3. Diseño del endpoint en Xano

Un endpoint POST dedicado en Xano se encarga de crear la sesión de Stripe Checkout. Siguiendo las buenas prácticas, el nombre del endpoint se mantiene simple y sin verbos mas allás de los nativos de HTTP (por ejemplo, POST /checkout-session).

Lógica clave del backend:

• Recupera la clave API de Stripe adecuada según el entorno (desarrollo o producción).
• Obtiene el ID de cliente de Stripe del usuario.
• Acepta una combinación de parámetros obligatorios y opcionales.

Parámetros obligatorios:

• mode
• success_url
• cancel_url
• customer_email

Parámetros opcionales:
Se utilizan para controlar si el endpoint hace referencia a un ID de precio almacenado o construye un precio dinámicamente.

Este diseño permite que un único endpoint admita tanto precios estáticos como dinámicos.

---

4. Manejo de parámetros y sanitización de datos

Debido a que Flutterflow puede enviar "null" como una cadena en lugar de un valor nulo real, Xano incluye un proceso de sanitización.

Las comprobaciones condicionales garantizan que solo los parámetros no nulos se envíen a Stripe, evitando errores en la API.

Funciones adicionales:

• Soporte de metadatos: se pueden adjuntar pares clave-valor a la checkout session.
• La mensaje final combina tanto los parámetros obligatorios como los opcionales antes de llamar a la API de Stripe.

---

5. Configuración del front-end en Flutterflow

En el lado de Flutterflow, el proceso de pago se activa mediante un botón que ejecuta un action block, en lugar de realizar una llamada directa a la API.

Esto permite insertar lógica personalizada, como:

• Establecer datos de precios dinámicos.
• Manejar los resultados de éxito o error.
• Abrir la página de Stripe Checkout en una nueva pestaña del navegador.

La llamada a la API se configura dentro del grupo de API de Stripe en Flutterflow.

---

6. Respuesta de la API de Stripe y flujo de pago

La respuesta de Xano incluye una checkout URL devuelta por Stripe.
Flutterflow abre esta URL en una nueva pestaña del navegador, permitiendo al usuario completar el pago.

Si la llamada a la API falla, un diálogo personalizado muestra un mensaje de error al usuario.

Flujo general del proceso:

1. Flutterflow envía los datos de precio dinámico a Xano.
2. Xano construye la carga útil correspondiente para Stripe.
3. Stripe devuelve una URL única de pago (checkout URL).
4. Flutterflow abre la URL y gestiona las respuestas de éxito o error.

---