Your quote builder, inside your client's site.

@flouviahq/elements/reactComponents and hooks for React 17 or later and Next.js. The "use client" directive is already included.

• <CordCotizador>Component

  Shows an existing quote so the client can view, approve, negotiate or pay. Typed callbacks for every event and onStateChange with the live state.

• <CordInvoice>Component

  The invoice at /i/{token}: balance, status, line items and PDF. Payment opens in a Cord window and onPaid tells you when it is settled.

• <CordBuilder>Component

  A ready-made form to build a new quote, with your account's currencies, per-line taxes and payment terms. Compound component: Header, Config, Items, Notes, Summary and SubmitButton.

• <CordFiscalForm>Component

  Recipient tax details with the same validator as the server: the tax ID of all 12 Cord countries (EIN in the US, VAT number in the UK, Business Number in Canada…) in its official format and, where one exists, with its check digit, plus the extra fields some countries’ invoices require.

• <CordProvider>Component

  Configure once: publishableKey or proxyUrl (never both), locale es, en, pt, fr or de, appearance and debug.

• useQuoteBuilder()Hook

  The builder state with no UI: keyed line items, client, currency, totals with a per-rate breakdown and withholdings, validation and builder.submit().

• useCreateQuote()Hook

  Creates a quote through your proxy or with your pk_ and returns its number, token and public link. A double click never duplicates it.

• useCordCatalog()Hook

  Your product catalog. The server hides cost and margin from a publishable key.

• useCordClients()Hook

  Your client directory, proxy mode only: with a pk_ it answers clients_require_proxy without touching the network.

@flouviahq/elementsImporting it registers the elements in Shadow DOM: your CSS can't break them and theirs never touches your page. Works in Astro, Svelte, Laravel, Rails or any HTML.

• <cord-quote>Component

  Attributes token, base-url, min-height, appearance and debug. Events arrive without the prefix: approved, pay, rejected. <cord-cotizador> still works as an alias.

• <cord-invoice>Component

  The embedded invoice with the same attributes. It also emits paid.

• <cord-fiscal-form>Component

  A native form element: inside your <form> it contributes the tax details and blocks submission while there are errors.

• mountCotizador()Function

  Mounts the iframe in the element you pass (document: "invoice" for an invoice) and returns a controller with destroy().

• calculateDocumentTotals()Function

  The same totals engine Cord runs on the server: per-line tax, multiple rates and withholdings. Your own UI never shows a different total.

• CordErrorClass

  Every error carries a status, a stable code, its request_id and a doc_url with the explanation.

• enableDebug()Function

  A debug bar on your site with events, requests and warnings. It only shows with pk_test_ keys.

@flouviahq/elements/headlessThe framework-free core React, Vue and the Web Components are built on. No side effects on import.

• createQuoteBuilder()Function

  Quote builder state and actions: addProduct, updateItem, setMoneda, validate and submit, with change subscriptions.

• builder.draftWithAi()Function

  Drafts line items from text, streamed. They arrive marked as suggested so the client reviews them.

• createCordClient()Function

  HTTP client with retries, an automatic Idempotency-Key and your account configuration cached with ETag.

• createFiscalForm()Function

  The tax form with no UI, with the tax ID validator for all 12 countries.

/vue · /framer · /webflowNative wrappers so each platform feels at home.

• CordCotizador · CordInvoice (Vue)Component

  Props token, baseUrl, minHeight and appearance; they emit every event (approved, pay, updated, status-changed, paid…) and state with the live state.

• useCordQuoteBuilder()Hook

  The headless builder as a Vue composable.

• FramerCordCotizadorComponent

  A Code Component with token and baseUrl editable from the Framer properties panel.

• data-cord-tokenAttribute

  Webflow or HTML: add the attribute to any Div Block and the script mounts it on its own.

• data-cord-documentAttribute

  "invoice" to show an invoice instead of a quote.

• data-cord-appearanceAttribute

  The same appearance object as JSON: theme, variables, rules and layout.

@flouviahq/node · @flouviahq/cliSeparate packages for your backend and your terminal. Elements lives in the browser; your secret key never does.

• new Cord(sk)Class

  @flouviahq/node: the full API with your sk_ or rk_. Runs on Node, Bun, Deno, Cloudflare Workers and Vercel, with no dependencies.

• constructEvent()Function

  Verifies the X-Cord-Signature-V1 signature and its age, and returns the typed event. A replayed old event is rejected.

• createElementsProxy()Function

  Mounts Elements proxyUrl mode on your backend: the browser never sees a key.

• cord listenFunction

  @flouviahq/cli: receives your test account webhooks on localhost, signed exactly as in production.

• cord triggerFunction

  Fires any event (quote.approved, invoice.paid…) at your test endpoints.

Iframe eventsThe same in React, Vue, the Web Components and embed.js. Without authorized domains they arrive without data.

• cord:readyEvent

  Finished loading: { status, folio, moneda, total }.

• cord:viewedEvent

  The client opened the document.

• cord:approvedEvent

  Approved and signed: { signed_by, hash }.

• cord:signedEvent

  Fires together with approved, for the same action: don't count it twice.

• cord:rejectedEvent

  Rejected it: { comentario }.

• cord:messageEvent

  Wrote or made a counteroffer: { action, mensaje, propuesta }.

• cord:item_commentEvent

  Commented on a line item: { item_id, mensaje }.

• cord:payEvent

  Hit pay. Cord already opened the payment in its window; { url } is a notice only.

• cord:updatedEvent

  The sales rep changed the quote while it was open: { subtotal, total, moneda }.

• cord:status_changedEvent

  The status changed: { status }.

• cord:paidEvent

  Invoices only: it has been settled. { folio, moneda, saldo }.