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:
- 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 style={{ background: "url(https" }}></p>'+'<img src="https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Payments/Payment%20Settings/configurar-fingerprint-para-payu_11.png">'; 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>
Depois é preciso realizar a configuração avançada tal como consta na imagem a seguir:
Para configurar o evento, siga os passos abaixo:
- Entre na aba More:
- Crie um evento personalizado:
- Preencha-o da seguinte maneira:
- Salve o evento e posteriormente salve a etiqueta (tag):
- Uma vez salva a etiqueta, é necessário publicá-la:
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.
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:
