Produto

Como foi participar da implementação do Pix na VTEX

Ígor Brasileiro
Ígor Brasileiro July 7, 2021
Como foi participar da implementação do Pix na VTEX

Conheça o relato do engenheiro Ígor Brasileiro, que ajudou a implementar o Pix na VTEX, e quais foram as decisões de negócio que nortearam o desenvolvimento.

O Pix, nova forma de realizar pagamentos virtualmente no Brasil, foi criado pelo Branco Central (Bacen) em novembro de 2020, bem próximo da Black Friday – o que trazia o desafio extra de manter a plataforma intacta com a expectativa de um volume maior de vendas.

Apesar de ter sido anunciado alguns meses antes, tivemos apenas 30 dias para implementar o Pix na VTEX, pois o BACEN só fechou algumas definições críticas em outubro. Felizmente, estávamos preparados, mas tivemos que tomar algumas decisões de negócio importantes no caminho – e esperar que o Bacen decidisse mais alguns aspectos do Pix para concluir o desenvolvimento, o que exigiu tocarmos várias frentes em paralelo.

Plataforma robusta e flexível

A maturidade tecnológica que existe na VTEX foi o fator que mais contribuiu para implementarmos o Pix tão rapidamente. Para fazer essa entrega com agilidade e segurança, a equipe de engenharia contou com:

  • Plataforma do VTEX IO: uma ferramenta de desenvolvimento baseado em Apps que permite, entre outras coisas, organizar os projetos em partes que são desenvolvidas e mantidas por diferentes equipes, mas que funcionam em conjunto.
  • Protocolo de Provedor de Pagamento (PPP): protocolo criado pela VTEX que permite integração com provedores de pagamento de forma simples e escalável.
  • Fluxo de App de pagamento: Fluxo de pagamento no qual o UI de checkout exibe uma app para que o comprador final realize a etapa de pagamento.

Tínhamos a preocupação de implementar o Pix de forma eficiente, tanto para os consumidores que o utilizariam como meio de pagamento, quanto para a plataforma da VTEX, mantendo a integridade do sistema.

Assim, decidimos usar a plataforma do VTEX IO porque, além de ser robusta e resiliente, dispõe de abstrações de código de funcionalidades da VTEX. E também não precisamos nos preocupar com infraestrutura. Como o checkout ia buscar esse script do Pix, bastava criar um proxy muito simples, diminuindo a quantidade de dados que chegava na interface do consumidor final e evitando trafegar dados desnecessários, não consumindo muito da internet do usuário final.

Desenvolvimento com autonomia

Este projeto envolvia mexer no módulo de pagamentos e do checkout, e nós do time de pagamentos tínhamos liberdade para realizar as mudanças de código, com o auxílio, testes e validação pelo time do checkout. Esse modelo de trabalho, com grande autonomia das equipes de desenvolvimento, também conferiu agilidade ao projeto.

Enquanto, aguardávamos o Bacen liberar algumas definições com relação ao mobile (se iria existir ou não código copia e cola no fluxo de pagamento mobile, por exemplo), começamos a criar as telas e componentes React que provavelmente não teriam mudanças muito grandes. Eram componentes para dispositivos desktop, como a imagem do QR Code, o temporizador, as iterações com as APIs do checkout e a estratégia de polling que é responsável por identificar se o pagamento foi realizado na plataforma da VTEX.

O desenvolvimento era feito num ambiente de sandbox do time de pagamento.

O desafio do QR Code

Chegou um momento em que precisamos decidir como trafegar a imagem do QR Code de forma segura e escalável. Estávamos entre duas opções: via link de imagem ou base64 (um padrão para codificar dados em formato de texto).

Usar o link de imagem implicaria lidar com questões de segurança no navegador relacionadas a Cross-origin resource sharing (CORS), como conhecer e registrar os domínios de todos os parceiros para garantir que as imagens baixadas seriam confiáveis. Decidimos então trafegar a imagem do QR Code via base64.

Em paralelo, o time de documentações lançou a documentação técnica explicando o que os provedores de pagamento precisavam enviar para a VTEX e como se integravam para estabelecer a comunicação e que o fluxo de pagamento pudesse ser finalizado.

Decidimos também utilizar um proxy para remover os dados que a API do gateway retornava para UI, a fim de reduzir a quantidade de dados desnecessários passados para o usuário no polling e aumentar a segurança e eficiência.

Como contornar a falta de sincronia dos relógios

