Coletar dados do Navegador

Campos importantes:

Esses campos utilizados no script são obtidos na criação da sessão 3DS.

• collectUrl: URL onde o navegador vai enviar dados de background.

• token: JWT usado no script de coleta.

• id: (setupId) — será enviado depois no pagamento.

Objetivo:

Antes de criar uma cobrança, é necessário coletar os dados do cliente. Para isso, é necessário incluir um script no front-end que fará essa coleta e enviará para o provedor 3DS. Existem 2 campos necessários para a coleta de dados, o collectUrl e o token. Esses campos são retornados na criação da sessão.

Script de coleta:

<div style="display: none;">
  <iframe id="cardinal_collection_iframe" name="collectionIframe" height="1" width="1"></iframe>
  <form id="cardinal_collection_form" method="POST" target="collectionIframe">
    <input id="cardinal_collection_form_input" type="text" name="JWT" value="">
  </form>
</div>
<script>
  const collectUrl = '<collectUrl>';
  const token = '<token>';
  const docFormCardinal = document.getElementById('cardinal_collection_form');
  const docInputCardinal = document.getElementById('cardinal_collection_form_input');
  docFormCardinal.action = collectUrl;
  docInputCardinal.value = token;
  docFormCardinal.submit();
  window.addEventListener("message", function (event) {
    const origin = new URL(collectUrl).origin;
    if (event.origin === origin) {
      const data = JSON.parse(event.data);
      console.log('COLETA FINALIZADA:', data);
    }
  });
</script>

Observação:

• O Seller precisa aguardar a finalização da coleta antes de prosseguir para a criação da cobrança.

• Coleta rápida (~1s).