[PLUGIN] Novo Plugin PagSeguro 💳

Other languages Português (Portuguese)
1

Fala galera!

Como devem ter notado, ADORO facilitar a vida de quem quer criar aplicativos e sente falta de conteúdo em português.

Mas não falta só conteúdo em português, faltam também ferramentas de integração específicas para Brasil e Portugal.

Em soluções de pagamento, por exemplo, o Bubble é muito casado com o Stripe, que nem aceita oficialmente o processamento de pagamentos no Brasil ainda.

Por isso, criei um plugin de integração Bubble x Pagseguro:

O plugin do Pagseguro aceita, por enquanto, 3 modalidades de pagamento:

  • Checkout com Redirecionamento
  • Checkout Transparente (sem redirecionamento)
  • Recorrência / Assinatura

Futuramente vou fazer também o Split de Pagamentos (para dividir o recebimento entre 2+ pessoas), ideal para marketplaces e modelos de aplicativos que geram comissão.

BREVE TUTORIAL DE USO:

Para criar suas credenciais de acesso ao Pagseguro:

  1. Crie sua conta de testes em sandbox.pagseguro.com.br
  2. Crie sua conta real em pagseguro.com.br

Para criar um Checkout com Redirecionamento:

  1. Obter Autorização Código Checkout
  2. Encaminhar o usuário para a URL de aprovação com o código de checkout gerado acima

Para criar um Checkout Transparente:

  1. Gerar Sessão
  2. Gerar Token do Cartão
  3. Processar Pagamento no Cartão

Para criar uma cobrança de Recorrência / Assinatura:

  1. Criar Plano (1 vez só)
  2. Gerar Sessão
  3. Gerar Token do Cartão
  4. Fazer Adesão ao Plano

Para criar notificações (importantíssimo, pois é a forma que o Pagseguro avisa seu aplicativo sobre alterações de status nos pagamentos), crie uma API ENDPOINT (em API Workflows) com as ações abaixo:

  1. Consultar Notificação
  2. Ao fazer a chamada acima de consulta da notificação, você vai receber todas as informações atualizadas da transação. Então aqui você pode alterar seu banco de dados de acordo com as informações recebidas.

É isso.

Peço aos amigos um pouco de paciência ao realizar os testes, pois este é o 1° Plugin que crio para o Bubble. Ainda estou pegando o jeito :grimacing:

Então, se tiverem qualquer problema ou dificuldade, me chamem por aqui ou pelo meu insta @renatoasse.

Abraços!

Renato Asse
:red_circle: Meus tutoriais de Bubble no YouTube
:computer: Meus tutoriais de Bubble no Blog
:camera: Meu Instagram

6 Likes
2

Olá, é possível criar uma aplicação de usuário onde consigo trazer como informação a assinatura que ele fez? Nome do plano, validade, status?

3

Opa Jean, o Pagseguro tem as chamadas de API pra isso, mas eu não inclui no plugin.
Como você consegue pegar essas informações de forma bem visual no próprio painel deles, achei que seria desnecessário.
Se achar que agrega, me diga e coloco aqui no roadmap pra fazer :grinning:

1 Like
4

Seria interessante. Estou aprendendo como funciona o bubble, e estou tentando criar um sistema para controle de assinaturas recorrentes, onde o cliente se cadastra no meu sistema e visualiza a sua assinatura. Pretendo montar um painel de administrador onde consiga consultar o status da assinatura do cliente, assim consigo verificar se ele terá acesso aos serviços.

Como sou novato nisto, seria interessante ter um guia pratico como usar o plugin. Confesso que estou muito perdido. rsrs

5

Jean, não deixa de me seguir no Youtube, lá ensino bastante coisa:
https://www.youtube.com/renatoasse

Temos um grupo chamado Comunidade Sem Codar e o Curso Sem Codar, com 120+ aulas em que entro à fundo em cada detalhe do Bubble. Lá tem meia dúzia de aulas ensinando a usar o plugin do Pagseguro. Geralmente coloco esses vídeos mais específicos no Curso, mas as vagas estão esgotadas no momento.

Mas vou criar um tutorial resumido e posto aqui no fórum semana que vem!

Abraços e seja bem vindo ao Bubble :smiley:

6

Renato, quando tento gerar o token do cartão ele esta retornando valor nulo

estou usando os dados do cliente teste que fica no sandbox, incluindo o cartão
Número:4111111111111111
cvv:123
mes:12
ano:2030

o que pode ser?

primeiro gerei uma cessão e depois estou gerando o token do cartão.

7

Jean,

Fiz uma atualização no plugin, pra melhorar a segurança quando for gerar o cartão.
O fluxo agora é diferente, veja só:
Primeiro, certifique-se que você está com a versão atualizada do Plugin.

Agora faz assim pra gerar o token:

Usa a ação Element > Criar Token de Cartão e colocar no elemento a PagSeguro

image
image485×583 18.9 KB

Essa ação vai criar um token e jogar no elemento PagSeguro, mas essa chamada é assíncrona, ou seja, não adianta colocar nada depois dela.

