Cord Elements para React

No frontend, o Cord não expõe um SDK de formulários de pagamento avulsos: o pagamento com cartão é processado dentro do iframe seguro do link público do orçamento. O que publicamos é o Cord Elements (@flouviahq/elements), com duas peças para React: um visualizador de orçamentos já criados e um builder para criar orçamentos novos a partir da sua própria UI.

Instalação

npm install @flouviahq/elements

CordProvider: chave publicável ou o seu próprio proxy

Para criar orçamentos ou ler o catálogo a partir do navegador, envolva o seu app em CordProvider. É uma união discriminada: você passa publishableKey ou proxyUrl, nunca os dois.

import { CordProvider } from '@flouviahq/elements/react';

function Layout({ children }) {
  return (
    <CordProvider publishableKey={process.env.NEXT_PUBLIC_CORD_PUBLISHABLE_KEY}>
      {children}
    </CordProvider>
  );
}

Com publishableKey (pk_live_.../pk_test_..., gerada na aba Chaves do Workbench de desenvolvedores), o navegador pode criar orçamentos e ler o catálogo de produtos diretamente; não pode ler o seu diretório de clientes (useCordClients() retorna CordError com code: 'clients_require_proxy') nem mexer em faturamento ou cobrança. Se você precisa disso, use proxyUrl apontando para uma rota do seu backend que chame o Cord com uma chave sk_.

Ver, aprovar ou pagar um orçamento existente

import { CordCotizador } from '@flouviahq/elements/react';

function MyPortal({ token }) {
  return (
    <CordCotizador
      token={token}
      onApproved={(e) => console.log('Approved, signed by', e.signed_by)}
      onPay={(e) => console.log('Payment opened at', e.url)}
      onRejected={(e) => console.log('Rejected:', e.comentario)}
    />
  );
}

CordCotizador monta o mesmo gerador de orçamentos de /q dentro de um iframe seguro com altura automática; funciona sem CordProvider se você só precisa mostrar/aprovar (não criar orçamentos novos nem ler o catálogo).

Criar um orçamento novo

CordBuilder traz uma UI pronta para usar, com classes .cord-* estáveis para você sobrescrever com o seu próprio CSS:

import { CordBuilder } from '@flouviahq/elements/react';

function NewQuote() {
  return <CordBuilder onQuoteCreated={(q) => console.log(q.folio, q.link_publico)} />;
}

Se preferir a sua própria interface, useQuoteBuilder() dá o mesmo estado (itens, cliente, totais, handleSubmit) como um hook headless, sem nenhum componente visual no meio.

Eventos disponíveis

CordCotizador emite onReady, onViewed, onApproved, onSigned (junto com onApproved, mesma ação), onRejected, onMessage, onItemComment e onPay. Use-os para reagir no seu app (redirecionar, mostrar um agradecimento, registrar analytics etc.).

Outros frameworks

O mesmo pacote traz o Web Component <cord-cotizador> (Astro, Vue, Svelte, PHP, qualquer HTML) e wrappers para Vue e Framer. Para sites sem build (WordPress, Webflow), use o loader de uma linha embed.js. Veja a página do Cord Elements para todos os snippets.