Configurar o device fingerprint para a Stelo

Configurações de Pagamentos

Device Fingerprint é um identificador que atua no processamento de um pagamento, tendo como objetivo melhorar a análise do risco de fraude em cada transação.

Por meio da coleta de dados não sensíveis, o Device Fingerprint identifica e analisa o nível de segurança do dispositivo utilizado para realizar a transação, bem como as transações que anteriormente foram realizadas com este mesmo dispositivo.

Cada loja deve ter somente um Device Fingerprint cadastrado. Verifique se você já efetuou o cadastro do Device Fingerprint em outro conector, antes de continuar os passos abaixo.

Neste artigo, explicaremos como associar o recurso Device Fingerprint à afiliação Stelo.

As instruções dessa etapa do artigo são realizadas em um ambiente externo. Desse modo, 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:

No menu inicial do Google Tag Manager, clique em Nova tag
Selecione Configuração da tag e escolha o tipo HTML personalizado.
${"base64":" ","img":{"width":1920,"height":974,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","orientation":1,"length":390275,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Payments/Payment%20Settings/como-configurar-o-device-fingerprint-para-a-stelo_1.jpg"}}$

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:

Clique em Acionamento, Novo acionador (símbolo de + no canto superior direito) e em Configuração do acionador.
${"base64":" ","img":{"width":1920,"height":975,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","orientation":1,"length":364047,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Payments/Payment%20Settings/como-configurar-o-device-fingerprint-para-a-stelo_2.jpg"}}$
Escolha o tipo Evento personalizado e insira o nome payment;
Selecione a flag Alguns eventos personalizados;
Nas duas primeiras caixas abaixo, selecione: Event e é igual a. Na terceira, escreva payment.
${"base64":" ","img":{"width":1920,"height":976,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","orientation":1,"length":304381,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Payments/Payment%20Settings/como-configurar-o-device-fingerprint-para-a-stelo_3.jpg"}}$
Salve o acionador e a tag;
No menu lateral, clique na opção Variáveis e depois em Nova;
Clique em Configuração da variável e escolha o tipo JavaScript personalizado;
${"base64":" ","img":{"width":1920,"height":976,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","orientation":1,"length":445581,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Payments/Payment%20Settings/como-configurar-o-device-fingerprint-para-a-stelo_4.jpg"}}$

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.