Cómo vender desde una app con Payments de AI Studio
HighLevel lanzó Payments en AI Studio para convertir aplicaciones en tiendas conectadas al catálogo de la cuenta. La función incorpora un checkout alojado, suscripciones y ofertas posteriores a la compra, pero actualmente solo está disponible para proyectos creados con TanStack Start.
Del catálogo al checkout sin colocar el código de pago dentro de la aplicación
Payments conecta el catálogo de HighLevel con un checkout alojado, suscripciones y ofertas posteriores a la compra.
HighLevel incorporó Payments en AI Studio para que una aplicación pueda mostrar productos, recibir pedidos y aceptar pagos mediante un checkout alojado. La función está lanzada con disponibilidad limitada: actualmente funciona únicamente en aplicaciones construidas con TanStack Start.
Qué lanzó HighLevel en AI Studio
El material del video ubica el lanzamiento el 8 de octubre. El changelog de HighLevel lo presenta como una función nueva y afirma que ya se pueden recibir pagos en aplicaciones creadas con AI Studio. No se trata solo de un anuncio futuro: Payments puede activarse en los proyectos compatibles.
Payments utiliza el sistema de pagos nativo de HighLevel. Los productos, pedidos, proveedores de pago y suscripciones son los que ya están configurados en la cuenta. Esto permite reutilizar el catálogo existente en lugar de crear otro sistema para la aplicación.
| Elemento | Qué hace Payments |
|---|---|
| Productos | Conecta los productos existentes del catálogo |
| Precios | Permite autorizar un precio fijo, variaciones seleccionadas o el catálogo completo |
| Pedidos | Usa los pedidos configurados dentro de HighLevel |
| Cobro | Procesa los datos mediante un checkout alojado |
Estado de la función
Payments está lanzado, pero no tiene disponibilidad para todos los tipos de proyecto. Por ahora, solo aparece en aplicaciones creadas con TanStack Start.
Cómo activar pagos dentro de una aplicación
La configuración comienza en la nueva pestaña More → Payments. Desde ahí se habilitan los pagos, se elige entre el modo de prueba y el modo real, y se define qué productos y precios podrá utilizar la aplicación.
Activa Payments
Abre More → Payments y enciende la función para el proyecto compatible.
Define el entorno y el catálogo
Selecciona el modo de prueba o el modo real. Después autoriza los productos, precios y variaciones que la aplicación podrá mostrar y cobrar.
Pide al agente que agregue pagos
Solicita al agente “add payments”. El sistema muestra una tarjeta para aprobar la conexión antes de construir la tienda y el checkout.
Las reglas de configuración determinan qué puede comprar cada cliente. Si un producto o precio no fue autorizado, no puede mostrarse ni cobrarse desde la aplicación.
Qué protege el checkout alojado
Los datos de la tarjeta se capturan y procesan en el checkout alojado de la plataforma, nunca dentro del código de la aplicación. El código de pagos también es administrado por HighLevel: si el usuario o el agente lo modifica, se restaura en el siguiente turno.
- Los datos de tarjeta no se colocan en el código de la aplicación.
- Todas las compras incluyen protección contra bots.
- El checkout adopta el esquema de colores del sitio.
- PayPal Express está disponible como opción de checkout.
- Los cupones pueden aplicarse durante el pago.
- Una orden totalmente descontada puede completarse sin solicitar una tarjeta.
Alojado no significa configurable sin límites
El código de pagos está bajo control de la plataforma. Esto reduce el riesgo de romper accidentalmente el proceso, pero también significa que no debe tratarse como código común de la aplicación.
Catálogo, suscripciones y ofertas posteriores a la compra
Las tiendas generadas pueden mostrar listados y páginas de detalle con miniaturas y descripciones formateadas tomadas del catálogo. El checkout admite suscripciones, incluso cuando el carrito contiene más de un producto de suscripción.
Ejemplo de un recorrido de compra
Una vez pagada la orden original, la aplicación puede mostrar una oferta posterior a la compra. Si existe una tarjeta guardada en un proveedor compatible, el cliente puede aceptarla sin volver a capturar sus datos.
El cobro con un clic funciona con tarjetas guardadas de Stripe, Square, Authorize.net, NMI, Adyen y Mercado Pago. Stripe incluye soporte para 3D Secure. Los demás métodos utilizan el formulario de pago normal.
La oferta adicional solo puede cobrarse después de que la orden original haya sido pagada y únicamente una vez por pedido, incluso si el comprador tiene abiertas varias pestañas.
Cómo aplicarlo en México y Latinoamérica
La utilidad para empresas de la región está en conectar una aplicación con los productos y proveedores que ya operan dentro de la cuenta de HighLevel. No hace falta colocar información sensible de pago en el código generado por AI Studio.
Agencias
Pueden crear una aplicación para vender servicios o planes ya registrados en su catálogo y controlar exactamente qué precios estarán disponibles.
SaaS
Puede ofrecer planes mediante suscripciones y presentar una oferta adicional después de que el pago original haya sido confirmado.
Soporte
Puede presentar servicios de soporte como productos autorizados y dirigir el cobro al checkout alojado, sin integrar el código de tarjeta en la aplicación.
Ecommerce
Puede generar listados y páginas de producto desde el catálogo, aplicar cupones y vender variaciones, tamaños, niveles o planes permitidos.
Mercado Pago tiene un alcance específico
La fuente menciona Mercado Pago entre los proveedores cuyas tarjetas guardadas pueden utilizarse para ofertas de un clic. No confirma en el texto otras condiciones, países o configuraciones del proveedor.
La limitación actual: TanStack Start
Payments funciona actualmente solo en aplicaciones construidas con TanStack Start. Los proyectos de otros tipos todavía no muestran la opción.
Un proyecto React existente puede migrarse desde Project Settings → Migrate to SSR. HighLevel crea una copia actualizada y mantiene el proyecto original sin cambios y activo. La copia también puede probarse antes de publicarla.
Comprueba el tipo de proyecto antes de configurar la tienda
Si la aplicación no utiliza TanStack Start, Payments no aparecerá todavía. La fuente no confirma cuándo llegará a otros tipos de proyecto.
Preguntas frecuentes sobre Payments en AI Studio
¿Payments de AI Studio ya está disponible?
Sí, HighLevel lo presenta como una función lanzada. Su disponibilidad está limitada actualmente a aplicaciones construidas con TanStack Start.
¿Hay que crear un catálogo nuevo para la aplicación?
No. Payments utiliza los productos, pedidos, proveedores de pago y suscripciones que ya están configurados en la cuenta de HighLevel.
¿Los datos de tarjeta pasan por el código de la app?
No. Los datos se capturan y procesan dentro del checkout alojado de la plataforma.
¿Se pueden vender suscripciones?
Sí. Las suscripciones funcionan en el checkout y en las ofertas posteriores a la compra, incluso en carritos con más de un producto de suscripción.
¿Qué ocurre con un proyecto React existente?
Puede migrarse desde Project Settings → Migrate to SSR. El proceso crea una copia actualizada, mantiene el original activo y permite probar la copia antes de publicarla.
¿Una oferta posterior puede cobrarse varias veces?
No. Solo puede cobrarse después del pago de la orden original y una sola vez por pedido, aunque existan varias pestañas abiertas.
Agenda una demostración con Zadrig Technology
Te mostramos cómo evaluar AI Studio, conectar tu catálogo y preparar un flujo de venta compatible con Payments de HighLevel.
Escríbenos por WhatsApp
