Configurar FingerPrint para PayU

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

As instruções dessa etapa do artigo são realizadas em um ambiente externo. Desse modo, podem estar desatualizadas.

Fazer login em http://www.google.com/tagmanager/ para a loja que vamos configurar;
Introduzir o item etiquetas (tags) para configurar o id da sessão do device;
Criar um produto de “HTML Personalizado” como se vê na imagem a seguir:
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAJUlEQVR4nAEaAOX/AIqKire5ucHBwJiZmQAxMDS9vr7o6Ofb2trCnQ/oMqrAtwAAAABJRU5ErkJggg==","img":{"src":"https://images.contentful.com/alneenqid6w5/8Kc8zBKQFOmwK6G8ekgMa/2a26fa73a709b116cfdf899d4aee7a23/payU_1.png","width":971,"height":508,"type":"png"}}$
No campo HTML da configuração, devemos colar o código HTML que chama o código para mandar a informação a PayU:


<script src="/arquivos/md5.js"></script>
<script>
       function getCookie(cname) {
       var name = cname + "=";
       var ca = document.cookie.split(';');
       for(var i=0; i<ca.length; i++) {
               var c = ca[i].trim();
               if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
       }
       return "";
   }
   function microtime(get_as_float) {
       var now = new Date().getTime() / 1000;
       var s = parseInt(now, 10);
       return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;
   }
   vtexjs.checkout.getOrderForm().done(function(orderForm){ // hala el valor de userProfileId
       var uid = getCookie('VtexIdclientAutCookie') + orderForm.userProfileId;
       var deviceSessionId = CryptoJS.MD5(uid+microtime());
       console.log("dsid: "+deviceSessionId);
       window.vtex.deviceFingerprint = deviceSessionId;
       console.log("fingerprint: "+window.vtex.deviceFingerprint);
       document.getElementById('gtm').innerHTML = '<p></p>'+'<img src="https://maf.pagosonline.net/ws/fp/clear.png?id='+deviceSessionId+'80200">';
       document.getElementById('maf').innerHTML = '<object type="application/x-shockwave-flash" data="https://maf.pagosonline.net/ws/fp/fp.swf?id='+deviceSessionId+'80200" width="1" height="1" id="thm_fp"><param name="movie" value="https://maf.pagosonline.net/ws/fp/fp.swf?id='+deviceSessionId+'80200" /></object>';
       var pol_script = document.createElement('script');
       pol_script.type = 'text/javascript';
       pol_script.src = 'https://maf.pagosonline.net/ws/fp/check.js?id='+deviceSessionId+'80200';
       document.getElementById("gtm").appendChild(pol_script);
   }); // JavaScript Document
</script>
<div id="gtm"></div>
<div id="maf"></div>

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAI0lEQVR4nGPQ0dEvLCh8+/bd9evXGaytbXJycq9fv/769WsApDoOZJvkfisAAAAASUVORK5CYII=","img":{"src":"https://images.contentful.com/alneenqid6w5/4Y60ayHwaQa8ykaUQUmqgq/4a8ad711a25542b1513a75e94725c464/payU_2.png","width":871,"height":436,"type":"png"}}$

Depois é preciso realizar a configuração avançada tal como consta na imagem a seguir:

${"base64":" ","img":{"width":912,"height":490,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":22276,"url":"https://images.ctfassets.net/alneenqid6w5/2tZRZWcwFWgq6IueAKWQ4o/c64a7a0f2b6dbaad9405e3e55408fb8c/payU_3.png"}}$

Para configurar o evento, siga os passos abaixo:

Entre na aba More:
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAFUlEQVR4nGPIyMw6cuTI69evhZiZAS34BmEgQUDHAAAAAElFTkSuQmCC","img":{"src":"https://images.contentful.com/alneenqid6w5/1NyDU3X1EseWcCisO04okg/66d6593915e933c22768633a76b4bf92/payU_4.png","width":956,"height":167,"type":"png"}}$
Crie um evento personalizado:
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAFUlEQVR4nGPQdwjfcvTe3HXHxZQtACXlBaHqo63PAAAAAElFTkSuQmCC","img":{"src":"https://images.contentful.com/alneenqid6w5/Xip98CFhokwoCs22GsUyK/a1c70a419c84d2f4fa2bb0908e0336cd/payU_5.png","width":1025,"height":366,"type":"png"}}$
Preencha-o da seguinte maneira:
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAI0lEQVR4nGNgENJiULRmUbWTMfVluHfv7t+/3/79+/Pz+2cAZbcNAr2qPTgAAAAASUVORK5CYII=","img":{"src":"https://images.contentful.com/alneenqid6w5/6Rdhtn8quA2IaqKSKeGa0u/0f7a6ed573a438475c477b5c09c331ad/payU_6.png","width":1031,"height":538,"type":"png"}}$
Salve o evento e posteriormente salve a etiqueta (tag):
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAMklEQVR4nAEnANj/APHw8FtUVYR+fqyqqgCytLbW1tf////m5uYAEA4X7u7u////xsbG4zkZ8n6OAfwAAAAASUVORK5CYII=","img":{"src":"https://images.contentful.com/alneenqid6w5/2AcLzAcwgMs2SwgkEqEmo2/941c852d50622d570e8fab6534780e33/payU_7.png","width":942,"height":611,"type":"png"}}$
Uma vez salva a etiqueta, é necessário publicá-la:
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAFUlEQVR4nGP48OHDrLnLGcQFjYKcADATBZ1z+WFfAAAAAElFTkSuQmCC","img":{"src":"https://images.contentful.com/alneenqid6w5/6mpOQSBwzYq844A8uCuWck/125894734e6996cc1521b46c3562a8a7/payU_8.png","width":1337,"height":456,"type":"png"}}$

Uma vez que já configuramos a etiqueta, temos que salvar o JS chamado a partir do código. Este é salvo dentro do gestor de arquivo da VTEX. Para fazer isso é necessário seguir os seguintes passos:

Acessando o painel VTEX no menu CMS >> Layout >> Files Manager >> Gerenciamento de arquivo .js >> Add.

${"base64":" ","img":{"width":1874,"height":509,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":61294,"url":"//images.ctfassets.net/alneenqid6w5/175WhPco7ew6OSEUsIG4MU/68772fc79d642781908d19163d787141/cms_js.png"}}$

Anexo: md5.js

Validação

Para fazer a validação, é necessário entrar na loja, fazer todo o processo de compra. Assim que chegarmos em forma de pagamento, validamos que o JS está sendo executando:

Clique com o botão direito no botão de compra
Selecione Inspecionar Elemento
Faça a busca da palavra MAF

Se o resultado for encontrado, significa que a configuração está correta e o Fingerprint está sendo enviado corretamente, segue um exemplo:

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAI0lEQVR4nGMwMjRyd3OLiYkWEBBguHPj1ovHj398+71mzRoAeawM1XYL9hkAAAAASUVORK5CYII=","img":{"src":"https://images.contentful.com/alneenqid6w5/66H4gkLslyuk0sgOgm8IWC/3d04eca1fdb8ed6a7b4cbf7065a73ec3/payU_9.png","width":983,"height":401,"type":"png"}}$