Cord Elements pour React

Côté frontend, Cord n’expose pas de SDK de formulaires de paiement autonomes : le paiement par carte est traité dans l’iframe sécurisé du lien public du devis. Ce que nous publions, en revanche, c’est Cord Elements (@flouviahq/elements), avec deux composants pour React : un visualiseur de devis déjà créés et un builder pour créer de nouveaux devis depuis votre propre interface.

Installation

npm install @flouviahq/elements

CordProvider : clé publiable ou votre propre proxy

Pour créer des devis ou lire le catalogue depuis le navigateur, enveloppez votre application dans CordProvider. Il s’agit d’une union discriminée : vous passez publishableKey ou proxyUrl, jamais les deux.

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

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

Avec publishableKey (pk_live_.../pk_test_..., générée dans l’onglet Clés API du Workbench des développeurs), le navigateur peut créer des devis et lire directement le catalogue de produits ; il ne peut pas lire votre répertoire de clients (useCordClients() renvoie une CordError avec code: 'clients_require_proxy') ni accéder à la facturation ou au recouvrement. Si vous en avez besoin, utilisez proxyUrl en pointant vers une route de votre backend qui appelle Cord avec une clé sk_.

Consulter, approuver ou payer un devis existant

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

function MyPortal({ token }) {
  return (
    <CordCotizador
      token={token}
      onApproved={(e) => console.log('Approved, signed by', e.signed_by)}
      onPay={(e) => console.log('Payment opened at', e.url)}
      onRejected={(e) => console.log('Rejected:', e.comentario)}
    />
  );
}

CordCotizador monte le même générateur de devis que /q dans un iframe sécurisé à hauteur automatique ; il fonctionne sans CordProvider si vous avez seulement besoin d’afficher ou d’approuver un devis (sans en créer de nouveaux ni lire le catalogue).

Créer un nouveau devis

CordBuilder fournit une interface prête à l’emploi, avec des classes .cord-* stables que vous pouvez surcharger avec votre propre CSS :

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

function NewQuote() {
  return <CordBuilder onQuoteCreated={(q) => console.log(q.folio, q.link_publico)} />;
}

Si vous préférez votre propre interface, useQuoteBuilder() fournit le même état (lignes, client, totaux, handleSubmit) sous forme de hook headless, sans aucun composant visuel.

Événements disponibles

CordCotizador émet onReady, onViewed, onApproved, onSigned (en même temps que onApproved, pour la même action), onRejected, onMessage, onItemComment et onPay. Utilisez-les pour réagir dans votre application (rediriger, afficher un message de remerciement, enregistrer des données d’analyse, etc.).

Autres frameworks

Le même paquet inclut le Web Component <cord-cotizador> (Astro, Vue, Svelte, PHP, tout HTML) ainsi que des wrappers pour Vue et Framer. Pour les sites sans build (WordPress, Webflow), utilisez le loader d’une ligne embed.js. Consultez la page Cord Elements pour tous les extraits de code.