Checkout transparente com PagSeguro no seu APP Rails

Introdução

Integrar a sua aplicação com um meio de pagamento pode ser uma tarefa difícil e frustrante, porém na maior parte dos APPs com fins lucrativos é necessário ter uma maneira de receber dinheiro do usuário pelo sistema.

Neste Post eu falo sobre a integração do Rails com o checkout transparente do PagSeguro (Pagamento todo feito na nossa plataforma, sem redirecionar para o PagSeguro), vamos percorrer todo o caminho, passando pela criação do HTML, JS, dos Controllers e models, deploy para o Heroku e por fim o teste na plataforma do PagSeguro.

Vamos lá \o/

O que vamos aprender
  1. Como criar a estrutura para pegar os dados de pagamento do usuário
  2. Como enviar a solicitação de Pagamento para o PagSeguro
  3. Como Subir nossa aplicação para o Heroku
  4. Como receber as notificações do PagSeguro
  5. Como testar tudo isto 🙂

Ingredientes
  • Ruby 2.3.1
  • Rails 5
  • Devise (Gem)
  • bootstrap-sass (Gem)
  • pagseguro-oficial (Gem)
  • Heroku
Objetivos

Vamos começar criando a plataforma para criar novos produtos para que o usuário possa escolher um e ir para a tela de pagamento onde ele vai colocar seus dados de pagamentos e nós vamos via javascript chamar o PagSeguro para pegar as Opções de pagamento (Parcelamento), depois vamos subir nosso APP no heroku para ter uma URL válida para que o PagSeguro possa nos enviar notificações com o status do pagamento e por fim vamos listar todos os pedidos de pagamento do sistema e verificar se o status realmente mudou baseado nas chamadas do PagSeguro.

Passo a Passo
  1. Criação da conta no PagSeguro
  2. Criação da estrutura do Projeto
  3. Inclusão do Javascript
  4. Recebendo notificações
  5. Subindo para o Heroku
  6. Testando tudo isto 🙂
