Mudar para a nova versão do Smart Checkout

Checkout

Breno Calazans

Breno Calazans

Última atualização

O Smart Checkout foi atualizado. Agora, os formulários de cartão de crédito, débito e private label passam a estar inseridos em um iframe, o que aumenta a segurança. Além disso, você não precisa mais recorrer ao Google Tag Manager para usar customizações de JavaScript.

A mudança para o novo ambiente é manual. Saiba como fazê-la no fim deste artigo.

O que mudou

Iframe nas formas de pagamento com cartão

As formas de pagamento por cartão de crédito, débito e private label (cartão emitido pelo varejista e aceito apenas dentro da sua rede de estabelecimentos) agora ficam isoladas em um iframe, o que impossibilita a customização de JavaScript, ampliando a segurança da sua loja.

Além disso, o seu HTML mudou. Isto significa que caso a sua loja tenha customizado esses tipos de pagamento com CSS, este deve ser revisado.

Note que, apesar de estar em um iframe, ainda é possível aplicar CSS normalmente no campo, mas é importante se atentar ao seletor CSS utilizado pois, se tratando de um iframe, este deve começar com elementos que estejam dentro de #app-container .App sem, por exemplo, #payment-data ou .payment-group (que estão fora do iframe).

Em exemplo prático, para ocultar a opção “Pagar usando dois cartões”, deve ser usado apenas .ChangeNumberOfPayments {display: none}.

Nova opção de cálculo de frete por geocoordenada

Por meio desta funcionalidade, é possível definir regiões de entrega usando como base um ponto geográfico (latitude e longitude) em vez de um código postal.

Para saber em detalhes como usar essa funcionalidade, leia o artigo Geolocalização no Checkout.

Atenção: Uma vez que a API Key seja informada nas configurações do Checkout, a geolocalização já estará visível no checkout da sua loja, independente da ativação da nova versão do SmartCheckout.

Título da página

Agora você pode alterar o título da página do Smart Checkout, que aparece na barra ou na aba do browser. Para isso, no módulo Portal, entre nas configurações do website desejado e depois na aba Checkout. Em Configurações, altere o campo Título da Página. Uma caixa de pré-visualização, à direita do campo, mostra como ficará o novo título.

Ativando a nova versão do Smart Checkout

JavaScript customizado

Agora é possível usar os arquivos checkout5-custom.js e orderplaced2-custom.js para inserir suas customizações de JavaScript no Checkout e na tela de pedido finalizado, respectivamente.

Para isso, no módulo Portal, entre nas configurações do website desejado e depois na aba Código. O arquivo estará na lista à direita. Basta clicar nele para ver o código atual e fazer quaisquer alterações.

Customizar arquivos de Javascript pode danificar seu Checkout. A VTEX não recomenda customizações e não se responsabiliza por qualquer dano causado por esse código.

Atenção: não use esses arquivos para inserir tags de marketing e integrações. Se precisar delas, faça isso pelo Google Tag Manager.

PayPal Plus

A nova versão do Smart Checkout dá suporte ao método de pagamento PayPal Plus, que permite que o pagamento seja feito diretamente em seu site, sem redirecionar seus clientes, ou seja, permite o checkout transparente.

Google Enhanced Ecommerce

Agora o Smart Checkout adiciona ao data layer informações para serem usadas com o Google Enhanced Ecommerce. Para saber como criar essas tags, verifique a documentação do Google: https://developers.google.com/tag-manager/enhanced-ecommerce.

Como atualizar para a nova versão do Smart Checkout

Você pode migrar para a nova versão do Smart Checkout acessando o módulo Portal, clicando nas configurações do site desejado e depois na aba Checkout. Você verá a tela Atualização do Smart Checkout:

Ativando a nova versão do Checkout em beta

Antes de colocar a nova versão em produção, você pode testá-la em ambiente beta. Para isso, basta clicar no botão Ambiente de Testes e depois em Salvar. Fique tranquilo: isso não afetará em nada a sua loja em produção.

Arquivos criados: “checkout5-custom.css”, “checkout5-custom.js” e “orderplaced2-custom.js”

Após clicar em Salvar, clique na aba Código. Você pode verificar que são criados três arquivos: checkout5-custom.css, checkout5-custom.js e orderplaced2-custom.js. Por comodidade, o primeiro (arquivo CSS) é criado com conteúdo exatamente igual ao do arquivo checkout-custom.css (o CSS do Checkout antigo).

Isso significa que você pode alterar o checkout5-custom.css com tranquilidade. Ele apenas será usado na versão nova do Smart Checkout.

Já os arquivos checkout5-custom.js e orderplaced2-custom.js nascem vazios. A VTEX recomenda que você os deixe assim, uma vez que a inserção de código JavaScript no Checkout é causa muito comum de erros.

Verificando no ambiente beta

O ambiente beta é um ambiente de desenvolvimento de novas features da VTEX. Por isso, não garantimos sua estabilidade.

Agora, devemos verificar no ambiente beta se o layout de seu Checkout está correto.

O layout do formulário de cartão de crédito está correto nessa loja

Caso o layout do formulário de cartão de crédito esteja ruim, faça as devidas correções de CSS no arquivo checkout5-custom.css.

Caso tenha adicionado scripts por meio do Google Tag Manager para alterar o comportamento da etapa de pagamento, é provável que esses scripts parem de funcionar.

Alterando a versão de produção

Ativando a nova versão do Checkout em produção

Agora que está tudo certo, vamos ativar a nova versão em produção. Volte para o Portal, clique em Ambiente de Produção e depois em Salvar. Pronto! Sua loja está migrada para a nova versão do Checkout com todas as novas features disponíveis.

Quem deve se atentar a essas mudanças

Se sua loja não tem as formas de pagamento por cartão de crédito, débito ou private label, ou se você não alterou a aparência do formulário de cartão de crédito, não precisará fazer nada além de clicar no botão de atualização do Smart Checkout.