Creación de Flujos de Pago en Studio con el Bloque de Pagos – Blip | Blip Help

Importante: Actualmente, el modelo de pagos vía WhatsApp está disponible solo para Brasil e India.

Canal disponible: WhatsApp

Introducción: Agilizando Tus Ventas

El Bloque de Pagos de Blip es la solución nativa de la plataforma para solicitar pagos de forma eficiente. Permite configurar métodos de pago como PIX Copia y Pega, Boleto, Link de Pago y Checkout, además de detallar los productos vendidos, todo dentro de tu flujo en Blip.

¿Qué recibe tu cliente? Tu cliente recibe un mensaje de pago completo y fácil de entender en WhatsApp, que contiene:

Nombre y descripción de los productos o servicios.
Valor exacto del pedido.
Métodos de pago disponibles.
Un mensaje personalizado.

Creación y Configuración del Bloque de Pagos

Configurar el bloque es un proceso estructurado en tres pasos principales en Studio:

1. Añade el Bloque de Pagos

Accede al Studio de tu bot (el editor de flujo).
Haz clic en Nuevo bloque y selecciona la opción Pago.
El bloque será insertado en el flujo y debe conectarse en un punto lógico del recorrido.

2. Configura el Método de Pago

Importante: El bloque de pagos solo organiza y muestra las opciones de pago en la conversación. La generación y el procesamiento del cobro son responsabilidad del adquirente o institución de pago utilizada. Puedes usar proveedores propios o integrar soluciones de Blip, mientras el bloque solo presenta la información dentro del recorrido conversacional.

En esta pestaña defines las opciones de pago que se ofrecerán al cliente.

Método de pago: elige entre PIX Copia y Pega, Boleto o Link de Pago.

Durante la configuración, puedes utilizar tanto valores estáticos como variables del flujo.

El uso de variables es especialmente recomendado en escenarios donde los datos de pago son generados dinámicamente vía API en un bloque anterior (por ejemplo, mediante una llamada HTTP).

Esto garantiza mayor flexibilidad, automatización e integración con sistemas externos, evitando la necesidad de valores fijos en el flujo.

Configuración del PIX Copia y Pega

Al seleccionar PIX Copia y Pega como método de pago, el campo Proveedor se mostrará con dos opciones:

Proveedor propio: campo que indica el proveedor responsable de la transacción.
Checkout: Para procesar el Pix directamente por el Checkout de Blip. El uso de este proveedor requiere la contratación previa del servicio.

Proveedor propio

Al seleccionar Proveedor propio, los siguientes campos quedan visibles:

Nombre del negocio: nombre que se mostrará al cliente (ej: Blip Payments) o una variable (ej: {{storeName}}).
Tipo de clave PIX: selecciona CPF, CNPJ, Correo electrónico, Teléfono o Clave aleatoria, es un campo fijo y no es posible parametrizarlo vía variable del flujo. La selección debe hacerse manualmente en la configuración del bloque.
Valor de la clave PIX: ingresa el dato correspondiente al tipo (Recuerda: si es CPF o CNPJ, debe ser válido) o utiliza una variable.
Código PIX Copia y Pega: ingresa el código Copia y Pega generado por tu banco manualmente o usa una variable del flujo, en caso de que el código se genere dinámicamente.

Checkout

Al seleccionar Checkout como proveedor, el flujo utiliza la infraestructura de pagos de Blip para generar el código Copia y Pega automáticamente.

Campos mostrados al seleccionar esta opción:

Empresa: selecciona el merchant activo vinculado a tu contrato. En caso de no haber una empresa activa, puedes solicitar la activación directamente en el bloque de pagos.
Actualización automática de pago (opcional): configura mensajes automáticos según el estado devuelto por la transacción:
Tiempo para envío de la notificación: define cuánto tiempo espera el sistema antes de verificar si el pago fue concluido. No es el tiempo de validez del código PIX, solo es el tiempo que el flujo espera antes de consultar el estado de la transacción. El tiempo máximo configurable es de 10 minutos. Lo ideal es que este tiempo sea menor que el tiempo de expiración del código PIX.
Mensaje de pago aprobado: ejemplo: “¡Pago aprobado con éxito!”
Mensaje de pago rechazado: ejemplo: “¡Ups! Tu pago fue rechazado. Verifica los datos e intenta nuevamente.”
Mensaje de pago en procesamiento: ejemplo: “Estamos procesando tu pago. En breve recibirás la confirmación.”
Mensaje de link de pago creado: ejemplo: “Usa el código arriba para finalizar el pago vía Pix.”

