Creación de flujos de pago en el 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 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, Enlace de Pago y Checkout, 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:

Proveedor: campo que indica el proveedor responsable de la transacción. En el caso del PIX Copia y Pega, se utiliza el proveedor configurado por el propio usuario; después de seleccionar la opción de proveedor propio, los otros campos quedarán visibles.
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 campo después de seleccionar el proveedor:

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 Enlace de Pago

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

Para la configuración del Enlace de pago debe seleccionar la opción de Proveedor propio; justo después se mostrará el siguiente campo:

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

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

Configuración del Checkout

Para configurar el Checkout, seleccione el método "Enlace de pago" y, a continuación, elija "Checkout" como proveedor.

Al seleccionar Checkout, se mostrarán campos específicos para la configuración:

Empresa

Seleccione la empresa. En caso de que no haya una empresa activa vinculada a su contrato, puede solicitar la activación directamente en el bloque de pago.

Actualización automática de pago (opcional)

En esta sección, usted configura los mensajes automáticos de acuerdo con el estado devuelto por el pago:

Tiempo para el envío de la notificación:

Define cuánto tiempo esperará el sistema antes de verificar si el pago ha sido completado.

No es el tiempo de validez del enlace de pago; es solo el tiempo que el flujo espera antes de consultar el estado de la transacción.

Ej: Si configura 1 minuto, el flujo esperará ese período después de generar el enlace de pago. Al final del tiempo configurado, o si el usuario interactúa nuevamente antes de eso, se realizará la verificación del estado de la transacción y se enviará el mensaje correspondiente.

El tiempo máximo configurable para el tiempo de envío de la notificación es de 10 minutos. Lo ideal es que este tiempo sea menor que el tiempo de expiración del enlace de pago.

Mensaje de pago aprobado:

Ej: “¡Pago aprobado con éxito! Su pedido ya está siendo procesado.”

Mensaje de pago rechazado:

Ej: “¡Ops! Su pago ha sido rechazado. Verifique los datos e intente nuevamente.”

Mensaje de pago en procesamiento:

Ej: “Estamos procesando su pago. En instantes recibirá la confirmación.”

Mensaje de enlace de pago creado:

Ej: “Use el enlace de arriba para finalizar el pago.”

Estos mensajes hacen que la experiencia sea más clara y transparente para el cliente.

Actualmente, están disponibles cuatro 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.

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

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.

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

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

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

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 seguir al siguiente bloque.

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

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 como 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 la 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: Dependiendo de la configuración, el cliente verá botones como "Copiar código Pix", "Copiar código del boleto" o "Abrir enlace de pago".
Resumen del Pedido: Al hacer clic en los detalles, el cliente visualiza una lista estructurada con artículos (ej: Bolígrafo Blip, Vaso Mágico), cantidades y el valor total (ej: R$ 10,00).

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

Al hacer clic en "Abrir enlace 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, validez, CVV) y define las cuotas.
Dirección de Facturación: Para mayor seguridad, se solicitan datos de CEP y dirección completa.
Guardar tarjeta para compras futuras: Al marcar esta opción, su cliente podrá almacenar los datos de la tarjeta de forma segura y utilizarlos en próximas compras, sin necesidad de completarlos nuevamente.

3. Confirmación y Retorno Automático

El diferencial 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.
Tratamiento de Excepciones: En caso de que el enlace expire, el usuario no podrá reutilizar el mismo enlace de checkout, devolviendo un aviso de enlace expirado.

4. Compra con un clic

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

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

No obstante, se mantiene la flexibilidad. Si el cliente desea utilizar una nueva tarjeta o un método de pago diferente, basta con seleccionar la opción "Otra forma". Al hacer esto, el usuario es redirigido rápidamente al Web Checkout fuera de WhatsApp, permitiéndole ingresar la información de una nueva tarjeta de crédito y proceder con la compra de manera segura, manteniendo el recorrido fluido.

Observación:
En este modelo, es posible visualizar el comportamiento completo de la jornada, 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 reforzar que esta actualización automática del pago ocurre exclusivamente cuando el método utilizado es el Checkout. En las 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 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. 😃