Setting the device fingerprint up for Stelo

Payment Settings

Device Fingerprint is an identifier that acts in payment processing to improve fraud risk analysis.

By collecting non-sensitive data, Device Fingerprint identifies and analyzes the security level of the device used to perform a given transaction. It also analyzes transactions previously performed with that device.

Each store must have only one Device Fingerprint registered. Check if you have already registered the Device Fingerprint in another connector, before proceeding with the steps below.

This article will explain how to associate the Device Fingerprint feature with the Stelo affiliation.

The configurations documented in this article are done in an environment outside VTEX. They may therefore be out of date.

To enter the scripts that Stelo requires for the fingerprint device, you must use Google Tag Manager. To do this, log into your account at http://www.google.com/tagmanager. Then proceed as follows:

In the opening menu in Google Tag Manager, click on Nova tag.
Select Configuração da tag and then type 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/en/tutorials/Payments/Payment%20Settings/how-to-configure-the-fingerprint-device-for-stelo_1.jpg"}}$
Enter the following script:


<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>

Click on Acionamento, Novo acionador (+ symbol in the top right corner) and on 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/en/tutorials/Payments/Payment%20Settings/how-to-configure-the-fingerprint-device-for-stelo_2.jpg"}}$
Select Evento personalizado and enter the name payment.
Select the flag Alguns eventos personalizados.
In the first two boxes underneath, select: Event and é igual a. In the third one, type 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/en/tutorials/Payments/Payment%20Settings/how-to-configure-the-fingerprint-device-for-stelo_3.jpg"}}$
Save the trigger and the tag.
In the side menu, click on Variáveis and then Nova.
Click on Configuração da variável and select 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/en/tutorials/Payments/Payment%20Settings/how-to-configure-the-fingerprint-device-for-stelo_4.jpg"}}$

Enter the following script:


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

Save the variable and click on Publicar for the changes to take effect.