Atención: La actualización automática de estado vía webhook está disponible solo cuando el proveedor seleccionado es Blip Checkout. Al usar un proveedor propio, no hay actualización automática del estado de la transacción dentro de la conversación.

Configuración del Boleto

Si el método seleccionado es Boleto, los siguientes campos se mostrarán después de seleccionar el proveedor:

Código del boleto: informa el código de barras del boleto.

Este campo puede llenarse manualmente o mediante una variable del flujo, si el boleto se genera dinámicamente (ej: {{codeBoleto}}).

Configuración del Link de Pago

Al seleccionar la opción "Link de Pago", se mostrarán dos alternativas de proveedor, como se ilustra en el siguiente ejemplo:

Para configurar el Link de pago debes seleccionar la opción de Proveedor propio y luego se mostrará el siguiente campo:

Link HTTPS: Un enlace HTTPS fijo o dinámico.

Acepta variable del flujo, ideal cuando el backend genera un enlace personalizado para cada cliente.
Ejemplo: {{paymentLink}}.

Configuración del Checkout

Para configurar el Checkout, selecciona el método "Link de pago" y luego elige "Checkout" como proveedor.

Al seleccionar Checkout, se muestran campos específicos para configuración:

Empresa

Selecciona la empresa. Si no hay una empresa activa vinculada a tu contrato, puedes solicitar la activación directamente en el bloque de pago.

Actualización automática de pago (opcional)

En esta sección configuras los mensajes automáticos según el estado devuelto por el pago, al igual que el Pix Copia y Pega usando el proveedor “Checkout”:

Estos mensajes hacen que la experiencia sea más clara y transparente para el cliente. Actualmente, hay cuatro métodos de pago disponibles para configuración y es posible habilitar hasta dos métodos en el mismo bloque, permitiendo que el cliente elija la opción más conveniente al momento de la compra.

Atención: Si los dos métodos de pago habilitados en el mismo bloque usan el proveedor Checkout, el tiempo para envío de la notificación definido en la configuración del primer método se aplicará automáticamente también para el segundo método.

Detalle: si el primer método de pago está configurado como Link de pago no es posible configurar otro Link de pago como segundo método en el mismo bloque de pagos.

3. Configura los detalles del producto

Accede a la pestaña Configuración y completa:

Tipo de producto: elige si es Digital o Físico.

Número del cobro: puede ser un valor fijo (ej.: 123456) o una variable que extrae el ID del producto (ej.: {{selectedProduct@retailer_id}}).

Debe ser un valor con máximo 35 caracteres, pudiendo contener solo letras, números y guiones.

Otra opción es generar un Script que retorne un número aleatorio de 5 dígitos (entre 10000 y 99999) en un bloque anterior, como el ejemplo abajo:

function run() {
return Math.floor(10000 + Math.random() * 90000);
}

Especificaciones del producto: informa el JSON Array en el formato siguiente:

[
  {
    "retailer_id": "123456",
    "name": "Nombre del ítem",
    "amount": {
      "value": 1000,
      "offset": 100
    },
    "quantity": 1
  }
]

Dentro del campo relacionado al producto, se debe retornar exactamente en este formato para que el bloque de pagos interprete correctamente los datos.

Para generar este JSON, se puede usar un script (ejecutado en el bloque anterior al bloque de pagos) y proporcionar la variable de salida del script, o ingresar el JSON Array directamente en el campo. Generalmente se usa la opción de script, especialmente cuando la selección de productos y precios es dinámica.

Se permite informar más de un ítem en este Array, siempre que se respete la estructura JSON para cada ítem.

Añadiendo múltiples productos dinámicamente

Cuando el usuario puede seleccionar más de un producto durante la conversación, una alternativa es usar un script acumulador que se ejecuta en cada selección y mantiene el array de productos actualizado entre interacciones. La lógica funciona así:

