Drop-in Widget

import { useEffect, useRef } from 'react'

export function CheckoutButton({ amount }: { amount: number }) {
  const ref = useRef<HTMLElement>(null)

  useEffect(() => {
    const el = ref.current
    if (!el) return

    const onSuccess = (e: Event) => {
      const { invoiceId, pdfUrl } = (e as CustomEvent).detail
      window.open(pdfUrl, '_blank')
    }

    el.addEventListener('on-success', onSuccess)
    return () => el.removeEventListener('on-success', onSuccess)
  }, [])

  return (
    <vero-button
      ref={ref}
      api-key={import.meta.env.VITE_VERO_PUBLIC_KEY}
      org-id={import.meta.env.VITE_VERO_ORG_ID}
      amount={amount}
    >
      Pagar e obter factura
    </vero-button>
  )
}

:root {
  --vero-radius: 0.25rem;   /* botões quadrados */
  --vero-primary: #1d4ed8;  /* azul da sua marca */
  --vero-primary-text: #ffffff;
  --vero-font: 'Inter', sans-serif;
}

// No SEU servidor (chave secreta vero_..._sk_), nunca no browser
import { createVeroClient } from '@veroao/node'
const vero = createVeroClient()

// Factura: anula-se com uma Nota de Crédito (NC), que a AGT valida
await vero.creditNotes.create(orgId, invoiceId, 'Devolução do artigo')

// Recibo emitido por engano (@veroao/node 1.2+). A AGT só aceita:
//   'N' - não foi enviado ao cliente · 'I' - cliente identificado incorrectamente
await vero.receipts.cancel(orgId, receiptId, { reason: 'N' })