Criando Fluxos de Pagamento no Studio com o Bloco de Pagamentos – Blip | Blip Help

Canal disponível: WhatsApp

Introdução: Agilizando Suas Vendas

O Bloco de Pagamentos do Blip é a solução nativa da plataforma para solicitar pagamentos de forma eficiente. Ele permite que você configure métodos de pagamento como PIX Copia e Cola, Boleto e Link de Pagamento, além de detalhar os produtos vendidos, tudo isso dentro do seu fluxo no Blip.

O que seu cliente recebe? Seu cliente recebe uma mensagem de pagamento completa e fácil de entender no WhatsApp, contendo:

Nome e descrição dos produtos ou serviços.
Valor exato do pedido.
Métodos de pagamento disponíveis.
Uma mensagem personalizada.

Criação e Configuração do Bloco de Pagamentos

Configurar o bloco é um processo estruturado em três passos principais no Studio:

1. Adicione o Bloco de Pagamentos

Acesse o Studio do seu bot (o editor de fluxo).
Clique em Novo bloco e selecione a opção Pagamento.
O bloco será inserido no fluxo e deve ser conectado em um ponto lógico da jornada.

2. Configure o Método de Pagamento

Importante: O bloco de pagamentos apenas organiza e exibe as opções de pagamento na conversa. A geração e o processamento da cobrança são responsabilidade do adquirente ou instituição de pagamento utilizada. Você pode usar provedores próprios ou integrar soluções da Blip, enquanto o bloco apenas apresenta as informações dentro da jornada conversacional.

Nesta aba, você define as opções de pagamento que serão oferecidas ao cliente.

Método de pagamento: escolha entre PIX Copia e Cola, Boleto ou Link de Pagamento.

Durante a configuração, você pode utilizar tanto valores estáticos quanto variáveis do fluxo.

O uso de variáveis é especialmente recomendado em cenários onde os dados de pagamento são gerados dinamicamente via API em um bloco anterior (por exemplo, por meio de uma chamada HTTP).

Isso garante maior flexibilidade, automação e integração com sistemas externos, evitando a necessidade de valores fixos no fluxo.

Configuração do PIX Copia e Cola

Se o método selecionado for PIX, os seguintes campos serão exibidos:

Nome do negócio: nome que será exibido ao cliente (ex: Blip Payments) ou uma variável (ex: {{storeName}}).
Tipo de chave PIX: selecione CPF, CNPJ, E-mail, Telefone ou Chave aleatória, é um campo fixo e não é possível parametrizar via variável do fluxo. A seleção deve ser feita manualmente na configuração do bloco
Valor da chave PIX: Insira o dado correspondente ao tipo (Lembre-se: se for CPF ou CNPJ, ele deve ser válido) ou utilize uma variável.
Código PIX Copia e Cola: insira o código Copia e Cola gerado pelo seu banco manualmente ou utilize uma variável do fluxo, caso o código seja gerado dinamicamente.

Configuração do Boleto

Se o método selecionado for Boleto, os seguintes campos serão exibidos:

Código do boleto: informe o código de barras do boleto.

Esse campo pode ser preenchido manualmente ou por meio de uma variável do fluxo, caso o boleto seja gerado dinamicamente (ex: {{codeBoleto}}).

Configuração do Link de Pagamento

Ao selecionar Link de Pagamento, você poderá informar:

Um link HTTPS fixo ou dinâmico.

Aceita variável do fluxo, ideal quando o backend gera um link personalizado para cada cliente.
Exemplo: {{paymentLink}}.

Atualmente, estão disponíveis três métodos de pagamento para configuração.

E é possível habilitar até dois métodos no mesmo bloco, permitindo que o cliente escolha a opção mais conveniente no momento da compra.

3. Configure os detalhes do produto

Acesse a aba Configuração e complete:

Tipo do produto: escolha se é Digital ou Físico.
Número da cobrança: pode ser um valor fixo (ex.: 123456) ou uma variável que puxa o ID do produto (ex.: {{selectedProduct@retailer_id}}).

Deve ser um valor com no máximo 35 caracteres, podendo conter apenas letras, números e traços.

Especificações do produto: informe o JSON Array no formato abaixo:

