Seu gerador de orçamentos, dentro do site do seu cliente.

@flouviahq/elements/reactComponentes e hooks para React 17 ou superior e Next.js. A diretiva "use client" já vem incluída.

• <CordCotizador>Componente

  Mostra um orçamento já criado para o cliente ver, aprovar, negociar ou pagar. Callbacks tipados para cada evento e onStateChange com o estado em tempo real.

• <CordInvoice>Componente

  A fatura de /i/{token}: saldo, status, itens e PDF. O pagamento abre em uma janela do Cord e onPaid avisa quando ela é quitada.

• <CordBuilder>Componente

  Formulário pronto para montar um novo orçamento, com as moedas, os impostos por item e as condições de pagamento da sua conta. Componente composto: Header, Config, Items, Notes, Summary e SubmitButton.

• <CordFiscalForm>Componente

  Dados fiscais do destinatário com o mesmo validador do servidor: o identificador fiscal dos 12 países do Cord (CNPJ e CPF no Brasil, NIF/CIF na Espanha, EIN nos EUA…) no formato oficial e, onde existe, com dígito verificador, além dos campos extras que a fatura de alguns países exige.

• <CordProvider>Componente

  Configure uma vez: publishableKey ou proxyUrl (nunca os dois), locale es, en, pt, fr ou de, appearance e debug.

• useQuoteBuilder()Hook

  O estado do builder sem UI: itens com key, cliente, moeda, totais detalhados por alíquota e retenções, validação e builder.submit().

• useCreateQuote()Hook

  Cria um orçamento pelo seu proxy ou com a sua pk_ e devolve número, token e link público. Um clique duplo não o duplica.

• useCordCatalog()Hook

  Seu catálogo de produtos. Com uma chave pública, o servidor oculta custo e margem.

• useCordClients()Hook

  Seu cadastro de clientes, só no modo proxy: com uma pk_, responde clients_require_proxy sem tocar na rede.

@flouviahq/elementsAo importar, os elementos são registrados em Shadow DOM: seu CSS não os quebra e o deles não afeta sua página. Funciona em Astro, Svelte, Laravel, Rails ou qualquer HTML.

• <cord-quote>Componente

  Atributos token, base-url, min-height, appearance e debug. Os eventos chegam sem o prefixo: approved, pay, rejected. <cord-cotizador> continua valendo como alias.

• <cord-invoice>Componente

  A fatura incorporada, com os mesmos atributos. Também emite paid.

• <cord-fiscal-form>Componente

  Elemento de formulário nativo: dentro do seu <form>, fornece os dados fiscais e bloqueia o envio enquanto houver erros.

• mountCotizador()Função

  Monta o iframe no elemento que você passar (document: "invoice" para uma fatura) e devolve um controlador com destroy().

• calculateDocumentTotals()Função

  O mesmo motor de totais que o Cord usa no servidor: imposto por item, várias alíquotas e retenções. Sua UI nunca mostra um total diferente.

• CordErrorClasse

  Todo erro traz status, um code estável, request_id e doc_url com a explicação.

• enableDebug()Função

  Barra de depuração no seu site com eventos, requisições e avisos. Só aparece com chaves pk_test_.

@flouviahq/elements/headlessO núcleo sem framework sobre o qual React, Vue e os Web Components são construídos. Sem efeitos colaterais na importação.

• createQuoteBuilder()Função

  Estado e ações do gerador de orçamentos: addProduct, updateItem, setMoneda, validate e submit, com inscrição em mudanças.

• builder.draftWithAi()Função

  Monta um rascunho de itens a partir de texto, em streaming. Eles chegam marcados como sugeridos para o cliente revisar.

• createCordClient()Função

  Cliente HTTP com novas tentativas, Idempotency-Key automática e a configuração da sua conta em cache com ETag.

• createFiscalForm()Função

  O formulário fiscal sem UI, com o validador do identificador fiscal dos 12 países.

/vue · /framer · /webflowWrappers nativos para que cada plataforma se sinta em casa.

• CordCotizador · CordInvoice (Vue)Componente

  Props token, baseUrl, minHeight e appearance; emitem cada evento (approved, pay, updated, status-changed, paid…) e state com o estado em tempo real.

• useCordQuoteBuilder()Hook

  O builder headless como composable do Vue.

• FramerCordCotizadorComponente

  Code Component com token e baseUrl editáveis no painel de propriedades do Framer.

• data-cord-tokenAtributo

  Webflow ou HTML: adicione o atributo a qualquer Div Block e o script faz a montagem sozinho.

• data-cord-documentAtributo

  "invoice" para mostrar uma fatura em vez de um orçamento.

• data-cord-appearanceAtributo

  O mesmo objeto appearance em JSON: tema, variáveis, rules e layout.

@flouviahq/node · @flouviahq/cliPacotes separados para o seu backend e o seu terminal. O Elements vive no navegador; sua secret key, nunca.

• new Cord(sk)Classe

  @flouviahq/node: a API completa com sua sk_ ou rk_. Roda em Node, Bun, Deno, Cloudflare Workers e Vercel, sem dependências.

• constructEvent()Função

  Verifica a assinatura X-Cord-Signature-V1 e a idade dela, e devolve o evento tipado. Um aviso antigo reenviado é rejeitado.

• createElementsProxy()Função

  Monta o modo proxyUrl do Elements no seu backend: o navegador nunca vê uma chave.

• cord listenFunção

  @flouviahq/cli: recebe em localhost os webhooks da sua conta de teste, assinados exatamente como em produção.

• cord triggerFunção

  Dispara qualquer evento (quote.approved, invoice.paid…) para os seus endpoints de teste.

Eventos do iframeOs mesmos em React, Vue, nos Web Components e no embed.js. Sem domínios autorizados, chegam sem dados.

• cord:readyEvento

  Terminou de carregar: { status, folio, moneda, total }.

• cord:viewedEvento

  O cliente abriu o documento.

• cord:approvedEvento

  Aprovou e assinou: { signed_by, hash }.

• cord:signedEvento

  É emitido junto com approved, pela mesma ação: não conte duas vezes.

• cord:rejectedEvento

  Recusou: { comentario }.

• cord:messageEvento

  Escreveu ou fez uma contraproposta: { action, mensaje, propuesta }.

• cord:item_commentEvento

  Comentou um item: { item_id, mensaje }.

• cord:payEvento

  Clicou em pagar. O Cord já abriu o pagamento na janela dele; { url } é só um aviso.

• cord:updatedEvento

  O vendedor alterou o orçamento enquanto ele estava aberto: { subtotal, total, moneda }.

• cord:status_changedEvento

  O status mudou: { status }.

• cord:paidEvento

  Só para faturas: foi quitada. { folio, moneda, saldo }.