> ## 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.

# Usage and configuration

> Add Stripe to your flow and continue based on the real payment status.

Once the integration is connected in Marketplace, Stripe is available in your workspace for use inside your flows and AI Agents.

<Tip>
  First time implementing a charge? Follow the [Tutorial: Implementing your first charge from WhatsApp](/guides/integraciones/pagos/implementando-tu-primer-cobro) guide first, which takes you step by step from zero to production.
</Tip>

***

## Three usage modalities

<CardGroup cols={3}>
  <Card title="Embedded WebView" icon="browser" href="#webview-embebido">
    Payment button with WebView checkout
  </Card>

  <Card title="Native in chat" icon="credit-card" href="#nativo-en-chat">
    Card capture in conversation
  </Card>

  <Card title="Advanced tools / MCP" icon="wrench" href="#tools-avanzadas-mcp">
    Full API access via MCP
  </Card>
</CardGroup>

<Tip>
  This page covers all three modalities. Use the cards to go directly to the one you need.
</Tip>

***

## Embedded WebView

This is the **recommended modality to start with**. The user receives a link or payment button that opens the Stripe checkout in a WebView inside WhatsApp.

### Add the node to the Canvas

<Steps>
  <Step title="Locate the integration in Marketplace">
    In the left sidebar of Brain Studio, open the **Marketplace** folder.

    If the integration is correctly connected, you will see **Stripe** listed as an available provider.

    <Frame caption="Stripe in Marketplace (sidebar)">
      <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 in the Marketplace folder inside the Brain Studio sidebar" style={{ maxWidth: '250px', margin: '0 auto' }} width="678" height="444" data-path="assets/images/integraciones/pagos/stripe-nodo-canvas.png" />
    </Frame>
  </Step>

  <Step title="Drag the node to the Canvas">
    Drag **Stripe** from the sidebar into your flow on the Canvas.

    When you drop it, the node block will be created with its available outputs.

    <Frame caption="Stripe tool with available outputs">
      <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="Stripe node added to the Canvas showing its outputs" style={{ maxWidth: '500px', margin: '0 auto' }} width="2048" height="953" data-path="assets/images/integraciones/pagos/stripe-configuracion-nodo.png" />
    </Frame>
  </Step>

  <Step title="Open the configuration panel">
    Select the node on the Canvas to open its configuration panel on the right side.

    From there you can complete the **inputs** and review the available **outputs**.
  </Step>
</Steps>

### Configure the node in Canvas