En cada selección, el script verifica si el producto ya existe en el array por nombre.
Si ya existe, incrementa la cantidad (quantity).
Si es nuevo, añade el ítem al array con quantity: 1.

function run(selectedMenuOption, selectedProducts) {
    try {
        selectedMenuOption = JSON.parse(selectedMenuOption);
        
        let currentProducts = [];
        if (selectedProducts) {
            const parsed = typeof selectedProducts === "string" ? JSON.parse(selectedProducts) : selectedProducts;
            currentProducts = Array.isArray(parsed) ? parsed : parsed.products || [];
        }
        
        const existingProductIndex = currentProducts.findIndex(product => 
            product.name === selectedMenuOption.name
        );
        
        const productMap = {
            "id_produto_1": {
                retailer_id: "123456",
                name: "Nombre del ítem 1",
                description: "Descripción del ítem 1",
                price: "10.00",
                amount: { value: 1000, offset: 100 }
            },
            "id_produto_2": {
                retailer_id: "789012",
                name: "Nombre del ítem 2",
                description: "Descripción del ítem 2",
                price: "20.00",
                amount: { value: 2000, offset: 100 }
            },
            "id_produto_3": {
                retailer_id: "345678",
                name: "Nombre del ítem 3",
                description: "Descripción del ítem 3",
                price: "30.00",
                amount: { value: 3000, offset: 100 }
            }
        };


        if (existingProductIndex !== -1) {
            currentProducts[existingProductIndex].quantity += 1;
        } else {
            const product = productMap[selectedMenuOption.id];
            if (product) {
                currentProducts.push({ ...product, quantity: 1 });
            }
        }
        
        const totalValue = currentProducts.reduce((total, product) => {
            const price = parseFloat(product.price) || 0;
            const quantity = parseInt(product.quantity) || 0;
            return total + (price * quantity);
        }, 0);


        return {
            products: currentProducts,
            totalValue: totalValue.toFixed(2)  // ej.: "10.00"
        };
        
    } catch (error) {
        return {
            unexpectedAnswer: true,
            error: error.message
        };
    }
}

Al final del flujo de selección, la variable de salida del script (ej.: {{products}}) puede referenciarse directamente en el campo de especificaciones del producto en el bloque de pagos de esta forma:

Texto principal: mensaje con un máximo de 1024 caracteres mostrado junto al pago, por ejemplo:
“¡Finaliza tu pedido!
Realiza el pago vía Pix copia y pega usando la app de tu banco.”
Pie de página (opcional): ingresa un texto adicional con un máximo de 60 caracteres, generalmente un texto corto de orientación o alerta como:

“El pago expira en 10 minutos”, o “Pago seguro”.

Condiciones de Salida del Bloque

Al llegar a este bloque en el flujo, tu cliente recibirá instantáneamente el mensaje de pago con toda la información asociada si todo está configurado correctamente. El bloque de pagos no tiene la opción de esperar input, por lo tanto al pasar por este bloque tu cliente será dirigido automáticamente al siguiente bloque según sus condiciones de salida. En condiciones de salida es posible definir a qué bloque será dirigido el cliente en caso de error y en caso de éxito.

Cuando todas las configuraciones estén correctas y la salida sea dirigida como éxito, el flujo seguirá normalmente al siguiente bloque, donde podrás gestionar las reglas de negocio, como la confirmación del pago vía API.

Este es el comportamiento estándar del Bloque de Pagos.

La única excepción ocurre cuando el método seleccionado es Checkout con la Actualización automática del pago habilitada. En este caso, el flujo esperará el tiempo configurado para verificar el estado del pago antes de continuar al siguiente bloque.

¿Qué estás construyendo aquí?

No es solo un flujo. Estás construyendo:

Una experiencia
Un canal de venta real
Un proceso confiable
Un punto de conversión dentro de WhatsApp

Cuando está bien configurado, el Bloque de Pagos no es técnico, es estratégico.

¿Qué ve tu cliente en WhatsApp?

Después de que el Bloque de Pagos se activa, WhatsApp envía automáticamente una tarjeta oficial de cobro, estandarizada y profesional. No es solo un enlace, es un componente estructurado dentro de la conversación.

La estructura visual de la tarjeta permanece igual en todos los métodos de pago.
Lo que cambia es solo el botón de acción mostrado al cliente y la bandera del método de pago.