[
  {
    "retailer_id": "123456",
    "name": "Nome do item",
    "amount": {
      "value": 1000,
      "offset": 100
    },
    "quantity": 1
  }
]

Dentro do campo relacionado ao produto, deve-se retornar exatamente nesse formato para que o bloco de pagamentos interprete corretamente os dados.

Para gerar este JSON, pode ser utilizado um script (executado no bloco anterior ao bloco de pagamentos) e informar a variável de saída do script, ou informar o JSON Array diretamente no campo. Geralmente é utilizado o caminho de script, principalmente quando a seleção dos produtos e preços são dinâmicas.

É permitido informar mais de um item neste Array, desde que respeite a formatação do JSON para cada item.

Adicionando múltiplos produtos dinamicamente

Quando o usuário pode selecionar mais de um produto ao longo da conversa, uma alternativa é utilizar um script acumulador executado a cada seleção que mantém o array de produtos atualizado entre as interações. A lógica funciona da seguinte forma:

A cada seleção, o script verifica se o produto já existe no array pelo nome.
Se já existe, incrementa a quantidade (quantity).
Se é novo, adiciona o item ao array com 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: "Nome do item 1",
                description: "Descrição do item 1",
                price: "10.00",
                amount: { value: 1000, offset: 100 }
            },
            "id_produto_2": {
                retailer_id: "789012",
                name: "Nome do item 2",
                description: "Descrição do item 2",
                price: "20.00",
                amount: { value: 2000, offset: 100 }
            },
            "id_produto_3": {
                retailer_id: "345678",
                name: "Nome do item 3",
                description: "Descrição do item 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
        };
    }
}

Ao final do fluxo de seleção, a variável de saída do script (ex.: {{products}}) pode ser referenciada diretamente no campo de especificações do produto no bloco de pagamentos dessa forma:

Texto principal: mensagem exibida junto ao pagamento, por exemplo:
“Finalize seu pedido!
Realize o pagamento via Pix copia e cola usando o app do seu banco.”
Rodapé (opcional): insira um texto adicional, geralmente um texto curto de orientação ou alerta como: “O pagamento expira em 30 minutos”, ou “Pagamento seguro”.

Condições de Saída do Bloco

Ao atingir este bloco no fluxo, seu cliente receberá instantaneamente a mensagem de pagamento com todas as informações associadas caso tudo esteja configurado corretamente. O bloco de pagamentos não possui a opção de aguardar input, portanto ao passar por este bloco o seu cliente será direcionado automaticamente para o próximo bloco de acordo com suas condições de saída. Em condições de saída é possível definir para qual bloco o cliente será direcionado caso houver algum erro e caso houver sucesso.

Quando todas as configurações estiverem corretas e a saída for direcionada como sucesso, o fluxo seguirá normalmente para o próximo bloco, onde você poderá tratar as regras de negócio, como a confirmação do pagamento via API.

Esse é o comportamento padrão do Bloco de Pagamentos.

O que você está construindo aqui?

Não é só um fluxo. Você está construindo:

Uma experiência
Um canal de venda real
Um processo confiável
Um ponto de conversão dentro do WhatsApp

Quando bem configurado, o Bloco de Pagamentos não é técnico, ele é estratégico.

O que o seu cliente vê no WhatsApp?

Depois que o Bloco de Pagamentos é acionado, o WhatsApp envia automaticamente um card oficial de cobrança, padronizado e profissional.
Não é apenas um link, é um componente estruturado dentro da conversa.

A estrutura visual do card permanece a mesma em todos os métodos de pagamento.
O que muda é apenas o botão de ação exibido ao cliente e a bandeira do método de pagamento.

A imagem acima demonstra um cenário ilustrativo de aplicação do Bloco de Pagamentos em um fluxo automatizado. Utilizando a opção de Pix Copia e Cola e Link de Pagamento como métodos de pagamento.

A arquitetura do chat conversacional é totalmente adaptável à sua estratégia: você define o ritmo da conversa, o tom da interação e o momento ideal de conversão, mantendo o pagamento como parte fluida e natural da experiência.

Para mais informações, acesse a discussão sobre o assunto em nossa comunidade ou os vídeos no nosso canal. 😃