Tu cotizador, dentro del sitio de tu cliente.

@flouviahq/elements/reactComponentes y hooks para React 17 o superior y Next.js. Ya trae la directiva "use client".

• <CordCotizador>Componente

  Muestra una cotización ya creada para que el cliente la vea, apruebe, negocie o pague. Callbacks tipados para cada evento y onStateChange con el estado en vivo.

• <CordInvoice>Componente

  La factura de /i/{token}: saldo, estado, partidas y PDF. El pago se abre en una ventana de Cord y onPaid avisa cuando se salda.

• <CordBuilder>Componente

  Formulario listo para armar una cotización nueva, con las divisas, impuestos por línea y términos de tu cuenta. Compuesto: Header, Config, Items, Notes, Summary y SubmitButton.

• <CordFiscalForm>Componente

  Datos fiscales del receptor con el mismo validador que el servidor: el identificador fiscal de los 12 países de Cord (NIF/CIF en España, EIN en EE. UU., NIT en Colombia, CUIT en Argentina…) y, en México, el RFC con su dígito verificador, el régimen y el uso del CFDI.

• <CordProvider>Componente

  Configura una vez: publishableKey o proxyUrl (nunca los dos), locale es, en, pt, fr o de, appearance y debug.

• useQuoteBuilder()Hook

  El estado del builder sin UI: partidas con key, cliente, moneda, totales con desglose por tasa y retenciones, validación y builder.submit().

• useCreateQuote()Hook

  Crea una cotización por tu proxy o con tu pk_ y te devuelve folio, token y link público. Un doble clic no la duplica.

• useCordCatalog()Hook

  Tu catálogo de productos. El servidor oculta costo y margen a una llave pública.

• useCordClients()Hook

  Tu directorio de clientes, sólo en modo proxy: con una pk_ responde clients_require_proxy sin tocar la red.

@flouviahq/elementsImportarlo registra los elementos en Shadow DOM: tu CSS no los rompe y el suyo no toca tu página. Funciona en Astro, Svelte, Laravel, Rails o cualquier HTML.

• <cord-quote>Componente

  Atributos token, base-url, min-height, appearance y debug. Los eventos llegan sin el prefijo: approved, pay, rejected. <cord-cotizador> sigue como alias.

• <cord-invoice>Componente

  La factura embebida con los mismos atributos. Emite además paid.

• <cord-fiscal-form>Componente

  Elemento de formulario nativo: dentro de tu <form> aporta los datos fiscales y bloquea el envío mientras haya errores.

• mountCotizador()Función

  Monta el iframe en el elemento que le pases (document: "invoice" para una factura) y devuelve un controlador con destroy().

• calculateDocumentTotals()Función

  El mismo motor de totales que Cord usa en servidor: impuesto por línea, varias tasas y retenciones. Tu UI nunca muestra un total distinto.

• CordErrorClase

  Todo error trae status, un code estable, request_id y doc_url con la explicación.

• enableDebug()Función

  Barra de depuración en tu sitio con eventos, peticiones y avisos. Solo aparece con llaves pk_test_.

@flouviahq/elements/headlessEl núcleo sin framework sobre el que están hechos React, Vue y los Web Components. Sin efectos al importar.

• createQuoteBuilder()Función

  Estado y acciones del cotizador: addProduct, updateItem, setMoneda, validate y submit, con suscripción a cambios.

• builder.draftWithAi()Función

  Arma un borrador de partidas desde texto, en streaming. Llegan marcadas como sugeridas para que el cliente las revise.

• createCordClient()Función

  Cliente HTTP con reintentos, Idempotency-Key automática y la configuración de tu cuenta en caché con ETag.

• createFiscalForm()Función

  El formulario fiscal sin UI, con el validador del identificador fiscal de los 12 países y los catálogos del SAT para México.

/vue · /framer · /webflowWrappers nativos para que cada plataforma lo sienta propio.

• CordCotizador · CordInvoice (Vue)Componente

  Props token, baseUrl, minHeight y appearance; emiten cada evento (approved, pay, updated, status-changed, paid…) y state con el estado en vivo.

• useCordQuoteBuilder()Hook

  El builder headless como composable de Vue.

• FramerCordCotizadorComponente

  Code Component con token y baseUrl editables desde el panel de propiedades de Framer.

• data-cord-tokenAtributo

  Webflow o HTML: agrega el atributo a cualquier Div Block y el script lo monta solo.

• data-cord-documentAtributo

  "invoice" para mostrar una factura en vez de una cotización.

• data-cord-appearanceAtributo

  El mismo objeto appearance en JSON: tema, variables, rules y layout.

@flouviahq/node · @flouviahq/cliPaquetes aparte para tu backend y tu terminal. Elements vive en el navegador; tu secret key, nunca.

• new Cord(sk)Clase

  @flouviahq/node: la API completa con tu sk_ o rk_. Corre en Node, Bun, Deno, Cloudflare Workers y Vercel, sin dependencias.

• constructEvent()Función

  Verifica la firma X-Cord-Signature-V1 y su antigüedad, y te devuelve el evento tipado. Un aviso viejo reenviado se rechaza.

• createElementsProxy()Función

  Monta el modo proxyUrl de Elements en tu backend: el navegador nunca ve una llave.

• cord listenFunción

  @flouviahq/cli: recibe en localhost los webhooks de tu cuenta de prueba, firmados igual que en producción.

• cord triggerFunción

  Dispara cualquier evento (quote.approved, invoice.paid…) a tus endpoints de prueba.

Eventos del iframeLos mismos en React, Vue, los Web Components y embed.js. Sin dominios autorizados llegan sin datos.

• cord:readyEvento

  Terminó de cargar: { status, folio, moneda, total }.

• cord:viewedEvento

  El cliente abrió el documento.

• cord:approvedEvento

  Aprobó y firmó: { signed_by, hash }.

• cord:signedEvento

  Se emite junto con approved, por la misma acción: no lo cuentes dos veces.

• cord:rejectedEvento

  La rechazó: { comentario }.

• cord:messageEvento

  Escribió o hizo una contraoferta: { action, mensaje, propuesta }.

• cord:item_commentEvento

  Comentó una partida: { item_id, mensaje }.

• cord:payEvento

  Pulsó pagar. Cord ya abrió el cobro en su ventana; { url } es solo un aviso.

• cord:updatedEvento

  El vendedor cambió la cotización mientras estaba abierta: { subtotal, total, moneda }.

• cord:status_changedEvento

  Cambió el estado: { status }.

• cord:paidEvento

  Solo factura: quedó saldada. { folio, moneda, saldo }.