Menu
Feedback
Comece aqui
Tutoriais


Tutoriais
Configurações de Pagamentos
Configurar FingerPrint para PayU
3 min de leitura

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.

  1. Fazer login em http://www.google.com/tagmanager/ para a loja que vamos configurar;
  2. Introduzir o item etiquetas (tags) para configurar o id da sessão do device;
  3. Criar um produto de “HTML Personalizado” como se vê na imagem a seguir:
    {"base64":"  ","img":{"width":971,"height":508,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":57524,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configura%C3%A7%C3%B5es-de-pagamentos/configurar-fingerprint-para-payu_1.png"}}
  4. 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>'+'<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":"  ","img":{"width":871,"height":436,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":44064,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configura%C3%A7%C3%B5es-de-pagamentos/configurar-fingerprint-para-payu_2.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://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configura%C3%A7%C3%B5es-de-pagamentos/configurar-fingerprint-para-payu_3.png"}}

Para configurar o evento, siga os passos abaixo:

  1. Entre na aba More:
    {"base64":"  ","img":{"width":956,"height":167,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":13473,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configura%C3%A7%C3%B5es-de-pagamentos/configurar-fingerprint-para-payu_4.png"}}
  2. Crie um evento personalizado:
    {"base64":"  ","img":{"width":1025,"height":366,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":23758,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configura%C3%A7%C3%B5es-de-pagamentos/configurar-fingerprint-para-payu_5.png"}}
  3. Preencha-o da seguinte maneira:
    {"base64":"  ","img":{"width":1031,"height":538,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":30543,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configura%C3%A7%C3%B5es-de-pagamentos/configurar-fingerprint-para-payu_6.png"}}
  4. Salve o evento e posteriormente salve a etiqueta (tag):
    {"base64":"  ","img":{"width":942,"height":611,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":71638,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configura%C3%A7%C3%B5es-de-pagamentos/configurar-fingerprint-para-payu_7.png"}}
  5. Uma vez salva a etiqueta, é necessário publicá-la:
    {"base64":"  ","img":{"width":1337,"height":456,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":80215,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configura%C3%A7%C3%B5es-de-pagamentos/configurar-fingerprint-para-payu_8.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":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configura%C3%A7%C3%B5es-de-pagamentos/configurar-fingerprint-para-payu_9.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:

  1. Clique com o botão direito no botão de compra
  2. Selecione Inspecionar Elemento
  3. 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":"  ","img":{"width":983,"height":401,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":193499,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configura%C3%A7%C3%B5es-de-pagamentos/configurar-fingerprint-para-payu_10.png"}}

Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Como integrar um provedor de Gift Card externo à VTEX
« Anterior
Configurar notificações de pagamento
Próximo »
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na VTEX Community
Junte-se à nossa comunidade
Solicite suporte à VTEX
Receba assistência personalizada com nossos especialistas
Abra um ticket de suporte
GitHubDeveloper PortalComunidadeFeedback