Usando Yapay fingerprint no Vue
Tags: vue, yapay, todayilearned, javascript
Published: 2020-04-19 14:35:18

Infelizmente frente as limitações técnicas das soluções de pagamentos [Yapay](https://www.yapay.com.br/) 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](https://intermediador.dev.yapay.com.br/#/transacao-fingerprint).

# 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 
``` 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](https://intermediador.dev.yapay.com.br/#/transacao-fingerprint) 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.
```vue
 <form :data-yapay="'payment-form'">
 ...
</form>
```
Ao renderizar teremos o famigerado da seguinte forma:
```html
<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](https://intermediador.dev.yapay.com.br/#/transacao-fingerprint) temos apenas o exemplo utilizando *form action*, eu preferi uma abordagem mais desacoplada, portanto pego o valor da seguinte forma:
```javascript
 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 🤷‍♂️🤷‍♀️

#### Qualquer dúvida pode comentar, que tentarei lhe ajudar, até a próxima 👋