Antes de criar uma cobrança é necessário coletar os dados do cliente. Para isso, é necessário incluir um script no front-end que irá coletar os dados do cliente e enviar para o provedor 3DS. Existe 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 (/3ds/setup) 3DS2 Malga.

Exemplo

<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>
    //Esses valores são retornados no setup
    const collectUrl = ''; //collectUrl retornada na criação da sessão(/3ds/setup)
    const token = ''; //token retornado na criação da sessão(/3ds/setup)
    //Esses valores são retornados no setup

    const docFormCardinal = document.getElementById('cardinal_collection_form');
    const docInputCardinal = document.getElementById('cardinal_collection_form_input');
    docFormCardinal.action = collectUrl;
    docInputCardinal.value = token;
    docFormCardinal.submit();

    // Event listener para saber quando a coleta foi finalizada
    window.addEventListener("message", async function (event) {
        const origin = new URL(collectUrl).origin
        if (event.origin === origin) {
            const data = JSON.parse(event.data);
            console.log(data)
            console.log('COLETA FINALIZADA')
        }
    });
</script>