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

Importante: Atualmente, o modelo de pagamentos via WhatsApp está disponível apenas para o Brasil e Índia.

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, Link de Pagamento e Checkout, 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:

Provedor: campo que indica o provedor responsável pela transação. No caso do PIX Copia e Cola, é utilizado o provedor configurado pelo próprio usuário, após selecionar a opção de provedor próprio os outros campos ficaram visíveis.
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 após selecionar o provedor:

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 a opção "Link de Pagamento", serão exibidas duas alternativas de provedor, conforme ilustrado no exemplo a seguir:

Para configuração do Link de pagamento você deve selecionar a opção de Provedor próprio logo em seguida o seguinte campo será exibido:

Link HTTPS: 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}}.

Configuração do Checkout

Para configurar o Checkout, selecione o método "Link de pagamento" e, em seguida, escolha "Checkout" como provedor.

Ao selecionar Checkout, serão exibidos campos específicos para configuração:

Empresa

Selecione a empresa. Caso não haja uma empresa ativa vinculada ao seu contrato, você pode solicitar a ativação diretamente no bloco de pagamento.

Atualização automática de pagamento (opcional)

Nesta seção, você configura as mensagens automáticas de acordo com o status retornado pelo pagamento:

Tempo para envio da notificação:

Define quanto tempo o sistema vai esperar antes de verificar se o pagamento foi concluído.

Não é o tempo de validade do link de pagamento é apenas o tempo que o fluxo aguarda antes de consultar o status da transação.

Ex: Se você configurar 1 minuto, o fluxo aguardará esse período após gerar o link de pagamento. Ao final do tempo configurado, ou se o usuário interagir novamente antes disso, será feita a verificação do status da transação e a mensagem correspondente será enviada.

O tempo máximo configurável para o tempo de envio da notificação é de 10 minutos.

O ideal é que esse tempo seja menor que o tempo de expiração do link de pagamento.

Mensagem de pagamento aprovado:

Ex: “Pagamento aprovado com sucesso! Seu pedido já está sendo processado.”

Mensagem de pagamento recusado:

Ex: “Ops! Seu pagamento foi recusado. Verifique os dados e tente novamente.”

Mensagem de pagamento em processamento:

Ex: “Estamos processando seu pagamento. Em instantes você receberá a confirmação.”

Mensagem de link de pagamento criado:

Ex: “Use o link acima para finalizar o pagamento.”

Essas mensagens tornam a experiência mais clara e transparente para o cliente.

Atualmente, estão disponíveis quatro 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.

Detalhe: se o primeiro método de pagamento estiver configurado como Link de pagamento não é possível configurar outro Link de pagamento como segundo método no mesmo bloco de pagamentos.

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.

Outra possibilidade é gerar um Script que retorna um número aleatório de 5 dígitos (entre 10000 e 99999) em um bloco anterior, como o exemplo abaixo:

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

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.

O Bloco de Pagamentos transforma o fluxo conversacional em um canal de venda real, oferecendo uma interface profissional e segura.

1. Visualização do Card de Cobrança

Assim que o cliente atinge o Bloco de Pagamentos no fluxo, ele recebe um card oficial de cobrança padronizado pelo WhatsApp.

Informações Visíveis: O card exibe o nome e descrição dos produtos, o valor exato do pedido, os métodos de pagamento disponíveis e uma mensagem personalizada.
Botão de Ação: Dependendo da configuração, o cliente verá botões como "Copiar código Pix", "Copiar código do boleto" ou "Abrir link de pagamento".
Resumo do Pedido: Ao clicar nos detalhes, o cliente visualiza uma lista estruturada com itens (ex: Caneta Blip, Copo Mágico), quantidades e o valor total (ex: R$ 10,00).

2. Identificação e Dados de Pagamento (Web Checkout)

Ao clicar em "Abrir link de pagamento" (no caso do método Checkout), o usuário é direcionado para uma página segura fora do WhatsApp:

Identificação: O cliente preenche dados pessoais básicos, como nome, sobrenome, CPF, e-mail e telefone, para garantir a segurança da transação.
Seleção do Meio: O usuário escolhe o método específico, como Cartão de Crédito, onde insere os dados do cartão (número, validade, CVV) e define o parcelamento.
Endereço de Cobrança: Para maior segurança, são solicitados dados de CEP e endereço completo.
Salvar cartão para compras futuras: Marcando essa opção, o seu cliente poderá armazenar os dados do cartão com segurança e utilizá-los em próximas compras, sem precisar preenchê-los novamente.

3. Confirmação e Retorno Automático

O diferencial do método Checkout é a integração do status em tempo real com a conversa.

Tela de Sucesso: Após o processamento, uma tela exibe "Pagamento realizado com sucesso!", com data, hora e o botão "Voltar para a conversa".

Atualização no WhatsApp: Se a Atualização automática do pagamento estiver habilitada, o sistema aguarda o tempo configurado (até 10 minutos) e envia uma mensagem automática de confirmação (ex: "Pagamento aprovado com sucesso!") diretamente no chat.
Tratamento de Exceções: Caso o link expire o usuário não consegue reutilizar o mesmo link de checkout retornando um aviso de link expirado.

4. Compra com um clique

Na próxima compra, seu cliente pode usar o cartão salvo e concluir o pagamento com apenas um clique, sem sair do WhatsApp.

O fluxo de Compra com um clique eleva a praticidade. Ao selecionar um cartão previamente salvo, a transação é concluída instantaneamente na própria interface do WhatsApp, sem a necessidade de inserir novamente os dados ou navegar para uma página externa.

Contudo, a flexibilidade é mantida. Se o cliente desejar utilizar um novo cartão ou um método de pagamento diferente, basta selecionar a opção "Outra forma". Ao fazer isso, o usuário é prontamente redirecionado ao Web Checkout fora do WhatsApp, permitindo que ele insira as informações de um novo cartão de crédito e prossiga com a compra de maneira segura, mantendo a jornada fluida.

Observação:

Nesse modelo, é possível visualizar o comportamento completo da jornada, incluindo o retorno automático do status da transação diretamente na conversa, com confirmação de pagamento integrada à experiência.

É importante reforçar que essa atualização automática do pagamento ocorre exclusivamente quando o método utilizado é o Checkout. Nas integrações com provedores externos, não há atualização automática do status da transação dentro do chat.

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