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.Tela1;

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.Tela2;
  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.Tela3
  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;Tela4

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.


Este artigo foi útil?