React and Next.js

Powerful headless primitives and pre-styled components for your React frontend.

Installation

Make sure you have installed the package in your project.

npm install @flouviahq/elements

The Provider: <CordProvider>

To use any React component or hook provided by the SDK, your application (or the portion of your app that uses the quoter) must be wrapped in a CordProvider.

There are two security modes to initialize the provider: Publishable and Proxy. These modes are mutually exclusive; you cannot pass both properties at the same time.

Publishable Mode (Direct frontend)

Use this mode if you want the React client to communicate directly with the Cord API. Publishable Keys (pk_live_... / pk_test_...) are highly restricted for security: they can create quotes and read the product catalog (omitting your cost), but they will never be able to read your CRM clients directory.

// app/layout.tsx
import { CordProvider } from '@flouviahq/elements/react';

export default function Layout({ children }) {
  return (
    <CordProvider publishableKey={process.env.NEXT_PUBLIC_CORD_PUBLISHABLE_KEY!}>
      {children}
    </CordProvider>
  );
}

Proxy Mode (Backend intermediary)

Use this mode if you do not want to expose any key in your client or if you need functionalities that require secret keys (like reading the CRM). The SDK will send requests to the proxy route you indicate, and your backend will be responsible for forwarding them to the Cord API using the Secret Key (sk_live_...).

<CordProvider proxyUrl="/api/cord/proxy">
  {children}
</CordProvider>

---

<CordCotizador>: Iframe Viewer

If you already have a quote token and just want to display it for the client to approve and pay, use the native viewer. This component renders an injected iframe under your brand securely.

import { CordCotizador } from '@flouviahq/elements/react';

function QuotePage({ token }: { token: string }) {
  return (
    <CordCotizador
      token={token}
      onApproved={(detail) => console.log('Approved by', detail.signed_by)}
      onPay={(detail) => window.location.assign(detail.url)}
    />
  );
}

---

<CordBuilder>: Quote Creator (Compound)

If you want to build an interface to assemble new quotes and take advantage of the SDK’s standardized interface, use the CordBuilder. It utilizes a compound components pattern, so you can reorder or omit parts of the form.

import { CordBuilder } from '@flouviahq/elements/react';

function NewQuote() {
  return (
    <CordBuilder onQuoteCreated={(q) => console.log('Created:', q.folio)}>
      <CordBuilder.Header />
      <CordBuilder.Items className="my-tailwind-class" />
      <CordBuilder.Summary />
      <CordBuilder.SubmitButton className="btn btn-primary" />
    </CordBuilder>
  );
}

The components inject stable CSS classes (.cord-*) to facilitate modification. However, Cord never applies inline styles, ensuring your custom CSS (like Tailwind or CSS Modules) always takes precedence without having to use !important.

---

useQuoteBuilder: Headless UI

If <CordBuilder> doesn’t adapt to the exact design needs of your interface, you can extract the entire state engine using the useQuoteBuilder hook and render the buttons, inputs, and tables entirely on your own.

import { useQuoteBuilder } from '@flouviahq/elements/react';

function MyOwnBuilder() {
  const {
    items, updateItem, removeItem, subtotal, iva, total,
    cliente, setCliente, notas, setNotas,
    handleSubmit, isLoading
  } = useQuoteBuilder({
    catalog: myLocalProducts, 
    onQuoteCreated: (q) => console.log('Link:', q.link_publico),
  });

  return (
    <form onSubmit={handleSubmit}>
      {/* Build the interface 100% yours using Cord's state */}
      <h2>Total: ${total}</h2>
      <button type="submit" disabled={isLoading}>Create</button>
    </form>
  );
}