> ## Documentation Index
> Fetch the complete documentation index at: https://docs.delfinance.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Webhooks

> Receba notificações em tempo real sobre eventos de pagamento, devolução e infração diretamente no seu servidor.

<div className="min-h-screen bg-white px-4 py-6 sm:px-6 lg:px-12">
  <div className="space-y-7">
    <section className="relative overflow-hidden rounded-2xl border border-[#1A941A]/20 bg-[#1A941A]/5 p-7 md:p-10">
      <div className="absolute inset-0 opacity-40 pointer-events-none bg-[linear-gradient(to_right,rgba(26,148,26,0.22)_1px,transparent_1px),linear-gradient(to_bottom,rgba(26,148,26,0.22)_1px,transparent_1px)] bg-[size:24px_24px]" />

      <div className="absolute right-0 top-0 h-full w-1/2 bg-[radial-gradient(circle_at_center,rgba(26,148,26,0.18),transparent_65%)] pointer-events-none" />

      <div className="relative grid grid-cols-1 lg:grid-cols-[1fr_0.85fr] gap-10 items-center">
        <div>
          <span className="mb-5 inline-flex items-center gap-2 rounded-full border border-[#1A941A]/30 bg-[#1A941A]/10 px-4 py-2 text-xs font-bold text-[#1A941A]">
            🔔 Webhooks
          </span>

          <h1 className="mb-2 max-w-3xl text-4xl md:text-6xl font-extrabold tracking-tight leading-[1.05] text-gray-950">
            Notificações em tempo real.
          </h1>

          <h2 className="mb-5 max-w-3xl text-xl md:text-2xl font-semibold tracking-tight text-[#1A941A]">
            Sem polling. Sem atraso.
          </h2>

          <p className="max-w-2xl text-base md:text-lg leading-8 text-gray-600">
            Quando um Pix é recebido, um boleto é pago ou uma infração é aberta, seu servidor é notificado na hora. Sem precisar consultar a API para saber o que aconteceu.
          </p>

          <div className="mt-8 flex flex-col sm:flex-row gap-3">
            <a href="/guias/webhooks/visao-geral" className="inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-[#1A941A] px-5 text-sm font-bold text-white no-underline hover:bg-[#147814] transition-colors">
              Configurar webhook
              <span className="text-lg leading-none">›</span>
            </a>

            <a href="/api-reference/webhooks/cadastrar-webhook" className="inline-flex h-12 items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white px-5 text-sm font-bold text-gray-950 no-underline hover:bg-gray-50 transition-colors">
              Ver Referência de API
            </a>
          </div>
        </div>

        <div className="hidden lg:block relative">
          <div className="absolute -left-10 top-20 z-10 flex h-16 w-16 items-center justify-center rounded-2xl border border-[#1A941A]/20 bg-white shadow-lg text-2xl">
            🔔
          </div>

          <div className="absolute -right-5 top-8 z-10 flex h-14 w-14 items-center justify-center rounded-2xl border border-[#1A941A]/20 bg-white shadow-lg text-xs font-extrabold text-[#1A941A]">
            POST
          </div>

          <div className="absolute -right-8 bottom-10 z-10 flex h-16 w-16 items-center justify-center rounded-2xl border border-[#1A941A]/20 bg-white shadow-lg text-lg font-mono text-gray-600">
            {"</>"}
          </div>

          <div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-xl shadow-[#1A941A]/10">
            <div className="mb-3 flex items-center justify-between">
              <div className="flex items-center gap-2 text-sm font-bold text-gray-950">
                <span className="text-gray-500">▤</span>
                incoming-request.log
              </div>

              <div className="flex items-center gap-1.5">
                <span className="h-2.5 w-2.5 rounded-full bg-[#1A941A]" />

                <span className="h-2.5 w-2.5 rounded-full bg-gray-300" />

                <span className="h-2.5 w-2.5 rounded-full bg-gray-300" />
              </div>
            </div>

            <div className="rounded-xl bg-gray-950 p-5 font-mono text-sm leading-7 text-gray-100 shadow-inner">
              <div><span className="text-blue-400">POST</span><span className="text-gray-400"> /webhooks/delfinance</span></div>
              <div><span className="text-gray-500">Content-Type: </span><span className="text-amber-300">application/json</span></div>

              <div className="mt-2">
                <span className="text-gray-400">
                  {"{"}
                </span>
              </div>

              <div><span className="ml-4 text-[#6EE76E]">"event"</span><span className="text-gray-400">: </span><span className="text-amber-300">"PIX\_RECEIVED"</span><span className="text-gray-400">,</span></div>
              <div><span className="ml-4 text-[#6EE76E]">"amount"</span><span className="text-gray-400">: </span><span className="text-blue-300">150.00</span><span className="text-gray-400">,</span></div>
              <div><span className="ml-4 text-[#6EE76E]">"status"</span><span className="text-gray-400">: </span><span className="text-[#6EE76E]">"RECEIVED"</span></div>

              <div>
                <span className="text-gray-400">
                  {"}"}
                </span>
              </div>
            </div>

            <div className="mt-3 flex items-center gap-2 text-xs text-gray-500">
              <span className="h-2 w-2 rounded-full bg-[#1A941A] animate-pulse" />

              Entregue agora no seu servidor
            </div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <p className="mb-1 text-xs font-bold uppercase tracking-widest text-gray-400">Capacidades</p>
      <h2 className="mb-5 text-2xl font-bold text-gray-950">O que você pode monitorar</h2>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {[
                        {
                          icon: "/icons/pix.png",
                          title: "Eventos Pix",
                          desc: "Receba notificações para recebimento, pagamento, devolução e atualização de status de qualquer transação Pix.",
                          href: "/guias/webhooks/pix",
                        },
                        {
                          icon: "/icons/document-qrcode.png",
                          title: "Eventos Boleto",
                          desc: "Seja notificado quando um boleto for pago, seja via código de barras ou via QR Code Pix do boleto híbrido.",
                          href: "/guias/webhooks/boleto",
                        },
                        {
                          icon: "/icons/refund.png",
                          title: "MEDs (Banco Central)",
                          desc: "Receba notificações sobre o Mecanismo Especial de Devolução quando uma infração Pix for aberta ou atualizada na sua conta.",
                          href: "/guias/webhooks/meds",
                        },
                        {
                          icon: "/icons/authentication.png",
                          title: "Autenticação flexível",
                          desc: "Escolha o esquema de autenticação do seu endpoint: BASIC, BEARER, HEADER customizado ou sem autenticação.",
                          href: "/guias/webhooks/visao-geral",
                        },
                        {
                          icon: "/icons/retry.png",
                          title: "Retentativas automáticas",
                          desc: "Se o seu servidor estiver fora do ar, a Delfinance tenta reenviar o evento com backoff exponencial por até 12 horas.",
                          href: "/guias/webhooks/visao-geral",
                        },
                        {
                          icon: "/icons/rest-api.png",
                          title: "Gestão via API",
                          desc: "Cadastre, liste e remova webhooks por API. Sem precisar acessar painel ou abrir chamado de suporte.",
                          href: "/api-reference/webhooks/cadastrar-webhook",
                        },
                      ].map((item) => (
                        <a
                          key={item.title}
                          href={item.href}
                          className="group flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-5 no-underline hover:border-[#1A941A]/40 hover:shadow-md hover:shadow-[#1A941A]/10 transition-all"
                        >
                          <div className="flex items-center gap-3">
                            <img src={item.icon} className="w-8 h-8 object-contain shrink-0" alt="" />
                            <p className="font-bold text-gray-950 group-hover:text-[#1A941A] transition-colors">{item.title}</p>
                          </div>
                          <p className="text-sm text-gray-500 leading-relaxed">{item.desc}</p>
                          <span className="mt-auto text-xs font-semibold text-[#1A941A] opacity-0 group-hover:opacity-100 transition-opacity">
                            Ver documentação →
                          </span>
                        </a>
                      ))}
      </div>
    </section>

    <section>
      <p className="mb-1 text-xs font-bold uppercase tracking-widest text-gray-400">Casos de uso</p>
      <h2 className="mb-5 text-2xl font-bold text-gray-950">Por que usar webhooks</h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {[
                        {
                          title: "Conciliação automática",
                          desc: "Quando PIX_RECEIVED ou CHARGE_PAID chega, atualize o status do pedido no banco de dados na hora. Sem rodar jobs noturnos, sem conferência manual de extrato.",
                        },
                        {
                          title: "Liberação automática de acesso",
                          desc: "Plataformas de cursos, software e conteúdo digital podem liberar o acesso assim que o evento de pagamento chegar, sem o cliente precisar aguardar aprovação manual.",
                        },
                        {
                          title: "Notificação de clientes",
                          desc: "Dispare um e-mail ou SMS de confirmação para o pagador assim que o PIX_RECEIVED chegar. O evento traz os dados do pagador prontos para uso.",
                        },
                        {
                          title: "Controle de inadimplência",
                          desc: "Use o status do boleto para acionar réguas de cobrança. Boleto próximo do vencimento sem pagamento pode disparar um lembrete ou uma oferta de renegociação.",
                        },
                        {
                          title: "Auditoria e compliance",
                          desc: "Registre todos os eventos recebidos em um log imutável. Qualquer transação tem rastreabilidade completa do evento original ao processamento interno.",
                        },
                        {
                          title: "Integração com ERPs",
                          desc: "Acione fluxos de lançamento contábil, emissão de nota fiscal ou liberação de pedido diretamente a partir do evento de pagamento, sem polling e sem integração ponto a ponto.",
                        },
                      ].map((item) => (
                        <div
                          key={item.title}
                          className="flex flex-col gap-2 rounded-xl border border-gray-100 bg-gray-50 p-5 hover:border-[#1A941A]/30 hover:bg-[#1A941A]/5 transition-all"
                        >
                          <p className="font-bold text-gray-950">{item.title}</p>
                          <p className="text-sm text-gray-500 leading-relaxed">{item.desc}</p>
                        </div>
                      ))}
      </div>
    </section>

    <section className="rounded-2xl border border-gray-100 bg-gray-50 p-7">
      <p className="mb-1 text-xs font-bold uppercase tracking-widest text-gray-400">Começar agora</p>
      <h2 className="mb-6 text-2xl font-bold text-gray-950">Três passos para receber o primeiro evento</h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {[
                        {
                          step: "01",
                          title: "Registre seu endpoint",
                          desc: "Cadastre a URL do seu servidor e escolha o esquema de autenticação. Um webhook por tipo de evento, gerenciado via API.",
                          href: "/guias/webhooks/visao-geral",
                          cta: "Ver configuração",
                        },
                        {
                          step: "02",
                          title: "Simule o primeiro pagamento",
                          desc: "Use o endpoint de simulação no sandbox para disparar um evento PIX_RECEIVED ou CHARGE_PAID sem precisar de um pagamento real.",
                          href: "/guias/pix/receber-pix/simulacao-pagamento",
                          cta: "Ver simulação",
                        },
                        {
                          step: "03",
                          title: "Processe o evento",
                          desc: "Valide o payload recebido, processe de forma assíncrona e responda HTTP 200 em menos de 10 segundos para confirmar a entrega.",
                          href: "/guias/webhooks/pix",
                          cta: "Ver payloads",
                        },
                      ].map((item) => (
                        <div key={item.step} className="flex flex-col gap-3 h-full">
                          <span className="text-5xl font-extrabold text-[#1A941A]/20 leading-none">{item.step}</span>
                          <p className="font-bold text-gray-950">{item.title}</p>
                          <p className="text-sm text-gray-500 leading-relaxed flex-1">{item.desc}</p>
                          <a href={item.href} className="text-sm font-bold text-[#1A941A] no-underline hover:underline">
                            {item.cta} →
                          </a>
                        </div>
                      ))}
      </div>
    </section>
  </div>
</div>