Copier pour l’IA

React et Next.js

Des primitives headless puissantes et des composants préstylés pour votre frontend React.

Installation

Assurez-vous d’avoir installé le paquet dans votre projet.

npm install @flouviahq/elements

Le provider : <CordProvider>

Pour utiliser n’importe quel composant ou hook React fourni par le SDK, votre application (ou la partie de votre application qui utilise le générateur de devis) doit être enveloppée dans un CordProvider.

Il existe deux modes de sécurité pour initialiser le provider : Publishable et Proxy. Ces modes s’excluent mutuellement ; vous ne pouvez pas passer les deux propriétés en même temps.

Mode Publishable (frontend direct)

Utilisez ce mode si vous souhaitez que le client React communique directement avec l’API de Cord. Les clés publiables (pk_live_... / pk_test_...) sont fortement restreintes par sécurité : elles peuvent créer des devis et lire le catalogue de produits (sans votre coût), mais elles ne pourront jamais lire votre annuaire de clients CRM.

// 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>
  );
}

Mode Proxy (backend intermédiaire)

Utilisez ce mode si vous ne voulez exposer aucune clé côté client ou si vous avez besoin de fonctionnalités qui exigent des clés secrètes (comme la lecture du CRM). Le SDK enverra les requêtes à la route de proxy que vous indiquez, et votre backend se chargera de les transmettre à l’API de Cord avec la clé secrète (sk_live_...).

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

---

<CordCotizador> : visionneuse en iframe

Si vous disposez déjà du token d’un devis et souhaitez simplement l’afficher pour que le client l’approuve et le paie, utilisez la visionneuse native. Ce composant affiche de façon sécurisée une iframe injectée sous votre marque.

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) => console.log('Payment opened at', detail.url)}
    />
  );
}

<CordInvoice>

La même chose pour une facture (/i/{token}). Il accepte les mêmes props et ajoute onPaid :

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

<CordInvoice token={invoiceToken} onPaid={(d) => console.log('Paid', d.folio)} />

En Vue, CordInvoice de @flouviahq/elements/vue émet paid.

---

<CordBuilder> : créateur de devis (compound)

Si vous souhaitez construire une interface de création de devis tout en profitant de l’interface standardisée du SDK, utilisez CordBuilder. Il suit un modèle de composants composés (compound pattern) : vous pouvez donc réordonner les parties du formulaire ou vous en passer.

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>
  );
}

Les composants injectent des classes CSS stables (.cord-*) pour faciliter leur personnalisation. Cord n’applique toutefois jamais de styles inline, ce qui garantit que votre CSS personnalisé (comme Tailwind ou CSS Modules) a toujours la priorité sans avoir à utiliser !important.

---

useQuoteBuilder : interface headless

Si <CordBuilder> ne correspond pas exactement aux besoins de design de votre interface, vous pouvez extraire tout le moteur d’état avec le hook useQuoteBuilder et afficher les boutons, les champs et les tableaux entièrement par vous-même.

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}>
      {/* Construisez une interface 100 % à vous avec l’état de Cord */}
      <h2>Total: ${total}</h2>
      <button type="submit" disabled={isLoading}>Create</button>
    </form>
  );
}