Headless Elements

@flouviahq/elements/headless is the core of Cord Elements. <CordBuilder>, the React and Vue hooks and the Web Components all consume this same core. Importing it doesn’t register elements or touch the DOM: only state, validation and network. Use it when you want your own interface, in any framework or none.

npm install @flouviahq/elements

import { createCordClient, createQuoteBuilder, createFiscalForm } from '@flouviahq/elements/headless';

createCordClient

const client = createCordClient({ publishableKey: 'pk_test_...' });
// or, with your backend in between:
const viaProxy = createCordClient({ proxyUrl: '/api/cord' });

Pass one of the two: publishableKey (a pk_ key, which can only use the Elements routes) or proxyUrl (the base of your server proxy, shaped like /api/v1). With both, or with an sk_ key, it throws.

const config = await client.config();
console.log(config.org.moneda, config.impuestos.etiqueta, config.monedas);

createQuoteBuilder

const builder = createQuoteBuilder({
  client,
  onCreated: (quote) => console.log(quote.folio, quote.link_publico),
});

const unsubscribe = builder.subscribe((state) => render(state));

builder.setCliente({ empresa: 'Acme', email: 'purchasing@acme.com' });
const key = builder.addItem({ descripcion: 'Installation', cantidad: 1, precio_unitario: 12500 });
builder.updateItem(key, { cantidad: 2 });

const quote = await builder.submit(); // null if there are errors or it failed

On creation, the builder loads the configuration and catalog on its own (status goes from loading to ready). Every change recomputes totals with the same engine as the server, and each line’s rate comes from the organization’s real tax catalog.

submit() uses a single Idempotency-Key per submission attempt: a double click or a network retry never creates two quotes. The key is renewed as soon as you change anything.

The state (builder.get()) carries:

For your analytics, onEvent(event, data) receives builder.loaded, builder.item_added, builder.item_removed, builder.submitted, builder.created, builder.failed and builder.ai_drafted. The names are stable across versions.

createFiscalForm

const fiscal = createFiscalForm({ country: 'MX' });

fiscal.subscribe((s) => {
  console.log(s.visibleErrors, s.regimenes.map((r) => r.codigo));
});

fiscal.set('tax_id', 'EKU9003173C9');
fiscal.touch('tax_id');
const recipient = fiscal.submit(); // the normalized recipient, or null

builder.setFiscal(recipient);

The state carries values, touched, validation (with ok, value, errors, warnings and persona), visibleErrors, the regimenes and usosCfdi that apply to the RFC type, and the country’s fields. The rules are in Tax form.

With your framework

The store follows the get() + subscribe() contract, so it plugs into any reactive system:

import { useSyncExternalStore } from 'react';

function useBuilderState(builder) {
  return useSyncExternalStore(builder.subscribe, builder.get, builder.get);
}

import { useCordQuoteBuilder, useCordStore } from '@flouviahq/elements/vue';
// useCordStore(store) returns a ShallowRef that follows the store.

const total = document.querySelector('#total');
builder.subscribe((s) => {
  total.textContent = new Intl.NumberFormat(s.config?.org.locale ?? 'en', {
    style: 'currency',
    currency: s.moneda || 'USD',
  }).format(s.totals.total);
});

Live state of an embedded quote

reduceQuoteView(state, event) turns the events relayed by <cord-quote>’s iframe into a state (ready, status, folio, moneda, total, approved, rejected, paid, signedBy, lastEvent). It’s what’s behind the Web Component’s state property and statechange event; see Web Components.