Usando Yapay fingerprint no Vue

#vue #yapay #todayilearned #javascript

Infelizmente frente as limitações técnicas das soluções de pagamentos Yapay e a documentação com pouquíssimas informações sobre como integrar com outros frameworks além do defasado JQuery, precisamos aplicar soluções de contorno para conseguir o fingerprint que é crucial para as transações.

Entendendo o Fingerprint 🥱

Através do CPF do cliente é feita a consulta pela existência do seu cadastro e então as transações são atreladas ao mesmo. Caso não exista uma conta, o sistema irá criar uma nova conta com os dados que forem submetidos na integração.

O que é fingerprint? 🤔

O fingerprint é um script criado em javascript que grava vários dados para que seja realizada a analise das informações. Essas informações são enviadas no momento do POST da transação.
você pode ter mais informações sobre como funciona este processo aqui.

Solução de contorno para utilizarmos em projetos Vue 👓

Teremos que ferir um pouco as boas práticas, na nesta seção Em que lugar da página eu coloco o fingerprint? da documentação nos é informado que precisamos importar um script deles, porém ao tentar fazer isso no nosso componente, não funciona, mesmo dinamicamente no mounted.

Como contornar isto?

Para contornar isto devemos importar o script deles no nosso arquivo estático e a função getFingerPrint() pro ambiente que desejar, disponíveis temos sandbox e production, para que tenhamos acesso ao (PASMEM) input hidden com o valor do token que ele gera 😱

Adicionando no public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
  <script src="https://static.traycheckout.com.br/js/finger_print.js" type="text/javascript"></script>
  <script>
    window.yapay.FingerPrint({ env: 'sandbox' }).getFingerPrint();
  </script>

  </html>

Pegando o token 🎫

Na documentação temos a seguinte informação

"você deve adicionar o atributo data-yapay="payment-form". Incluindo esse atributo será criado um input do tipo hidden, com o valor do parâmetro finger_print que deve ser enviado junto com os parâmetros de criação na API de Transação"

Ok, mas como fazer isto no Vue?

Devemos passar o attributo como prop para o form, assim ele passa a enxergar e consegue gerar o input hidden.

 <form :data-yapay="'payment-form'">
 ...
</form>

Ao renderizar teremos o famigerado da seguinte forma:

<form data-yapay="payment-form">
  <input name="finger_print" type="hidden" value="yapay_hash">
</form>

Mas como consigo pegar o valor deste cara?

Na documentação temos apenas o exemplo utilizando form action, eu preferi uma abordagem mais desacoplada, portanto pego o valor da seguinte forma:

 document.querySelector('input[name="finger_print"]').value

Lembrando que este valor só é acessivel caso não haja hot reload na página, se houver você deve atualizar a página para gerá-lo novamente, caso contrário este input hidden não é renderizado, acredito que seja alguma limitação por motivos de segurança 🤷‍♂️🤷‍♀️

DEV Community