> ## Documentation Index
> Fetch the complete documentation index at: https://docs.jelou.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Uso y configuración

> Agrega Stripe a tu flujo y continúa según el estado real del pago.

Una vez conectada la integración en Marketplace, Stripe queda disponible en tu workspace para usarlo dentro de tus flujos y AI Agents.

***

## Tres modalidades de uso

<CardGroup cols={3}>
  <Card title="WebView embebido" icon="browser" href="#webview-embebido">
    Botón de pago con checkout en WebView
  </Card>

  <Card title="Nativo en chat" icon="credit-card" href="#nativo-en-chat">
    Captura de tarjeta en conversación
  </Card>

  <Card title="Tools avanzadas / MCP" icon="wrench" href="#tools-avanzadas-mcp">
    Acceso a API completa vía MCP
  </Card>
</CardGroup>

<Tip>
  Esta página cubre las tres modalidades. Usa las cards para ir directo a la que necesites.
</Tip>

***

## WebView embebido

Esta es la modalidad **recomendada para empezar**. El usuario recibe un enlace o botón de pago que abre el checkout de Stripe en WebView dentro de WhatsApp.

### Agregar el nodo al Canvas

<Steps>
  <Step title="Ubicar la integración en Marketplace">
    En el panel lateral izquierdo de Brain Studio, abre la carpeta **Marketplace**.

    Si la integración está correctamente conectada, verás **Stripe** listado como proveedor disponible.

    <Frame caption="Stripe en Marketplace (panel lateral)">
      <img src="https://mintcdn.com/jelouai/y5L6vahGrhMqbaUQ/assets/images/integraciones/pagos/stripe-nodo-canvas.png?fit=max&auto=format&n=y5L6vahGrhMqbaUQ&q=85&s=9bb0d590d1abe32df3a981a6aa73d924" alt="Stripe visible en la carpeta Marketplace dentro del panel lateral de Brain Studio" style={{ maxWidth: '250px', margin: '0 auto' }} width="678" height="444" data-path="assets/images/integraciones/pagos/stripe-nodo-canvas.png" />
    </Frame>
  </Step>

  <Step title="Arrastrar el nodo al Canvas">
    Arrastra **Stripe** desde el panel lateral hacia tu flujo en el Canvas.

    Al soltarlo, se creará el bloque del nodo con sus salidas disponibles.

    <Frame caption="Tool de Stripe con salidas disponibles">
      <img src="https://mintcdn.com/jelouai/y5L6vahGrhMqbaUQ/assets/images/integraciones/pagos/stripe-configuracion-nodo.png?fit=max&auto=format&n=y5L6vahGrhMqbaUQ&q=85&s=764485ef69fbbe407de6e96ed77f5a6e" alt="Nodo de Stripe agregado al Canvas mostrando sus salidas" style={{ maxWidth: '500px', margin: '0 auto' }} width="2048" height="953" data-path="assets/images/integraciones/pagos/stripe-configuracion-nodo.png" />
    </Frame>
  </Step>

  <Step title="Abrir el panel de configuración">
    Selecciona el nodo en el Canvas para abrir su panel de configuración en el lado derecho.

    Desde allí podrás completar los **inputs** y revisar las **salidas** disponibles.
  </Step>
</Steps>

### Configurar el nodo en Canvas

