Creación de flujos de pago en el Studio con el Bloque de Pagos – Blip | Blip Help

Canal disponible: WhatsApp

Introducción: Agilizando sus ventas

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

¿Qué recibe su cliente? Su 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

La configuración del bloque es un proceso estructurado en tres pasos principales dentro del Studio:

1. Añada el Bloque de Pagos

Acceda al Studio de su bot (el editor de flujo).
Haga clic en Nuevo bloque y seleccione la opción Pago.
El bloque se insertará en el flujo y debe conectarse en un punto lógico de la jornada.

2. Configure 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. Puede usar proveedores propios o integrar soluciones de Blip, mientras que el bloque solo presenta las informaciones dentro de la jornada conversacional.

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

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

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

El uso de variables se recomienda especialmente en escenarios donde los datos de pago se generan dinámicamente vía API en un bloque anterior (por ejemplo, por medio de 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 de PIX Copia y Pega

Si el método seleccionado es PIX, se mostrarán los siguientes campos:

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

Configuración del Boleto

Si el método seleccionado es Boleto, se mostrarán los siguientes campos:

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

Este campo puede completarse manualmente o por medio de una variable del flujo, en caso de que el boleto se genere dinámicamente (ej: {{codeBoleto}}).

Configuración del Link de Pago

Al seleccionar Link de Pago, usted podrá informar:

Un enlace HTTPS fijo o dinámico.

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

Actualmente, están disponibles tres métodos de pago para la 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 en el momento de la compra.

3. Configure los detalles del producto

Acceda a la pestaña Configuración y complete:

Tipo del producto: elija si es Digital o Físico.
Número de 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 un máximo de 35 caracteres, pudiendo contener solo letras, números y guiones.

Especificaciones del producto: informe 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 utilizar un script (ejecutado en el bloque anterior al bloque de pagos) e informar la variable de salida del script, o informar el JSON Array directamente en el campo. Generalmente se utiliza la ruta del script, principalmente cuando la selección de los productos y precios son dinámicas.

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

Añadiendo múltiples productos dinámicamente

Cuando el usuario puede seleccionar más de un producto a lo largo de la conversación, una alternativa es utilizar un script acumulador ejecutado a cada selección que mantiene el array de productos actualizado entre las interacciones. La lógica funciona de la siguiente forma:

A cada selección, el script verifica si el producto ya existe en el array por el 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)  // ex.: "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 mostrado junto al pago, por ejemplo:

“¡Finalice su pedido! Realice el pago vía Pix copia y pega usando la app de su banco.”
Pie de página (opcional): inserte un texto adicional, generalmente un texto corto de orientación o alerta como: “El pago expira en 30 minutos”, o “Pago seguro”.

Condiciones de Salida del Bloque

Al llegar a este bloque en el flujo, su cliente recibirá instantáneamente el mensaje de pago con toda la información asociada si todo está configurado correctamente. El bloque de pagos no posee la opción de esperar entrada (input), por lo tanto, al pasar por este bloque, su cliente será dirigido automáticamente al próximo bloque de acuerdo con sus condiciones de salida. En condiciones de salida es posible definir hacia qué bloque se dirigirá al cliente en caso de que ocurra algún error y en caso de que haya éxito.

Cuando todas las configuraciones sean correctas y la salida se dirija como éxito, el flujo seguirá normalmente hacia el próximo bloque, donde usted podrá tratar las reglas de negocio, como la confirmación del pago vía API.

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

¿Qué está construyendo aquí?

No es solo un flujo. Usted está 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 su cliente en WhatsApp?

Después de que el Bloque de Pagos es activado, 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 de arriba demuestra un escenario ilustrativo de aplicación del Bloque de Pagos en un flujo automatizado. Utilizando la opción de Pix Copia y Pega y Link de Pago como métodos de pago.

La arquitectura del chat conversacional es totalmente adaptable a su estrategia: usted define 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.

Para más información, consulta la discusión sobre el tema en nuestra comunidad o mira los videos en nuestro canal. 😃