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

Plataforma da VTEX agora disponível em búlgaro

Seguindo nossa meta de escrever o futuro do comércio ao redor do mundo, agora a plataforma VTEX está…

Larissa Dias
Larissa Dias
Produto

Expanda seu negócio com o painel de Performance de vendas da VTEX

Ter insights baseados em dados nunca foi tão importante e, na VTEX, temos trabalhado constantemente em meios de…

Andreea Pop
Andreea Pop
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
Veja Mais
Registro feito com sucesso