O banco confirma quem está comprando

<script src="https://abacatepay.com/abacatepay.js"></script>

<div id="cartao"></div>
<button id="pagar" disabled>Pagar</button>

<script type="module">
  const botao = document.getElementById('pagar')
  const checkout = AbacatePay.create({
    publicKey: 'pk_sua_chave_publica',
    amount: 129000, // centavos: o mesmo valor da cobrança
    onCardChange: ({ canTokenize }) => (botao.disabled = !canTokenize),
  })
  await checkout.mount('#cartao')

  botao.addEventListener('click', async () => {
    try {
      // abre a janela do banco se ele pedir, e fecha sozinha
      const { token } = await checkout.tokenize({
        name: 'Paula Mendes',
        email: 'paula@exemplo.com',
        taxId: '529.982.247-25',
      })
      // mande o token pro seu backend em até 60 segundos
    } catch (error) {
      if (error.code === 'THREE_DS_FAILED') {
        // o cliente não confirmou: deixe tentar de novo
      }
    }
  })
</script>

export function PagamentoCartao({ publicKey, amount, cliente }) {
  const area = useRef(null)
  const checkout = useRef(null)
  const [podePagar, setPodePagar] = useState(false)

  useEffect(() => {
    const instancia = window.AbacatePay.create({
      publicKey,
      amount,
      onCardChange: ({ canTokenize }) => setPodePagar(canTokenize),
    })
    checkout.current = instancia
    instancia.mount(area.current)
    return () => instancia.destroy()
  }, [publicKey, amount])

  async function pagar() {
    setPodePagar(false)
    // o 3DS acontece aqui dentro, quando o banco pede
    const { token } = await checkout.current.tokenize(cliente)
    await fetch('/pagar', { method: 'POST', body: JSON.stringify({ token }) })
  }

  return (
    <>
      <div ref={area} />
      <button onClick={pagar} disabled={!podePagar}>Pagar</button>
    </>
  )
}

// POST /pagar: cobra o cartão com o token que veio do navegador
const resposta = await fetch('https://api.abacatepay.com/v2/transparents/create', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.ABACATEPAY_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    method: 'CARD',
    data: {
      amount: 129000, // o mesmo valor do AbacatePay.create
      token, // ctok_ já autenticado pelo 3DS
      installmentCount: 3,
      customer: { name, email, taxId, cellphone },
    },
  }),
})
const { data } = await resposta.json()

// Guarde data.cardToken: a próxima cobrança deste cartão
// vai com cardToken no lugar do token, sem o cliente e sem 3DS