<Tabs>
  <Tab title="Inputs">
    <AccordionGroup>
      <Accordion title="Guardar resultado como" icon="database">
        <ParamField body="Guardar resultado como" type="string">
          Define el nombre de la variable donde Brain Studio guardará el **JSON completo** de respuesta del nodo.

          <Tip>
            Útil si quieres usar la respuesta más adelante (logs, validaciones, trazabilidad o decisiones del flujo).
          </Tip>
        </ParamField>
      </Accordion>

      <Accordion title="Tipo de pago (default: payment)" icon="credit-card">
        <ParamField body="Tipo de pago" type="string" default="payment">
          Define el tipo de cobro.

          **Valores disponibles:** `payment` (pago único), `subscription` (suscripción)

          <Info>
            Si no seleccionas nada, se usará `payment`.
          </Info>
        </ParamField>
      </Accordion>

      <Accordion title="Ambiente" icon="flask">
        <ParamField body="Ambiente" type="string" required>
          Define el entorno de ejecución del pago.

          **Valores disponibles:** `Test`, `Producción`

          <Warning>
            Debe coincidir con la API Key con la que instalaste Stripe en Marketplace (Test vs Live).
          </Warning>
        </ParamField>
      </Accordion>

      <Accordion title="Expiración del botón de pagos [minutos]" icon="clock">
        <ParamField body="Expiración del botón de pagos [minutos]" type="number">
          Define la vigencia del botón de pago desde que se envía al usuario.

          **Valores disponibles:** `10`, `20`, `30`, `60`
        </ParamField>
      </Accordion>

      <Accordion title="Moneda" icon="coins">
        <ParamField body="Moneda" type="string" required>
          Moneda del cobro.

          <Info>
            La moneda disponible depende del país y configuración de la cuenta Stripe conectada.
          </Info>
        </ParamField>
      </Accordion>

      <Accordion title="Motivo de pago" icon="file-lines">
        <ParamField body="Motivo de pago" type="string" required>
          Texto descriptivo del cobro (por ejemplo, número de orden o descripción del producto o servicio).

          <Tip>
            Idealmente úsalo con variables del flujo para que quede alineado al contexto de la conversación.
          </Tip>
        </ParamField>
      </Accordion>

      <Accordion title="Metadata del pago" icon="tag">
        <ParamField body="Metadata del pago" type="string">
          Información adicional para trazabilidad o referencia interna.

          <Info>
            Puedes usarlo para correlación con tu orden, conciliación o auditoría del pago.
          </Info>
        </ParamField>
      </Accordion>

      <Accordion title="Email comprador" icon="envelope">
        <ParamField body="Email comprador" type="string" required>
          Correo del comprador. Debe haberse recolectado previamente en el flujo y entregarse aquí como variable.
        </ParamField>
      </Accordion>

      <Accordion title="Personalizar textos botón de pago" icon="message">
        <ParamField body="Personalizar textos botón de pago" type="boolean" default="false">
          Si seleccionas **Sí**, se habilitan campos adicionales para personalizar el mensaje que acompaña al botón de pago.

          **Campos que se habilitan al activar:**

          * `Header` (obligatorio)
          * `Body` (obligatorio)
          * `Footer` (obligatorio)
        </ParamField>

        <Info>
          Cuando esta opción está activa, puedes modificar completamente el mensaje que verá el usuario antes de abrir el checkout.
        </Info>
      </Accordion>

      <Accordion title="Header" icon="heading">
        <ParamField body="Header" type="string">
          Título del mensaje que acompaña al botón de pago.
        </ParamField>
      </Accordion>

      <Accordion title="Body" icon="align-left">
        <ParamField body="Body" type="string">
          Texto principal del mensaje que acompaña al botón de pago.
        </ParamField>
      </Accordion>

      <Accordion title="Footer" icon="minus">
        <ParamField body="Footer" type="string">
          Texto de cierre o aclaración del mensaje que acompaña al botón de pago.
        </ParamField>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Outputs">
    <AccordionGroup>
      <Accordion title="Pago exitoso" icon="circle-check">
        Se activa cuando el proveedor confirma que la transacción fue procesada correctamente.

        Este es el punto oficial de confirmación de pago dentro del flujo.

        Ejemplos de uso:

        * Emitir factura
        * Activar suscripción
        * Liberar producto o servicio
        * Actualizar estado de orden en sistema externo
      </Accordion>

      <Accordion title="Pago pendiente" icon="clock">
        Se activa cuando el proveedor informa que la transacción quedó en estado pendiente.

        Puede depender del medio de pago y validaciones adicionales.

        Actualmente el monitoreo del cambio de estado desde pendiente a aprobado requiere lógica adicional (por ejemplo, webhook o verificación posterior del estado).
      </Accordion>

      <Accordion title="Pago fallido" icon="circle-xmark">
        Se activa cuando la transacción fue rechazada o declinada.

        Recomendaciones:

        * Informar al usuario
        * Permitir reintento
        * Reutilizar el mismo nodo de Stripe
      </Accordion>

      <Accordion title="Error HTTP" icon="triangle-exclamation">
        Se activa cuando ocurre un error de comunicación con el proveedor (timeout, red o respuesta inválida).
      </Accordion>

      <Accordion title="Error Code" icon="bug">
        Se activa cuando el proveedor devuelve un código de error interno durante la creación o procesamiento del pago.
      </Accordion>

      <Accordion title="Envío correcto de CTA" icon="paper-plane">
        Se activa cuando el botón de pago fue enviado correctamente en la conversación.

        Indica que el mensaje con el botón se desplegó exitosamente en WhatsApp.

        Puede conectarse a un AI Agent que asista al usuario mientras decide completar el pago.

        **Ejemplo de prompt (referencial):**

        ```txt theme={null}
        Actúa como asistente de pagos.

        El usuario acaba de recibir un botón para completar su pago.
        No envíes mensajes proactivos.
        Solo responde si el usuario hace una pregunta.
        Ayúdalo a entender cómo completar el pago y resuelve dudas relacionadas.
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

***

## Nativo en chat

Stripe también puede operar con una experiencia de **[pago nativo con tarjeta dentro del chat](/guides/integraciones/pagos/experiencias/pago-nativo)**.

<Warning>
  Esta modalidad requiere habilitación especial.
  Si deseas activarla, escríbenos a [ayuda@jelou.ai](mailto:ayuda@jelou.ai).
</Warning>

***

## Tools avanzadas / MCP

Además del uso en Canvas mediante herramientas nativas, Stripe expone un conjunto de **tools avanzadas** que pueden utilizarse en implementaciones más técnicas o flujos personalizados.

Estas herramientas permiten interactuar directamente con servicios de Stripe desde tu flujo.

<Tabs>
  <Tab title="Tools disponibles">
    <AccordionGroup>
      <Accordion title="Crear Cliente" icon="user-plus">
        Crea un nuevo registro de cliente en tu cuenta de Stripe.

        Los clientes pueden estar asociados con:

        * Métodos de pago
        * Suscripciones
        * Facturas

        Útil para:

        * Registrar un cliente antes de procesar pagos
        * Implementar modelos de suscripción
        * Gestionar historial de pagos por cliente
      </Accordion>

      <Accordion title="Crear Payment Intent" icon="credit-card">
        Crea un **PaymentIntent** en Stripe.

        * El monto se envía en centavos\
          (ejemplo: `15000` = \$150.00)
        * Devuelve:
          * `client_secret`
          * `payment_intent_id`

        Útil para:

        * Iniciar un pago desde un cliente
        * Integraciones personalizadas
        * Control avanzado del ciclo de pago
      </Accordion>

      <Accordion title="Consultar estado de pago" icon="magnifying-glass">
        Obtiene el estado actual de un pago por:

        * `PaymentIntent ID`
        * `Charge ID`

        Devuelve detalles como:

        * Estado
        * Importe
        * Método de pago
        * URL del recibo

        Útil para:

        * Verificar si un cliente completó el pago
        * Implementar validaciones adicionales
        * Consultas post-transacción
      </Accordion>

      <Accordion title="Listar transacciones" icon="list">
        Lista las transacciones recientes de saldo en la cuenta Stripe:

        * Cargos
        * Reembolsos
        * Transferencias
        * Retiros

        Soporta:

        * Filtro por fecha (timestamps Unix)
        * Paginación

        Útil para:

        * Revisar actividad reciente
        * Conciliación contable
        * Auditoría de movimientos
      </Accordion>

      <Accordion title="Procesar reembolso" icon="rotate-left">
        Procesa un reembolso completo o parcial de un cargo o PaymentIntent.

        Opciones disponibles:

        * Monto específico (para reembolsos parciales)
        * Razón (`duplicate`, `fraudulent`, `requested_by_customer`)

        Los reembolsos suelen reflejarse en la cuenta del cliente en 5–10 días hábiles.

        Útil para:

        * Gestión post-venta
        * Cancelaciones
        * Políticas de devolución
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>
