Receber pagamento no cartão de crédito

'use client'

import { useEffect, useRef, useState } from 'react'

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

  useEffect(() => {
    let cancelado = false
    const host = area.current.appendChild(document.createElement('div')) // um por montagem (StrictMode)
    const instancia = window.AbacatePay.create({
      publicKey,
      amount,
      onCardChange: ({ canTokenize }) => setPodePagar(canTokenize),
    })
    checkout.current = instancia
    instancia.mount(host).catch((error) => !cancelado && setMensagem(error.message))
    return () => {
      cancelado = true
      instancia.destroy()
      host.remove()
    }
  }, [publicKey, amount])

  async function pagar() {
    setPodePagar(false) // evita cobrança em dobro
    try {
      const { token } = await checkout.current.tokenize(cliente)
      const resposta = await fetch('/pagar', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token, cliente }),
      })
      const { success, status, error } = await resposta.json()
      setMensagem(success ? `Pagamento recebido (${status})` : error)
      if (success) return
    } catch (error) {
      setMensagem(error.message)
    }
    setPodePagar(checkout.current.canTokenize)
  }

  return (
    <div>
      <div ref={area} />
      <button type="button" onClick={pagar} disabled={!podePagar}>Pagar</button>
      {mensagem && <p role="alert">{mensagem}</p>}
    </div>
  )
}