{"componentChunkName":"component---src-templates-blog-post-js","path":"/en/writing/integrando-com-pagseguro-pt-1/","result":{"data":{"site":{"siteMetadata":{"title":"Um site de um desenvolvedor de software","author":"Dheyson L. Alves","description":"Um site sobre computação e desenvolvimento","charSet":"utf8"}},"locales":{"edges":[{"node":{"ns":"translation","data":"{\"Home\":\"Home\",\"Escrita\":\"Writing\",\"Portfólio\":\"Portfolio\",\"Sobre\":\"About\",\"Últimas publicações\":\"Latest Posts\",\"Engenheiro de Software com mais de 3 anos de experiência na indústria. Ajudando empresas de diferentes nichos a atingir seu potencial com aplicativos de software.\":\"Software Engineer with more than 3 years of experience in the industry. Helping companies from different niches to reach their potential with software applications.\",\"Codando. Escrevendo. Aprendendo. Ensinando.\":\"Coding. Writing. Learning. Teaching.\",\"CSS, JAVASCRIPT, TYPESCRIPT, REACT E FRONT-END NO GERAL.\":\"CSS, JAVASCRIPT, TYPESCRIPT, REACT AND FRONT-END WORLD.\",\"Front-End Engineer\":\"Front-End Engineer\",\"Opa, e ai?\":\"Hey, what's up\",\"Página principal\":\"Main page\",\"Alguns artigos que escrevi\":\"Some articles I wrote\",\"Meus atuais projetos\":\"My current projects\",\"Que tal acender a luz?\":\"How about turning on the light?\",\"Que tal apagar a luz?\":\"How about turning off the light?\",\"Logo do Linkedin rede social\":\"Linkedin logo social network\",\"Minha rede profissional\":\"My professional network\",\"Logo do passado com cor branca do twitter\":\"Logo of the past with twitter color white\",\"Quer trocar uma ideia?, manda dm\":\"Want to exchange an idea?, send a dm\",\"social media\":\"Social Media\",\"Boa parte dos meus projetos\":\"Most of my projects\",\"Logo quadrada com fundo preto com texto DEV no meio de cor branca\":\"Square logo with black background with DEV text in the middle of white color\",\"Meus outros artigos em inglês\":\"My other articles in English\",\"Logo quadrada com fundo preto com símbolo de controle no meio\":\"Square logo with black background with control symbol in the middle\",\"Comunidade do discord da Coffer\":\"Coffer's discord community\",\"Todas as publicações\":\"All publications\",\"Postado em\":\"Posted in\",\"Uma página de erro que poderia encontrar a solicitação.\":\"An error page that could find the request.\",\"Ah não! Algo está errado...\":\"Oh no! Something is wrong...\",\"Você clicou em uma rota que não existe ... que pena.\":\"You clicked on a route that doesn't exist... what a pity.\",\"Dheyson L. Alves - Sobre\":\"Dheyson L. Alves - About\",\"Olá, sou Dheyson L. Alves\":\"Hi, I am Dheyson L. Alves\",\"Engenheiro de Software com 3 anos de experiência na indústria. Ajudando empresas de diferentes origens aatingir seu potencial com aplicativos de software.\":\"Software Engineer with 3 years of experience in the industry. Helping companies from different backgrounds reach their potential with software applications.\",\"Além disso, criei com estudantes universitários uma comunidade de desenvolvedores chamada CofferHub. Foco em ensinar e aprender juntos. Fico entusiasmado com as oportunidades em que posso trabalhar com produtos que impactam muitas pessoas. Além disso, trabalhar com uma equipe com uma mentalidade de crescimento e aprendizado.\":\"In addition, I created with college students a developer community called CofferHub. Focus on teaching and learning together. I am excited about the opportunities where I can work with products that impact many people. Also, working with a team with a growth and learning mindset.\",\"minutos de leitura\":\"reading time\",\"Escrito por\":\"Written by\",\"Pesquise por tags\":\"Search by tags\",\"artigo\":\"article\",\"artigos\":\"articles\",\"Artigo não encontrado\":\"Article not found\",\"Parece que você chegou a uma pesquisa que não existe. Por favor, use a navegação acima ou pesquise acima para encontrar o caminho de volta ao nosso site daora.\":\"It looks like you've come to a search that doesn't exist. Please use the navigation above or search above to find your way back to our cool website.\",\"Mais Artigos\":\"More Articles\"}","language":"en"}}]},"markdownRemark":{"id":"4885922b-c4c7-5cd0-863d-114040ec2f88","excerpt":"Logo do Pagseguro Introdução Eu havia comentado em algum artigo anterior, que este ano, seria de muitos desafios. Daqueles que realmente te tiram da zona de…","html":"<p><img src=\"https://camo.githubusercontent.com/ddd2e32162186b7ba2b9d159d4602edb1529226aea27f5dcc9026177d6e40e45/68747470733a2f2f6269746275636b65742e6f72672f7265706f2f346e614c4b7a2f696d616765732f313035313234323635312d7073352e706e67\" alt=\"Logo do Pagseguro\"></p>\n<h2>Introdução</h2>\n<p>Eu havia comentado em algum artigo anterior, que este ano, seria de muitos desafios. Daqueles que realmente te tiram da zona de conforto. Meu primeiro grande projeto na empresa, era integrar um sistema com o PagSeguro, um gateway de pagamento bastante utilizado no Brasil.</p>\n<p>A plataforma era para um Ambiente de Coworking, e será possível realizar comprar de eventos, assinaturas de planos, entre outros serviços. No início fiquei intimidado pela tempo do deadline, mas busquei fazer o melhor, e logo recalibrei o foco.</p>\n<p>Para o artigo não ficar muito grande, dividirei o mesmo em três partes. Sendo está a primeira parte.</p>\n<h2>O planejamento</h2>\n<p>Como deve ser, busquei junto com meu coordenador planejar as atividades. Analisei o escopo, o protótipo e a API do PagSeguro para dar inicio ao planejamento. Com o suporte do coordenador, planejei a arquitetura do fluxo de pagamento, baseado também na estrutura idealizada no projeto.</p>\n<p>O módulo que estava implementando, era o de compra de um Evento, que envolvia a compra pelas três formas de pagamento, Cartão de Crédito, débito online e boleto. Mas vou me atentar nessa sessão sobre o planejamento, depois volto para os detalhes de implementação do PagSeguro.</p>\n<p>Para planejar o módulo de pagamento, criei um diagrama de atividades, ou mais conhecido como UML. É um modelo para prototipação de atividades, seguindo a lógica do fluxo de uma funcionalidade ou mais de uma. Segue abaixo o diagrama criado:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/11cfa971e8e78d5af013845858058f38/948e7/uml-basic.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 141.2162162162162%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAIAAADuuAg3AAAACXBIWXMAAAsSAAALEgHS3X78AAACfElEQVQ4y5WVbZOjIBCE9///w1TdVq2XRKNRogIiinoP+BLdZO/q5kNKgaZnenrMx7TGOI7Tf8YHmK7r+r53znXWdvNL3yulhBCFEHVdd+9iAbdtWz0ecRQN42jbVtZ1WbHwUHWtpGya5hXJ4hPcKNUqNYaXuqp+f32Johidm4ZhelcOqS1ga20FVVn2bTs5V0uZJYmE05jr9dpqzdmBW3axpM0q5fZUCjIEGJFluizJJU9TTwKSLF7BMBtOF8U9TbVS03w0iD+z8ctunmVU50sIiwfBkLQUglv8tZCEkuYA/PC6Fz5/kNZ68FyzT5sneMJlCFDc77c4tuHQEs6NYRdCVVUm6L8wA0awoigaKafQcfbcWiQHEI/OdcZIIX59fnoVg0ALM4K1xsCmta7qesl/k8faJgQYtmY+fhdma4zv8zSVuCWOkeBp21A3aeO+JI6hhYO8FjBXprfbOYpkWfrTR2PAxnWX85n+byNw6PNAnSFV0qqEwJWbK3jwFmwat2v1E8wqvYiTBJ8YKa+XS5qm+6NLR3bDt2MOIwUnqjJGLem9zOe3hWereNJSlnmOzqSA4t/GgJzzPOf3fr/PTXqCUY/VKIr6sDQFz+zBiJ8kCeAsy+b8V/DqsKclX8CvcVCbghljpOMm794jeBNsq/xgT6W1eDyonIJnG78Fvwi2bjhrscEtTaltPr1v9Q/goHZdliWDofWAda3FhKfTiWHYBvtvYDqEQ3WwNGX1fEaNGdYK/5U254Kl/IQ1DeQ8MZmQey20du8/Q9utXTdQdlV52QGzbwxDjj1U+LC+T3sesTlaa5dXcl0BnHHHmL8zH+Ej82OEP4/+7RbAP4MLaFO/h/s7AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Imagem de um diagrama de atividades para o pagseguro\"\n        title=\"Imagem de um diagrama de atividades para o pagseguro\"\n        src=\"/static/11cfa971e8e78d5af013845858058f38/fcda8/uml-basic.png\"\n        srcset=\"/static/11cfa971e8e78d5af013845858058f38/12f09/uml-basic.png 148w,\n/static/11cfa971e8e78d5af013845858058f38/e4a3f/uml-basic.png 295w,\n/static/11cfa971e8e78d5af013845858058f38/fcda8/uml-basic.png 590w,\n/static/11cfa971e8e78d5af013845858058f38/efc66/uml-basic.png 885w,\n/static/11cfa971e8e78d5af013845858058f38/c83ae/uml-basic.png 1180w,\n/static/11cfa971e8e78d5af013845858058f38/948e7/uml-basic.png 2339w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>Diagrama de Atividades - UML</p>\n<p>Vou seguir explicando o fluxo pensado inicialmente, e depois as pequenas alterações que tive junto com meu coordenador. Apenas como pequena revisão da nomenclatura:</p>\n<ol>\n<li>Os losangos são os condicionais;</li>\n<li>Os retângulos são as ações do usuário ou sistema;</li>\n<li>Os retângulos com ponta dobrada na borda são anotações.</li>\n<li>O círculo preenchido é o início do processo;</li>\n<li>O personagem é a persona ou usuário do sistema que inicia o fluxo;</li>\n<li>O círculo com border branca indica o fim do processo;</li>\n<li>As setas são a direção das ações;</li>\n</ol>\n<p>Pronto, feito um pequeno resumo, agora podemos prosseguir com a explicação.</p>\n<p>Nesse fluxo, possuímos três formas de pagamento, como comentado anteriormente, mas existe um pequeno detalhe a respeito do boleto. Eu tinha dois cenários, um pagamento processado pelo PagSeguro e outro poderia ser colocado pelo cliente no gerenciador da plataforma. Por isso a divisão do fluxo acima.</p>\n<p>Vou iniciar pelo fluxo de cartão de crédito, o usuário deve digitar os campos de cartão de crédito, caso os dados estejam validados ele segue o fluxo, caso contrário ele retorna aos campos.</p>\n<p>Após validado, realizamos uma chamada a API do PagSeguro pegando todos os dados necessários para realizar a transação. Validamos e caso ocorra algum erro na conexão com a API, retornamos um feedback de erro.</p>\n<p>Após a validação da transação, salvamos os dados no banco e depois realizamos um disparo ao servidor de e-mail, informando do pedido realizado e do status da transação. No final do processo, ficamos escutando através de um webhook, a atualização de status de uma transação.</p>\n<p>Mostrei para meu coordenador o fluxo, e ele me auxiliou, realizando umas pequenas modificações no fluxo, segue as anotações:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/da67384377e34af81d150768264488c8/948e7/uml-edited.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 141.2162162162162%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAIAAADuuAg3AAAACXBIWXMAAAsSAAALEgHS3X78AAADIklEQVQ4y5VU2XLjOAzM///hpHZqR+NIlqOTN0iC5DYpOXYmmYdlqVySiaPRQOOl3E/OufzP8wKfEEKMkZmD9+H+obVet21ZVyll+O6czkQktm3oupSzJ1JS4nNbFi0EQlhrv3riz4ez1ZqUysCujZyXy+vrOo6ZuaRUvisH4E5n770QYhN79L4QyV1MXSe3zVo3/PpFUsI2I8rTOWGnlCOHGHzUGnkAw+5i7QezLH4X8+UCCmp+MFKiTS5klqydd2dmZ7Z1mafLm5nnonQREvmzDwlASuEQ1mlepmk1m2VLTIadPwlLkZyRUu3bRs265gEf5DOIIM1Kb+u6LgsZU6+aTThqTkwxhtI6VrvtPZKM40hC5P6aiGo45uMWpRohnHX3mhkQKmHLslilKo8IFgJ4KC08uFZKoXfBObWu//z82fc9taBnZjiQc6DdGCOkdM594tZ72w58cAWUsMfvS65Uk3eoTsMOlQ/DgKl6jG1jAbCB8Hq9Dv2AHBjH5pyTNeI23i5dp/a9Wn8eDGQbhr6/XHYpKHnLjhL54BvsisGB8tCgApZYV61Uuk8FXg60OhiXyCZCn+l0Tok5ohfDdYwwUqp/e7vdbgD2kRw2VSxoeQomWcp01nxeMJMD2Qoy8uAcxdQnceaY+atgH6qq3VNqn2fwDAhgHBcYI8VGs0XHlFHX6aqtmabpaNLDGexN7++/u+7QSpVBTiIqHY1hK5Me9/d/37rN7L+vF4785NxgV3rR7ZIAEp1DbT4HGTW4bYBzgDoRsqQ/VJViLdhJIUAdNJw8gUR4JHw0KUaOhnysPOQ/a0ZmbQyWzrrflJpjcLkA24NtRPAYwvSVsAM2bLESlBxvo7UmMUbWIv9zqzyXD/+qpQ+25b7vy+KMSRhdHzCDP368QgxHk47M2hdFGf6bK+8icLo7o0O3cTRtpLHJsI8wcOleYR1hii4Wzxm/mrIwQbr8xHYbqSpIa9E9vGGHIDm4gNQ+Bi63B2JK+almkIC9A84r7XAGHucg8nmesYD/OmGHxI6DTXR+gqUH7Myfj2/L6KUtmb+etlfit1dw/A+LMWI/u4otXAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Imagem de um diagrama de atividades para o pagseguro com anotacoes\"\n        title=\"Imagem de um diagrama de atividades para o pagseguro com anotacoes\"\n        src=\"/static/da67384377e34af81d150768264488c8/fcda8/uml-edited.png\"\n        srcset=\"/static/da67384377e34af81d150768264488c8/12f09/uml-edited.png 148w,\n/static/da67384377e34af81d150768264488c8/e4a3f/uml-edited.png 295w,\n/static/da67384377e34af81d150768264488c8/fcda8/uml-edited.png 590w,\n/static/da67384377e34af81d150768264488c8/efc66/uml-edited.png 885w,\n/static/da67384377e34af81d150768264488c8/c83ae/uml-edited.png 1180w,\n/static/da67384377e34af81d150768264488c8/948e7/uml-edited.png 2339w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>Alterações no fluxo</p>\n<p>No fluxo dos três pagamentos, temos a validação da sessão do pagseguro, essa foi uma das primeiras modificações. Mantendo o resto de fluxo de feedback e validações. No fluxo de boleto bancário, validamos caso exista um input de e-mail enviado do cliente, caso exista é disparado um e-mail, caso não, seguimos o fluxo salvando os dados no banco e enviando os e-mails com status da transação do PagSeguro.</p>\n<p>Todo esse fluxo aborta o modelo de pagamento, onde contenta as três formas de pagamento, o armazenando no banco de dados e o disparo de e-mail.</p>\n<h2>As Modificações</h2>\n<p>No fluxo de compra de um evento, o usuário poderá se cadastrar no sistema, caso não seja registrado. O formulário comportava alguns campos padrões de usuário, mas faltava informações de endereço. No PagSeguro, para a forma de pagamento com Cartão de Crédito, ter o endereço do pagador, são obrigatórios, onde tive que ter uma conversa com a equipe de Design e requisitos para a pequena modificação.</p>\n<p>Os requisitos comportavam também, Cartão de Débito, no entanto, no PagSeguro pelo Checkout Transparente, ele permite apenas Débito Online. A transação é realizada pelo banco selecionado, que é disponibilizado pelo PagSeguro também.</p>\n<p>A última modificação, era a seleção de parcelas, que na seção de cartão de crédito, não comportava a seleção, embora no fluxo, evento deve ser comprado apenas uma vez, era necessário, informado pelo PagSeguro.</p>\n<p>Algumas pequenas modificações, que apenas observei durante o desenvolvimento, mas que pude alinhar bem junto com as outras equipes para comportar os dados que iria precisar na integração.</p>\n<hr>\n<p>Por aqui fizalizamos a primeira parte do artigo.</p>","timeToRead":3,"frontmatter":{"title":"Integrando com gateway de pagamento - PagSeguro | Parte 1","date":"February 07, 2021","description":"Eu havia comentado em algum artigo anterior, que este ano, seria de muitos desafios. Daqueles que realmente te tiram da zona de conforto. Meu primeiro grande projeto na empresa, era integrar um sistema com o PagSeguro, um gateway de pagamento bastante utilizado no Brasil.","tags":["JAVASCRIPT","GERAL","PHP"]}}},"pageContext":{"slug":"/integrando-com-pagseguro-pt-1/","previous":{"fields":{"slug":"/como-implementar-gitflow/"},"frontmatter":{"title":"Como implementar o GitFlow?","tags":["GIT"]}},"next":{"fields":{"slug":"/globbing-no-shell/"},"frontmatter":{"title":"GLOBBINS NO SHELL (Caracteres-Curinga)","tags":["SHELL"]}},"language":"en","i18n":{"language":"en","languages":["pt","en"],"defaultLanguage":"pt","generateDefaultLanguagePage":false,"routed":true,"originalPath":"/writing/integrando-com-pagseguro-pt-1/","path":"en/writing/integrando-com-pagseguro-pt-1/"}}},"staticQueryHashes":["63159454"]}