A PUSHIN PAY é uma plataforma que oferece soluções de pagamento via PIX, proporcionando um processo ágil e seguro para e-commerces, bots de Telegram e outras plataformas. Neste blog, vamos demonstrar como integrar a API da PUSHIN PAY com o TypeBot para automatizar a geração e apresentação de códigos PIX, permitindo que seus clientes realizem pagamentos de forma rápida e eficiente.

Entendendo o Fluxo de Integração com o TypeBot

A integração que criamos utiliza a API de PIX da PUSHIN PAY para gerar um código de pagamento e exibi-lo de forma dinâmica ao cliente, tanto no formato “Copia e Cola” quanto em QR Code. Vamos explorar cada fase e componente do fluxo para entender como funciona na prática.

1. Fase de Abertura

Na abertura do fluxo, a mensagem inicial é enviada ao cliente para contextualizar a comunicação e prepará-lo para o pagamento:

• Componente: Texto
  • Mensagem: “Olá, cliente. Somos a pushinpay.com.br e queremos te lembrar que a cobrança está disponível.”

Esse componente de Texto tem como objetivo garantir que o cliente entenda o motivo da interação, criando um ponto de contato que reforce a marca e a funcionalidade oferecida (pagamento via PIX).

2. Geração do PIX via PUSHIN PAY

Nesta fase, utilizamos o Componente HTTP Request para fazer uma chamada à API da PUSHIN PAY e gerar o código PIX. Esse componente permite que o fluxo se comunique diretamente com APIs externas, como a da PUSHIN PAY, e retorne os dados necessários.

• Componente: HTTP Request
  • Método: POST
  • URL da API: https://api.pushinpay.com.br/api/pix/cashIn
  • Cabeçalhos:
    • Authorization: Bearer SEU_TOKEN
    • Accept: application/json
    • Content-Type: application/json
  • Corpo da Requisição:
    json

    Copiar código

    {
"value": 1234,
"webhook_url": "http://seuservico.com/webhook"
}

  • Resposta Esperada:
    • qr_code: O código de pagamento PIX no formato “Copia e Cola”.
    • qr_code_base64: O código QR em formato base64, que será usado para exibição gráfica.

O Componente HTTP Request é fundamental para que o TypeBot possa se integrar a APIs externas. Neste caso, ele envia uma requisição POST para a API da PUSHIN PAY, passando os parâmetros necessários (como o valor e a URL do webhook). Os cabeçalhos incluem o Authorization no formato Bearer SEU_TOKEN, juntamente com os cabeçalhos Accept e Content-Type, ambos definidos como application/json. Em seguida, a API retorna os códigos PIX gerados, tanto para “Copia e Cola” quanto para o QR Code.

Caso você ainda não tenha o seu cadastro e o token de acesso, registre-se no link https://app.pushinpay.com.br/#/register para obter as credenciais necessárias.

3. Apresentação do QR Code

Depois que o código PIX é gerado pela API, ele é apresentado ao cliente no formato de QR Code. Isso oferece uma opção visual para que o cliente possa simplesmente escanear o código com seu aplicativo bancário.

• Componente: Imagem
  • Fonte da Imagem: A variável {{qr_code_base64}} é usada para exibir a imagem do QR Code gerada automaticamente pela API.

Neste ponto, o Componente de Imagem é configurado para utilizar a variável dinâmica {{qr_code_base64}}, que contém o QR Code em formato base64. Isso permite que a imagem do código seja carregada diretamente no fluxo e apresentada ao cliente de forma rápida e simples.

4. Apresentação do Código Copia e Cola

Além do QR Code, o código PIX no formato “Copia e Cola” também é apresentado ao cliente. Isso facilita o processo para usuários que preferem copiar o código e colá-lo diretamente no aplicativo bancário ou plataforma de pagamento.

• Componente: Texto Dinâmico
  • Mensagem: “Segue para pagamento: qr_code.”
  • Variável: A variável qr_code inserida automaticamente exibe o código gerado pela API.

Esse componente é configurado para utilizar variáveis dinâmicas, permitindo que o código PIX seja gerado e apresentado de forma automática e personalizada para cada cliente.

5. Ação de Cópia do Código PIX

Facilitando ainda mais o processo de pagamento, o fluxo inclui um botão que permite ao cliente copiar o código PIX com apenas um clique.

• Componente: Botão de Ação
  • Texto do Botão: “Copiar Código”
  • Ação Associada: Copiar o valor do código PIX para a área de transferência.

6. Execução do Script de Cópia

Após o cliente clicar no botão de copiar, um script é executado para realizar a cópia automática do código PIX.

• Componente: ‘>_ Script’
  • Código do Script:
    javascript

    Copiar código

    await navigator.clipboard.writeText({{qr_code}});


  Esse componente usa a função navigator.clipboard.writeText() para copiar o valor armazenado na variável {{qr_code}} diretamente para a área de transferência do cliente, tornando o processo mais rápido e eficiente.

7. Confirmação de Cópia

Após o script de cópia ser executado com sucesso, uma mensagem de confirmação é exibida, informando ao cliente que o código foi copiado com sucesso.

• Componente: Mensagem de Confirmação
  • Mensagem: “PUSHIN PAY – Código copiado com sucesso!”

Esse componente de Mensagem de Confirmação é essencial para garantir uma boa experiência ao cliente, já que informa de forma clara que a ação desejada (cópia do código PIX) foi realizada com sucesso.

Conclusão

A integração da API da PUSHIN PAY com o TypeBot permite automatizar o processo de geração e entrega de códigos PIX, proporcionando uma experiência fluida e eficiente para os clientes. Esse fluxo demonstra como é possível oferecer múltiplas opções de pagamento (Copia e Cola ou QR Code) e facilitar o processo com funcionalidades como o botão de copiar código e a execução de scripts personalizados.

Se você está buscando uma solução prática e poderosa para automatizar cobranças via PIX, a PUSHIN PAY oferece a integração perfeita com suporte especializado e documentação completa.