Mãos à Obra \o/
Parte 1 – Criação da conta no PagSeguro
  1. Caso você ainda não possua uma conta no PagSeguro acesse esse link (https://pagseguro.uol.com.br/registration/registration.jhtml?tipo=cadastro#!vendedor) e crie uma conta.
    PagSeguro Rails
  2. O PagSeguro vai enviar um email de confirmação, basta ir até sua caixa de email e confirmar 🙂
  3. Agora acesse seu Painel de sandbox (clicando nesse link) e clique em vendedor no menu lateral, guarde seu token para usarmos no projeto para autenticar nossa aplicação no PagSeguro.
    captura-de-tela-de-2017-01-06-15-30-14
  4. Pronto \o/
Parte 2 – Criação da estrutura do Projeto 
    1. Crie o Projeto (Vamos usar o database como PostgreSQL para subirmos nosso APP no heroku)
    2. Inclua as Gems que vamos usar no seu Gemfile:
    3. Instale as Gems rodando:
    4. Configure seu arquivo ‘config/database.yml’ com as credenciais para acessar o seu banco postgreSQL instalado na sua máquina. (Caso você não saiba como instalar o postgreSQL, veja aqui https://www.digitalocean.com/community/tutorials/how-to-setup-ruby-on-rails-with-postgres)
    5. Gere seus scaffolds para poder incluir novos produtos e usuários:
    6. Agora crie o model e o controller order para podermos armazenar as transações do nosso sistema:
    7. Agora vamos até o model Order e vamos colocar a associação com o Produto, em “/app/models/order.rb” acrescente a seguinte linha:
    8. No Model Product vamos colocar a associação com o Model Order, em “/app/models/product.rb” coloque a seguinte linha:
    9. Agora vamos gerar nosso Controller Home onde vai ficar a nossa lista de Produtos que o usuário pode comprar:
    10. No Arquivo “/app/controller/home_controller.rb” substitua o conteúdo por:
    11. Agora para preparamos nossa View Home Index para mostrar a lista de Produtos e o botão de compra substitua o conteúdo do aqui ‘/app/views/home/index.html.erb’ por:
    12. No nosso arquivo ‘config/routes.rb’, substitua a linha ‘get ‘home/index’ por:
    13. E ainda no routes.rb substitua a linha “get ‘order/create’ por:”
    14. Instale o devise, rodando:
    15. Agora para incluir o devise no nosso user, rode:
    16. Crie o banco de dados e rode as migrations:
    17. Agora coloque a seguinte linha no arquivo ‘app/controllers/application_controller.rb’ após a linha ‘class ApplicationController < ActionController::Base’ e antes da linha ‘end’:
    18. Agora inclua o bootstrap no seu projeto, no arquivo ‘app/assets/javascripts/application.js’ substitua o conteúdo por:
    19. Renomeie seu arquivo ‘app/assets/stylesheets/application.css’ para ‘app/assets/stylesheets/application.scss’
    20. Agora substitua o conteúdo deste arquivo por:
    21. Vamos criar nosso Form de pagamento, substitua o conteúdo da sua view ‘app/views/order/new.html.erb’ por:

 

  • Vamos criar nossa listagem de orders (pedidos de compras), substitua o conteúdo da sua view ‘app/views/order/index.html.erb’ por:

 

  • Altere seu arquivo ‘/app/views/layout/application.html.erb’ para incluir o javascript do checkout transparente do PagSeguro, seu arquivo deve ficar assim:

    *Lembrando que caso você queira usar em Production o link para o javascript de production do checkout transparente do Pagseguro é: https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js
  • Agora no seu ‘app/controllers/order_controller.rb’ vamos colocar nosso métodos para criar um novo pagamento e para listar os pagamentos, substitua o conteúdo do seu controller pelo abaixo (Leia os comentários no código para entender o que foi feito):
  • Rode o projeto:
  • Crie um User pelo form do devise para ser o administrador da loja acessando no browser ‘http://localhost:3000/users/sign_up‘:
  • Agora crie um Product acessando no browser ‘http://localhost:3000/products/new‘:

 

 

  • Agora você precisa criar um initializer para configurar seu PagSeguro. Crie um arquivo no seguinte path ‘app/config/initializers/pagseguro.rb’, cole o código abaixo e coloque suas credenciais:
  • Agora rode seu servidor:
  • No browser acesse ‘http://localhost:3000‘ e clique em comprar em algum produto da lista.
  • A estrutura do nosso App está pronta, agora vamos incluir nosso JavaScript.

 

Parte 3 – Inclusão do JavaScript
    1. Crie um arquivo em ‘/app/assets/javascripts/pagseguro.js’ e cole o seguinte código dentro dele (lembre-se de ler os comentários no código para entender as funções):
    2. Agora rode novamente seu projeto:
    3. Acesse no seu browser ‘http://localhost:3000‘ e clique em comprar.
    4. Na página de finalização do pedido que abriu simule colocar um cartão de crédito (use os dados de sandbox, número 411111111111, cvv 123, email c56048717318@sandbox.pagseguro.com.br)
    5. Note que agora o js coloca a bandeira do cartão, mostra o cvv caso o cartão precise e mostra a segunda sessão depois dos dados:

 

Parte 4 – Recebendo Notificações

Sempre que uma transação muda de status no PagSeguro ele chama nossa aplicação através da URL de notificação que colocamos no método create do controller Order. Nesta parte nós vamos configurar um Controller para receber essa chamada e alterar o status do nosso Order baseado nisto.

  1. Vamos primeiro criar o Controller, rode:
  2. Agora coloque o seguinte conteúdo dentro do Controller que foi criado em “/app/controller/notification_controller.rb”:
  3. Agora no nosso arquivo “config/routes.rb” substitua esta rota “get ‘notification/create'” pela rota abaixo:

    Pronto, agora nós precisamos subir nosso APP para o heroku para pegar a URL que usaremos para as notificações, vamos lá \o/
Parte 5 – Subindo para o Heroku

Vamos subir nosso App para o heroku para que tenhamos uma URL válida para receber as notificações do PagSeguro:

  1. Visite no seu browser: https://signup.heroku.com/
  2. Crie uma conta caso você não possua.
    captura-de-tela-de-2016-12-17-19-31-06
  3. Instale o heroku cli caso você não possua e faça o login (Para aprender a instalar acesse https://devcenter.heroku.com/articles/heroku-cli)
  4. Agora precisamos instalar o git no nosso repositório e fazer o commit das nossas mudanças, rode:

    depois rode:

    depois rode:
  5. Para criar nosso projeto no heroku rode:
  6. Note que agora que você criou o APP ele mostrou no console a URL do seu projeto, guarde essa URL para podermos acessar e também para usarmos para receber a notificação:
    captura-de-tela-de-2017-01-06-19-00-00
    * Neste caso nossa URL está em azul (https://secret-wave-53573.herokuapp.com/)
  7. Agora antes de prosseguirmos, vá no seu arquivo “/app/controllers/order_controler.rb” e no método create dentro desta linha ” payment.notification_url = “sua_url_do_heroku/notification” ” coloque a URL  para o seu projeto no heroku + /notification.
  8. Finalmente suba seu app rodando:
  9. Agora rode as migrations do seu projeto:
  10. \o/ Pronto, finalmente nosso pequeno site que aceita pagamentos está no ar
Parte 6 – Testando Tudo Isto

Agora vamos fazer um teste para ver se está tudo funcionando como gostaríamos, como este é apenas um exemplo vamos testar em sandbox, então vamos ter que finalizar o pagamento manualmente pelo sandbox do PagSeguro.

  1. Visite a URL do seu site no heroku que você pegou no passo anterior, acesse a raiz dela. No meu caso https://secret-wave-53573.herokuapp.com/


    *Está vazio porque ainda não criamos nenhum produto
  2. Agora visite no seu browser url_do_seu_projeto_no_heroku/users/sign_up e crie uma conta para seu administrador do sistema (Em uma aplicação real você teria que impedir que outras pessoas criassem contas de administrador, mas estamos só fazendo um exemplo):
  3. Agora você foi redirecionado para a página de criação de produtos, mas caso tenha fechado a Aba visite url_do_seu_projeto_no_heroku/products
  4. Usando esse CRUD, crie novos produtos com valores e nomes diferentes para poder testar depois:
  5. Agora abra uma Aba anônima para usar um usuário que não está logado e visite a raiz do seu site no heroku, no meu caso https://secret-wave-53573.herokuapp.com/.
  6. Veja que a lista de produtos que você criou está lá, agora escolha um e clique em “Comprar Produto”:
  7. Agora na página de pagamento preencha todos os campos, para o numero do cartão você pode usar:
    4111111111111111, para o cvv: 123 e para o CPF: 588.147.884-30.
    captura-de-tela-de-2017-01-06-20-24-02
  8. Pronto, agora finalize a compra \o/
  9. Visite a página que lista as suas orders (pedidos de compra) nessa URL url_do_seu_projeto_no_heroku/order/index
  10. Como nós estamos na sandbox do PagSeguro, o pagamento não será concluído sozinho :(. Mas em um caso real ele seria concluído quando a operadora de cartão liberasse e o PagSeguro chamaria nosso Controller de notificação. Como ele não vai fazer isso, vamos fazer manualmente.
  11. Visite a página de transações do Pagseguro clicando aqui, e note que a transação que você acaba de fazer está lá:
    captura-de-tela-de-2017-01-06-20-38-14
  12. Clique na transação, e quando aparecer o menu clique em “alterar” para alterar manualmente o status da transação.
    captura-de-tela-de-2017-01-06-20-39-44
  13. Altere para “Pago” e dê ok.
  14. Agora vamos visitar novamente nossa página com a listagem dos orders e ver se o status mudou, visite a página: url_do_seu_projeto_no_heroku/order/index

  15. Sucesso \o/, recebemos a notificação, verificamos se ela era verdadeira, verificamos o conteúdo dele e alteramos o status do pagamento. Finalmente conseguimos fazer nosso sistema de pagamento funcionar, parabéns!

 

CONCLUSÃO

Conseguimos criar nosso pequeno APP com sistema de pagamento, como você pode ter notado é um longo caminho mesmo quando simplificamos algumas partes, mas se você está construindo um APP que precisa receber dinheiro não tem jeito, vai ter que desenvolver essa parte no seu APP, espero que com esse tutorial se torne mais fácil.

Com algumas configurações a mais poderíamos também receber via Boleto que é uma das modalidades do PagSeguro. Caso você queira um Post futuro onde acrescentamos isso deixa um comentário abaixo 🙂

Nesse exemplo nós usamos a sandbox do PagSeguro que é a simulação da integração com o sistema real e simplificamos várias partes para acelerar o processo, quando você desenvolver seu projeto para production usando um meio de pagamento, inclua filtros nos inputs, verificações e meios para que sua aplicação seja segura.

Para saber mais acesse a documentação oficial do PagSeguro clicando aqui.

Como de costume o Código completo da aplicação está no Github, caso você queria clonar o código, clique aqui. Aproveita e me segue lá \o/

Se você ficou com dúvidas ou tem sugestões de posts para o Blog comenta aí em baixo ou me adiciona no Facebook clicando aqui.

Muito Obrigado,
Sua presença aqui é uma honra para mim,
Leonardo Scorza 🙂

outubro 5, 2017

0 responses on "Checkout transparente com PagSeguro no seu APP Rails"

Deixe uma resposta

Feito com s2 por OneBitCode
%d blogueiros gostam disto: