Integração Laravel + Angular + Pagseguro(Lightbox)

Olá, boys and girls of technology. Nesse post, irei compartilhar uma possível maneira de se integrar a API do Pagseguro com uma aplicação web.

Antes de começar, eu gostaria de explanar alguns detalhes. Como puderam perceber pelo título do post, estarei usando o Laravel como api de backend. Vocês podem estar se perguntando — Ué, mas eu não posso fazer as chamadas para a API do Pagseguro diretamente pelo front ? — e a resposta é: Não !! Infelizmente, por questões de segurança (segundo eles mesmo), as chamadas precisam ser feitas pelo servidor. Por isso então, usarei o Laravel.

O pagamento feito pelo usuário do seu sistema junto com a API do Pagseguro pode ser feito através de algumas maneiras. Uma delas, é o redirecionamento para o próprio site do Pagseguro. Outra maneira, é abrir uma janela no seu próprio site. Essa maneira é chamado por eles de Lightbox (e que será usado nesse post). Essa janela é aberta através de uma execução de um script de javascript que você carrega na sua aplicação. A outra maneira é fazer todo o pagamento no seu próprio ambiente. Essa maneira é chamada de Transparente.

A API do Pagseguro possui todo um ambiente de teste (Sandbox) para podermos simular os pagamentos. Usei ele (claro, rs) para testar a integração. Ou seja, não é feito nenhum pagamento real e os dados usados são todos fictícios.

O código usado no post está disponível no meu github .

Dito isto, podemos começar com a mão na massa.

Backend

Vamos começar pela API backend. Como já dito, usei Laravel (5.8)

Eu não vou mostrar como instala o Laravel por que existe milhões de tutoriais pra isso, então vamos direto ao assunto.

No primeiro passo, temos que instalar um pacote de PHP especialmente feito para usar a API do Pagseguro ( https://github.com/pagseguro/pagseguro-php-sdk)

composer require pagseguro/pagseguro-php-sdk

Temos que fazer o uso de algumas variáveis de ambiente para configurar a API do Pagseguro. No caso, usa-se os dados fornecidos pelo Pagseguro. Se você ainda não fez cadastro no Pagseguro, acesse esse site -> https://dev.pagseguro.uol.com.br/, clique em “Sandbox” e realize seu cadastro. Quando acessar sua Dashboard, clique em “Vendedor”. Nele constará os dados necessários para colocar na .env.

Tela do Sandbox — menu “Vendedor”

Assim que tivê-las em mão, acrescente em sua .env

PAGSEGURO_EMAIL=<seu email>
PAGSEGURO_TOKEN=<seu token>
PAGSEGURO_AMBIENTE=sandbox

Aqui eu criei um controle para fazer uma chamada na API do Pagseguro (app/Http/Controllers/PagseguroController.php).

Como podemos perceber, no começo do código, se trata apenas de configurações.

Depois crio uma função chamada “checkout”. Nela, instancio a Classe Payment. Depois adiciono os itens para o checkout — $payment->addItems(…

Existe uma lista de opções (obrigatórias e não-obrigatórias) que podemos escolher para o checkout. Acesse o doc da API para mais detalhes: (https://dev.pagseguro.uol.com.br/docs).

Configuro a moeda — $payment->setCurrency(“BRL”); — q só aceita BRL, rs.

Registro o checkout — $payment->register(… — e, se tudo der certo, recebemos o código da transição. Código esse que é usado lá no frontend (Angular) para abrir a janela do Pagseguro. Sem esse código, não podemos abrir essa janela.

Em seguida, crio uma rota para acessar a api Laravel em routes/api.php

Route::post('checkout', 'PagseguroController@checkout');

Pronto, para o backend é só isso.

Frontend

Agora vamos para o frontend. Usaremos Angular 7

Começaremos pelo Service.

No caso, criei um service chamado PagseguroService

Aqui é sem segredo, né? Não passa de uma chamada (POST) para a nossa API backend.

Também criei um component chamado ItemComponent

O DialogComponent é o Dialog do Angular Material. Não irei explanar sobre ele por que não é foco do post.

O método checkout usa o PagseguroService para fazer a chamada para a API Laravel passando os parametros necessários. No callback do subscribe, chamamos o método lightbox, nele uso a API de javascript do Pagseguro. Para usá-la, é preciso inserir ela na sua aplicação. Então, inseri ele no meu index.html

<script type="text/javascript"src="https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js">
</script>

Depois, eu preciso fazer referência dele no meu componente

declare let PagSeguroLightbox: any;

o PagSeguroLightBox precisa do código da transação que recebemos na chamada do API Laravel e um objeto de callback, que possui duas propriedades, success e abort. Como ela roda fora no ngZone, precisamos chamar o ngZone para podermos usar as propriedades do nosso Componente Angular. Como o próprio nome já diz, a propriedade success é executada quando o pagamento ocorre sem erro. A propriedade abort é executada quando a janela aberta pelo script do Pagseguro é fechada pelo usuário.

Aqui está o template do componente:

Ou seja, quando o usuário clica no botão, é chamado o método checkout, que por sua vez, faz a chamada na API Laravel. Se tudo der certo, a API retorna o código da transação. E então, chamamos o método lightbox passando o código da transição. Aí a janela do pagseguro será aberta.

E é isso pessoal. A pessoa faz o pagamento dela e, se tudo der certo com o pagseguro, o callback passado na propriedade success será executado e já era.

É isso aí. Qualquer dúvida, estamos aí para saná-la (se possível, rs).

Abraços