Configurar o device fingerprint para a Stelo

Pagamentos

Breno Barreto

Breno Barreto

Última atualização

As configurações documentadas neste artigo são realizadas em um ambiente externo à VTEX. Portanto, podem estar desatualizadas.

Para inserir os scripts que a Stelo exige para o device fingerprint, é necessário usar o Google Tag Manager. Para isso, faça login na sua conta em http://www.google.com/tagmanager. Depois, siga os passos abaixo:

  1. No menu inicial do Google Tag Manager, clique em Nova tag;
  2. Selecione Configuração da tag e escolha o tipo HTML personalizado.;

Então insira o script abaixo:

<iframe id="iframeCyber" src="https://carteirac1.hml.stelo.com.br/transaction/transfer?idUnico={{deviceId}}" width="0" marginwidth="0" height="0" marginheight="0" frameborder="0"> </iframe> <script> $(document).ready(function(){ var src = document.getElementById("iframeCyber").src; regex = /=(.*)$/; var match = regex.exec(src); window.vtex.deviceFingerprint = match[1]; }); </script>

Depois, siga os passos abaixo:

  1. Clique em Acionamento, Novo acionador (símbolo de + no canto superior direito) e em Configuração do acionador.;
  2. Escolha o tipo Evento personalizado e insira o nome payment;
  3. Selecione a flag Alguns eventos personalizados;
  4. Nas duas primeiras caixas abaixo, selecione: Event e é igual a. Na terceira, escreva payment.
  5. Salve o acionador e a tag;
  6. No menu lateral, clique na opção Variáveis e depois em Nova;
  7. Clique em Configuração da variável e escolha o tipo JavaScript personalizado;

Por fim, insira o script abaixo:

function guid() { function s4() { return Math.floor((1 + Math.random()) * 0x10000) .toString(16) .substring(1); } return s4() + s4() + s4(); }

Finalmente, salve a variável e clique em Publicar para que as alterações tenham efeito.