Bubble
O módulo Efí Bank para Bubble permite receber pagamentos via Boleto, Cartão de Crédito e Carnê.
O Bubble é uma plataforma versátil para o desenvolvimento de sites/plataformas. Seguindo cuidadosamente esses passos, você será capaz de obter client_id e client_secret, codificá-los em base64 e configurar os campos essenciais para começar a receber seus pagamentos.
1. Instalação
1.1. Obter Credenciais da API
Antes de começar a receber pagamentos com a Efí, você precisará obter as credenciais de Produção e Homologação, para isso, siga as etapas a seguir:
- Acesse o painel da Efí no menu API.
- No menu lateral, clique em Aplicações depois em Criar aplicação.
- Insira um nome para a aplicação (por exemplo: Bubble), e selecione a opção "API de emissões" (boletos, carnê e cartão de crédito);
- Clique em Criar aplicação.
- Informe a sua Assinatura Eletrônica para confirmar as alterações e atualizar a aplicação.
Após obter client_id e client_secret, você será levado a uma tela semelhante a tela abaixo:
1.2. Codificar Credenciais
Copie então seu client_id e client_secret, acesse a página: https://efipay.github.io/encode-credentials/ e então cole as credenciais em seus respectivos campos.
Clique em "Codificar e Exibir"
Copie então o código retornado e guarde essa informação, pois usaremos mais a frente na configuração do plugin.
2. Instalando o plugin
- Acesso ao Editor do Bubble: Faça login na sua conta do Bubble e acesse o editor da sua aplicação.
- Adição do Plugin: No menu lateral, clique em "Plugins" e, em seguida, selecione "+ Add plugins".
- Instalação: Pesquise por "Efí Bank" e instale o plugin da forma de pagamento desejada:
Clique em "Done" para finalizar.
3. Configurando o plugin
Para configurar, copie o as credenciais codificadas, obtida ao final da etapa 1.2 e cole no campo Authorization (header)(token call) :
Pronto! Configuração finalizada! Obs: Caso utilize o plugin de cobranças de Cartão de crédito, executar a etapa 3.1 logo abaixo.
3.1. Cartão de Crédito
Importante!As etapas abaixo são necessárias SOMENTE para o plugin de Cartão de Crédito. Não se repetindo aos demais plugins da Efí Bank para Bubble.
Após preencher o campo de Authorization (Etapa 3), é preciso preencher os seguintes campos:
- PayeeCode: Insira o identificador de Conta da Efí disponível no menu API. Veja onde encontrá-lo aqui.
Os demais campos você precisa inserir o nome de cada input em seu projeto. Sendo eles:
- id-input-cardnumber: Numero do cartão
- id-input-cvv: CVV do cartão
- id-input-totalValue: Valor total do pedido
- id-input-expirationMonth: Mês de Expiração do cartão
- id-input-expirationYear: Ano de Expiração do cartão
- id-select-parcels: Campo de seleção das parcelas
- id-payment-token: Campo oculto para o Payment Token
Associe esses campos com os nomes dos inputs correspondentes em seu aplicativo. Certifique-se de que os nomes dos campos no Bubble correspondam aos IDs mencionados.
Por exemplo: Você tem um input para o cliente inserir o número do cartão. O nome desse input deve ser inserido no campo id-input-cardnumber
Pronto! Feito isso pode seguir com seu desenvolvimento!
3.2. Pix
Importante!As etapas abaixo são necessárias SOMENTE para o plugin de PIX. Não se repetindo aos demais plugins da Efí Bank para Bubble.
Após preencher o campo de Authorization (Etapa 3), é preciso seguir as seguintes etapas:
- Gere um certificado em sua conta Efí, veja como clicando aqui
- Faça upload do certificado na página de conversão e clique em "Codificar e Exibir", clicando aqui
- Copie o conteúdo do Certificado e cole no campo "Certificate file content"
- Copie o conteúdo da Key e cole no campo "Key file content"
Pronto! Feito isso pode seguir com seu desenvolvimento!
4. Notificações de Pagamento
4.1. Definindo sua URL de Notificações
Importante!Para receber notificações de pagamento em seu projeto de maneira automática, certifique-se de estar no plano "Starter" da plataforma Bubble. Vale ressaltar que é uma limitação/exigência da plataforma Bubble.
Em seu projeto:
- Acesse a opção "Settings"
- Clique na aba "API"
- Dentro de "Public API Endpoints", clique em "Enable Workflow API and backend workflows".
- Feito isso, vá até "Backend workflows"
- Clique em "New API workflow"
- Defina um nome para a API workflow (por exemplo, efi_cartao)
- Selecione os demais campos da seguinte forma:
- Clique em "Detect data" e copie a URL informada. Ela será a sua URL de notificação;
- Clique no menu "Workflow";
- Selecione seu evento de finalização de compra;
- Clique na action de criação de boleto/cartão/carnê;
- Ao final da janela de configuração, cole a URL copiada ao campo "notification_url";
Feito isso, execute a etapa abaixo:
4.2. Consultando um token de notificação
Em seu projeto, acesse o menu "Backend Workflows";
Selecione o Workflow criado anteriormente (Ex: efi_cartao) e adicione a action "EfíBank - Consultar Notificação.
Clique na action de consulta de notificações e no campo "token" selecione a opção "Request Data", após isso clique na opção "notification".
Pronto! Agora basta adicionar sua action com suas rotinas internas.
5. Dúvidas Frequentes
Onde posso acompanhar as transações geradas pelo plugin?
As transações geradas através do plugin podem ser acompanhadas em sua conta Efí no menu API > Minhas Aplicações > Sua Aplicação. Neste ambiente você poderá acompanhar todas as transações e suas respectivas situações.
Quando tento realizar um pagamento recebo a mensagem “Ocorreu um erro ao tentar realizar a sua requisição. Entre em contato com o proprietário da loja.”
Essa mensagem de erro pode ser exibida no momento da finalização da compra por diversos fatores. Neste caso, o primeiro passo é verificar as credenciais da sua aplicação e também conferir em sua API a sub-aba "histórico de requisições" veja como usar este recurso.
6. Suporte e Sugestões
Suas sugestões de novas ideias e implementações para o plugin da Efí são muito importantes. Portanto, caso você tenha alguma ideia, entre em contato com a nossa equipe. Iremos analisar sua sugestão e avaliar a possibilidade de implantação.
Caso você tenha alguma dúvida, entre em contato conosco pelo site Efí.