La imagen arriba muestra un escenario ilustrativo de aplicación del Bloque de Pagos en un flujo automatizado. Usando la opción de Pix Copia y Pega y Link de Pago como métodos de pago.

El Bloque de Pagos transforma el flujo conversacional en un canal de venta real, ofreciendo una interfaz profesional y segura.

1. Visualización de la Tarjeta de Cobro

Tan pronto el cliente llega al Bloque de Pagos en el flujo, recibe una tarjeta oficial de cobro estandarizada por WhatsApp.

Información Visible: La tarjeta muestra el nombre y descripción de los productos, el valor exacto del pedido, los métodos de pago disponibles y un mensaje personalizado.
Botón de Acción: Según la configuración, el cliente verá botones como "Copiar código Pix", "Copiar código del boleto" o "Abrir link de pago".
Resumen del Pedido: Al hacer clic en los detalles, el cliente ve una lista estructurada con ítems (ej: Bolígrafo Blip, Vaso Mágico), cantidades y el valor total (ej: $10.00).

2. Identificación y Datos de Pago (Web Checkout)

Al hacer clic en "Abrir link de pago" (en el caso del método Checkout), el usuario es dirigido a una página segura fuera de WhatsApp:

Identificación: El cliente completa datos personales básicos, como nombre, apellido, CPF, correo electrónico y teléfono, para garantizar la seguridad de la transacción.
Selección del Medio: El usuario elige el método específico, como Tarjeta de Crédito, donde ingresa los datos de la tarjeta (número, vigencia, CVV) y define el pago a plazos.
Dirección de Cobro: Para mayor seguridad, se solicitan datos de código postal y dirección completa.
Guardar tarjeta para compras futuras: Marcando esta opción, tu cliente podrá almacenar los datos de la tarjeta de forma segura y usarlos en próximas compras, sin tener que ingresarlos nuevamente.

3. Confirmación y Retorno Automático

La diferencia del método Checkout es la integración del estado en tiempo real con la conversación.

Pantalla de Éxito: Después del procesamiento, una pantalla muestra "¡Pago realizado con éxito!", con fecha, hora y el botón "Volver a la conversación".

Actualización en WhatsApp: Si la Actualización automática del pago está habilitada, el sistema espera el tiempo configurado (hasta 10 minutos) y envía un mensaje automático de confirmación (ej: "¡Pago aprobado con éxito!") directamente en el chat.
Manejo de Excepciones: Si el link expira, el usuario no puede reutilizar el mismo link de checkout y recibe un aviso de link expirado.

4. Compra con un clic

En la próxima compra, tu cliente puede usar la tarjeta guardada y completar el pago con un solo clic, sin salir de WhatsApp.

El flujo de Compra con un clic mejora la practicidad. Al seleccionar una tarjeta previamente guardada, la transacción se completa instantáneamente en la propia interfaz de WhatsApp, sin necesidad de ingresar datos nuevamente o navegar a una página externa.

Sin embargo, se mantiene la flexibilidad. Si el cliente desea usar una nueva tarjeta o un método de pago diferente, solo debe seleccionar la opción "Otra forma". Al hacerlo, el usuario es redirigido inmediatamente al Web Checkout fuera de WhatsApp, permitiéndole ingresar la información de una nueva tarjeta de crédito y continuar con la compra de manera segura, manteniendo la experiencia fluida.

Observación:

En este modelo, es posible visualizar el comportamiento completo del recorrido, incluyendo el retorno automático del estado de la transacción directamente en la conversación, con confirmación de pago integrada a la experiencia.

Es importante destacar que esta actualización automática del pago ocurre exclusivamente cuando el método utilizado es el Checkout. En integraciones con proveedores externos, no hay actualización automática del estado de la transacción dentro del chat.

La arquitectura del chat conversacional es totalmente adaptable a tu estrategia: defines el ritmo de la conversación, el tono de la interacción y el momento ideal de conversión, manteniendo el pago como parte fluida y natural de la experiencia.

¿Necesitas más ayuda? Explora nuestros contenidos en Blip Academy o Blip Community, mira tutoriales en nuestro canal de YouTube o resuelve tus dudas en nuestro canal de atención 😃