Agora, cria um gatilho “A PagSeguro Token Cartão Gerado”:
image

E aí pode colocar as próximas ações dentro desse workflow quando um token for gerado.

Abraços!

Renato

8

Obrigado!!!

Resolveu.

Aquela duvida sobre como realizar consultas para verificar se um assinante esta ativo, você conseguiria me explicar como fazer?

9

Show!

Pra fazer isso, @jean_freitas, precisa integrar as APIs de “GET” aqui:
https://dev.pagseguro.uol.com.br/reference#api-recorrencia

Eles têm 3 chamadas pra obter dados da API de Recorrência:

  • Listar ordens de pagamento (vc manda o código de adesão e ele te retorna os pagamentos, valor, data e desconto)
  • Consultar pelo código de adesão ao plano (vc manda o código da adesão e ele te retorna o nome do plano, código, nome , email, telefone e endereço do pagador)
  • Consulta por intervalo de datas (vc manda a data e ele te retorna todas as adesões geradas nesse período)

Consigo incluir isso dentro de algumas semanas.
Na real, é bem fácil…
Hmm, pensando bem, peraí que eu já faço.

Pronto, feito. Já subi uma versão nova do Plugin Pagseguro, atualiza lá que vão aparecer essas 3 chamadas novas (6 na verdade, pois são 3 sandbox e 3 live).

Testa lá e qualquer dúvida é só chamar!

Abraços,

Renato

10

Olá Renato, não estou conseguindo usar a chamada Consultar pelo código de adesão ao plano.

Não aparece as opções tipo (´s value)

image
image438×592 67.7 KB

11

Jean,

Empurrei uma nova versão. Atualiza e tenta novamente, por favor?

Abraços,

Renato

12

Obrigado, resolveu.

Podes me dizer qual era o erro e como resolver? gostaria de aprender um pouco mais sobre API.

Outra duvida,

devido a esse meu projeto, eu estou me aprofundando do uso de API, JSON e XML, voltada para VBA (Sei que é doido, mas tem utilidade).

Nisto, consegui implementar as API´s do Pagseguro lá. Porém, encontrei uma pedra, que é o script inicial, onde gera os hash.

entendi que é um Javascript gerado no navegador do cliente.

Como não entendi a logica toda desses script, não consegui pesquisar e avançar, você teria alguma dica?

13

Opa Jean,

Sobre o Bug, é um probleminha com o desenvolvedor de plugins do Bubble.
A gente configura a chamada de API, e recebe a chamada de resposta que configura aquelas opções que estavam faltando.
Mas, ao mudar uma só letrinha qualquer depois, ele perde essa chamada de resposta.
Então eu só refiz as chamadas e publiquei o plugin novamente.

Mas, gostando do assunto, te sugiro estudar os próprios plugins. É assim que estou aprendendo.
Você consegue olhar por dentro de todos os plugins gratuitos.

Acessa aí o do Pagseguro e clica em SEE PLUGIN CODE:

Ali você vai ver o código javascript usado pra gerar o hash :slight_smile:

Abraços,

Renato

14

Sim, vivo dando uma olhada, ainda estou tentando descobrir como executar o script no VBA.

Dá uma olhada na função “[Sandbox] Recorrência - Listar ordens de pagamento”. Ela não esta retornando valores, deve estar com bug tbm

15

@jean_freitas,

Essa chamada realmente eu não consegui corrigir.
Até empurrei uma atualização nova do plugin retirando ela, pelo seguinte:

O Pagseguro já devolve a chamada com o próprio código da referência nela:

image
image549×600 26.1 KB

Dessa forma, fica impossível de prever qual será o nome da chamada, e por isso elas sempre retornarão vazias.

Ao meu ver, essa é uma limitação que precisa ser corrigida pelo Bubble (para poder receber qualquer dado no retorno da chamada), ou pelo Pagseguro no envio da resposta.

Não consegui enxergar solução :frowning:

16

putz, complicou, queria colocar o histórico de pagamentos

17

renato, acredito que esteja faltando alguns parâmetros
data inicial
data final
pagina
e Max paginas

verifica se incluindo eles resolve nosso problema

18

Fala @renatoasse, primeiro de tudo, obrigado pelo plugin.

To tendo uma dificuldade com a assinatura de plano, mostra que o Token gerado é inválido:

image
image792×415 59.9 KB

O Workflow ta dessa forma:

image
image2059×1009 139 KB

Alguma suspeita do que pode ser?

19

Oi @emgreonline,

Sim, dá uma lida nesse post aqui:

É que quando vc pede pra “Gerar o Token”, ele manda um código pro elemento em Javascript (que vai gerar o token no próprio navegador do usuário, por questão de segurança.
Então quando vc tenta fazer a Adesão ao Plano já logo na próxima ação, o Token ainda não foi gerado.

A solução está no post que linkei acima, é só criar uma nova ação com o gatilho “Quando o token for gerado…”

Abraços,

Renato

21

Bom trabalho @renatoasse, você ajudou muito a comunidade, espero o video da instalação desse Plugins no seu canal.

Você é Bubble Pionnier No Brasil. Abraço.