Houve discussões em como poderíamos mitigar a falta de sincronia de relógios entre o gateway de pagamento e a UI para o consumidor final. Decidimos ter um tempo maior de pagamento no gateway, de forma que a UI sempre teria menos tempo do que o valor configurado no gateway. O objetivo era fazer com que o usuário final tivesse uma experiência melhor, fluida.

Configuramos um tempo de cinco minutos, inicialmente. Expirado esse tempo, se a pessoa ainda estivesse interessada no produto, precisaria finalizar a compra novamente. A tela de pagamento não realizado que tínhamos pedia que o consumidor preenchesse novamente alguns dados. Só que no Pix, isso não é necessário. Adaptamos a tela existente para não exibir a mensagem de “Houve erro…, por favor preencha os dados novamente” quando o pagamento fosse do PIX.

Após uma semana de funcionamento do Pix, recebemos feedback dos varejistas avisando que o tempo de cinco minutos era muito curto. Com isso, alteramos rapidamente a configuração do meio de pagamento, passando de 5 para 15 minutos de espera.

O que a implementação do PIX trouxe para a VTEX e para mim

Apesar de curta e relativamente simples, por conta da flexibilidade e robustez da nossa plataforma, a implementação do Pix na VTEX deixou um legado importante.

Por conta da demanda do Pix, criamos uma nova funcionalidade na VTEX, a fim de configurar o tempo de processamento do pagamento. Assim, é o lojista quem decide quantos minutos quer esperar até a transação expirar, caso o usuário final não realize o pagamento.

Também percebemos que muitas lojas utilizavam uma versão antiga do checkout. Então, trouxemos a funcionalidade do fluxo de pagamento, já com o Pix, para essa versão.

No âmbito pessoal, foi um projeto interessantíssimo de trabalhar. Com ele, aperfeiçoei meus conhecimentos sobre fluxo de pagamento, sobre o builder de node e a infraestrutura do VTEX IO, além de alguns conhecimentos sobre cache e CDN.

Agora já estou em outra equipe, mas o projeto do Pix com certeza marcou minha trajetória na VTEX.

Se você gostou dessa história e deseja fazer parte do próximo capítulo dela, venha fazer parte da equipe de desenvolvimento da VTEX. Acesse careers.vtex.com.

Continue lendo: artigos relacionados
Produto

DTC Launchpad: uma maneira fácil das empresas de CPG lançarem um negócio direct-to-consumer

O modelo de negócios de bens de consumo embalados (CPG) se manteve estável por décadas; os compradores consumiam…

Robert Poratti
Robert Poratti
Institucional

A VTEX, agora, é parceira oficialmente certificada pelo Mercado Livre.

Quem acompanha as novidades da VTEX já deve ter ouvido falar que, agora, a nossa integração nativa é…

Luciano Santos
Luciano Santos
Produto

Explorando o VTEX Tracking – ferramenta para logística de entrega dos clientes VTEX

Não é nenhuma novidade que hoje vive-se na era da experiência. As empresas investem cada vez mais para…

Luiz Samico
Luiz Samico
Produto

VTEX Marketplace Network: conectando sellers e marketplaces de todo o mundo em um único ecossistema

O Marketplace Network é uma funcionalidade da plataforma da VTEX que ajuda a conectar marketplaces e sellers que…

Sorana Gheorghiade
Sorana Gheorghiade
Produto

Multilevel Omnichannel Inventory: criando uma estrutura multicanal eficaz

Diante de um consumidor digital cada vez mais ávido por rapidez, conveniência e por uma experiência sem atrito,…

Rafaela Rezende
Rafaela Rezende
Produto

UX para Ecommerce: Design focado em Vendas Conscientes

O texto a seguir foi adaptado da palestra que apresentei no evento Tech Women Summit dia 15 de…

Bianca Galvão
Bianca Galvão
Produto

Startup vs. unicórnio: como é trabalhar com produto em duas realidades diferentes

Estar à frente de uma pequena startup ou liderar um time em uma grande unicórnio? Gustavo, conta quais…

Gustavo Vedotti
Gustavo Vedotti
Produto

VTEX IO: descomplicando o desenvolvimento web

Entenda como o IO facilita o desenvolvimento, assegurando compatibilidade, uniformidade na documentação e simplificando integrações. Com a popularização…

Eric Breno
Eric Breno
Produto

VTEX Community: Promovendo a colaboração no ecossistema do comércio digital

Inspirados pela nossa declaração de futuro, na qual nos comprometemos a compartilhar conhecimentos valiosos que moldem o mercado,…

Cassiane Vilvert
Cassiane Vilvert
Veja Mais
Registro feito com sucesso