<Tabs>
  <Tab title="Inputs">
    <AccordionGroup>
      <Accordion title="Save result as" icon="database">
        <ParamField body="Save result as" type="string">
          Defines the name of the variable where Brain Studio will store the **complete JSON** response from the node.

          <Tip>
            Useful if you want to use the response later (logs, validations, traceability, or flow decisions).
          </Tip>
        </ParamField>
      </Accordion>

      <Accordion title="Payment type (default: payment)" icon="credit-card">
        <ParamField body="Payment type" type="string" default="payment">
          Defines the type of charge.

          **Available values:** `payment` (one-time payment), `subscription` (subscription)

          <Info>
            If nothing is selected, `payment` will be used.
          </Info>
        </ParamField>
      </Accordion>

      <Accordion title="Environment" icon="flask">
        <ParamField body="Environment" type="string" required>
          Defines the execution environment for the payment.

          **Available values:** `Test`, `Production`

          <Warning>
            Must match the API Key you used to install Stripe in Marketplace (Test vs Live).
          </Warning>
        </ParamField>
      </Accordion>

      <Accordion title="Payment button expiration [minutes]" icon="clock">
        <ParamField body="Payment button expiration [minutes]" type="number">
          Defines how long the payment button is valid from the moment it is sent to the user.

          **Available values:** `10`, `20`, `30`, `60`
        </ParamField>
      </Accordion>

      <Accordion title="Currency" icon="coins">
        <ParamField body="Currency" type="string" required>
          Currency for the charge.

          <Info>
            The available currency depends on the country and configuration of the connected Stripe account.
          </Info>
        </ParamField>
      </Accordion>

      <Accordion title="Payment reason" icon="file-lines">
        <ParamField body="Payment reason" type="string" required>
          Descriptive text for the charge (for example, order number or product/service description).

          <Tip>
            Ideally use it with flow variables so it aligns with the conversation context.
          </Tip>
        </ParamField>
      </Accordion>

      <Accordion title="Payment metadata" icon="tag">
        <ParamField body="Payment metadata" type="string">
          Additional information for traceability or internal reference.

          <Info>
            You can use it for correlation with your order, reconciliation, or payment audit.
          </Info>
        </ParamField>
      </Accordion>

      <Accordion title="Buyer email" icon="envelope">
        <ParamField body="Buyer email" type="string" required>
          The buyer's email. It must have been collected previously in the flow and passed here as a variable.
        </ParamField>
      </Accordion>

      <Accordion title="Customize payment button text" icon="message">
        <ParamField body="Customize payment button text" type="boolean" default="false">
          If you select **Yes**, additional fields are enabled to customize the message that accompanies the payment button.

          **Fields enabled when activated:**

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

        <Info>
          When this option is active, you can fully modify the message the user will see before opening the checkout.
        </Info>
      </Accordion>

      <Accordion title="Header" icon="heading">
        <ParamField body="Header" type="string">
          Title of the message that accompanies the payment button.
        </ParamField>
      </Accordion>

      <Accordion title="Body" icon="align-left">
        <ParamField body="Body" type="string">
          Main text of the message that accompanies the payment button.
        </ParamField>
      </Accordion>

      <Accordion title="Footer" icon="minus">
        <ParamField body="Footer" type="string">
          Closing text or disclaimer of the message that accompanies the payment button.
        </ParamField>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Outputs">
    <AccordionGroup>
      <Accordion title="Successful payment" icon="circle-check">
        Activated when the provider confirms the transaction was processed successfully.

        This is the official payment confirmation point within the flow.

        Usage examples:

        * Issue invoice
        * Activate subscription
        * Release product or service
        * Update order status in external system
      </Accordion>

      <Accordion title="Pending payment" icon="clock">
        Activated when the provider reports that the transaction is in a pending state.

        This may depend on the payment method and additional validations.

        Currently, monitoring the state change from pending to approved requires additional logic (for example, a webhook or subsequent status verification).
      </Accordion>

      <Accordion title="Failed payment" icon="circle-xmark">
        Activated when the transaction was rejected or declined.

        Recommendations:

        * Inform the user
        * Allow retry
        * Reuse the same Stripe node
      </Accordion>

      <Accordion title="HTTP Error" icon="triangle-exclamation">
        Activated when a communication error with the provider occurs (timeout, network, or invalid response).
      </Accordion>

      <Accordion title="Error Code" icon="bug">
        Activated when the provider returns an internal error code during payment creation or processing.
      </Accordion>

      <Accordion title="Successful CTA delivery" icon="paper-plane">
        Activated when the payment button was sent successfully in the conversation.

        Indicates that the message with the button was displayed successfully in WhatsApp.

        Can be connected to an AI Agent that assists the user while they decide to complete the payment.

        **Example prompt (reference):**

        ```txt theme={null}
        Act as a payment assistant.

        The user has just received a button to complete their payment.
        Do not send proactive messages.
        Only respond if the user asks a question.
        Help them understand how to complete the payment and resolve related questions.
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

***

## Native in chat

Stripe can also operate with a **[native card payment experience inside the chat](/guides/integraciones/pagos/experiencias/pago-nativo)**.

<Warning>
  This modality requires special enablement.
  If you want to activate it, contact us at [ayuda@jelou.ai](mailto:ayuda@jelou.ai).
</Warning>

***

## Advanced tools / MCP

In addition to Canvas usage via native tools, Stripe exposes a set of **advanced tools** that can be used in more technical implementations or custom flows.

These tools allow you to interact directly with Stripe services from your flow.

<Tabs>
  <Tab title="Available tools">
    <AccordionGroup>
      <Accordion title="Create Customer" icon="user-plus">
        Creates a new customer record in your Stripe account.

        Customers can be associated with:

        * Payment methods
        * Subscriptions
        * Invoices

        Useful for:

        * Registering a customer before processing payments
        * Implementing subscription models
        * Managing payment history per customer
      </Accordion>

      <Accordion title="Create Payment Intent" icon="credit-card">
        Creates a **PaymentIntent** in Stripe.

        * The amount is sent in cents
          (example: `15000` = \$150.00)
        * Returns:
          * `client_secret`
          * `payment_intent_id`

        Useful for:

        * Initiating a payment from a customer
        * Custom integrations
        * Advanced payment cycle control
      </Accordion>

      <Accordion title="Query payment status" icon="magnifying-glass">
        Gets the current status of a payment by:

        * `PaymentIntent ID`
        * `Charge ID`

        Returns details such as:

        * Status
        * Amount
        * Payment method
        * Receipt URL

        Useful for:

        * Verifying if a customer completed the payment
        * Implementing additional validations
        * Post-transaction queries
      </Accordion>

      <Accordion title="List transactions" icon="list">
        Lists recent balance transactions in the Stripe account:

        * Charges
        * Refunds
        * Transfers
        * Payouts

        Supports:

        * Date filter (Unix timestamps)
        * Pagination

        Useful for:

        * Reviewing recent activity
        * Accounting reconciliation
        * Movement audit
      </Accordion>

      <Accordion title="Process refund" icon="rotate-left">
        Processes a full or partial refund of a charge or PaymentIntent.

        Available options:

        * Specific amount (for partial refunds)
        * Reason (`duplicate`, `fraudulent`, `requested_by_customer`)

        Refunds usually appear in the customer's account within 5–10 business days.

        Useful for:

        * Post-sale management
        * Cancellations
        * Return policies
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>
