Setting up the device fingerprint for Braspag

2 min read

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 Braspag affiliation.

The settings documented in this article take place in an environment that is external to VTEX, therefore they may be outdated.

To enter the device fingerprint scripts required by Braspag/CyberSource, you will need to use Google Tag Manager. To do so, go to http://www.google.com/tagmanager and access your account.

Creation of variables (macros) and driver

Create a variable named trasactionPaymentId, ype Variável da camada de dados, by reading the detalayer transactionPayment.id variable.[]
${"base64":" ","img":{"width":1024,"height":590,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":79607,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/how-to-set-up-the-device-fingerprint-for-braspag_1.png"}}$
Create a variable named cs_sessionId, of type JavaScript personalizado and the following code:


function() {  
  var transactionPaymentId = {{transactionPaymentId}}  
  return transactionPaymentId.toLowerCase();
  }

Create the variables cs_orgId and cs_merchantId of type Permanente. The values of these two variables should be filled out with the contents informed by Braspag.

${"base64":" ","img":{"width":1024,"height":444,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":61791,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/how-to-set-up-the-device-fingerprint-for-braspag_2.png"}}$

Create or edit a driver for the orderPlaced screen (screen that shows purchases successfully closed) for it to be compatible with the Evento personalizado type and the orderPlaced value.

${"base64":" ","img":{"width":1024,"height":525,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":68782,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/how-to-set-up-the-device-fingerprint-for-braspag_3.png"}}$

Creation of a Braspag tag

Create a new tag of type HTML personalizado;
Name it according to your preference.

Fill it out with the HTML below:


<p>
<img src="https://h.online-metrix.net/fp/clear.png?org_id={{cs_orgId}}&amp;session_id={{cs_merchantId}}{{cs_sessionId}}&amp;m=2" alt="">
<object type="application/x-shockwave-flash" data="https://h.online-metrix.net/fp/fp.swf?org_id={{cs_orgId}}&amp;session_id={{cs_merchantId}}{{cs_sessionId}}" width="1" height="1"id="thm_fp">
<param name="movie" value="https://h.online-metrix.net/fp/fp.swf?org_id={{cs_orgId}}&amp;session_id={{cs_merchantId}}{{cs_sessionId}}" /><div></div></object>
<script src="https://h.online-metrix.net/fp/check.js?org_id={{cs_orgId}}&amp;session_id={{cs_merchantId}}{{cs_sessionId}}" type="text/javascript"></script>

${"base64":" ","img":{"width":330,"height":250,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":28832,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/how-to-set-up-the-device-fingerprint-for-braspag_4.png"}}$

At last, post the changes.