Cord Elements (componentes de UI incorporáveis)

O Cord Elements (@flouviahq/elements) é a biblioteca de componentes que permite incorporar o gerador de orçamentos do Cord diretamente no seu site ou app, sem levar o cliente para outro domínio.

Benefícios

• Menos abandono: o cliente nunca sai do seu domínio (p. ex., app.yourcompany.com/portal) para ver, aprovar ou pagar um orçamento.
• Conformidade com PCI: o pagamento com cartão acontece dentro do iframe seguro do link público do orçamento — os dados sensíveis do cartão nunca tocam os seus servidores.

Os dois componentes reais

1. CordCotizador — um iframe com altura automática que mostra um orçamento já criado para que o cliente o veja, o aprove (assinatura eletrônica) ou o pague. É o mesmo gerador de orçamentos que roda em /q/{token}, com a sua marca por meio da API de appearance (cores, tipografia, tema claro/escuro).
2. CordBuilder (ou o hook headless useQuoteBuilder) — monta e cria um orçamento novo a partir da sua própria interface: cliente, itens, impostos e totais calculados com o mesmo motor que o servidor usa.

Não existem componentes separados “só de pagamento” nem um portal de autoatendimento de faturas incorporável: baixar o PDF/XML de uma fatura ou atualizar dados fiscais é feito hoje pelo link público da fatura ou dentro do app do Cord, e não como um componente separado do Elements.

Segurança: publishable key ou o seu próprio proxy

Criar orçamentos ou ler o catálogo pelo navegador exige decidir como o seu app conversa com a API: com uma publishable key (pk_live_.../pk_test_..., exposta no cliente, mas com escopo restrito — ela nunca pode ler o seu cadastro de clientes nem mexer no faturamento) ou com o seu próprio proxy (o seu backend chama o Cord com uma chave sk_). O visualizador CordCotizador não exige nenhuma das duas: ele só precisa do token público do orçamento.

Instalação

npm install @flouviahq/elements

Veja Cord Elements para React para o wrapper de React, ou a página do Cord Elements para o Web Component <cord-cotizador> (funciona em qualquer site) e os wrappers de Vue e Framer.