Votre générateur de devis, dans le site de votre client.

@flouviahq/elements/reactComposants et hooks pour React 17 ou supérieur et Next.js. La directive "use client" est déjà incluse.

• <CordCotizador>Composant

  Affiche un devis existant pour que le client le consulte, l’approuve, le négocie ou le règle. Des callbacks typés pour chaque événement et onStateChange avec l’état en direct.

• <CordInvoice>Composant

  La facture de /i/{token} : solde, statut, lignes et PDF. Le paiement s’ouvre dans une fenêtre Cord et onPaid vous prévient quand elle est réglée.

• <CordBuilder>Composant

  Un formulaire prêt à l’emploi pour créer un devis, avec les devises, les taxes par ligne et les conditions de paiement de votre compte. Composant composé : Header, Config, Items, Notes, Summary et SubmitButton.

• <CordFiscalForm>Composant

  Les données fiscales du destinataire, avec le même validateur que le serveur : l’identifiant fiscal des 12 pays de Cord (SIREN en France, NIF/CIF en Espagne, EIN aux États-Unis…) dans son format officiel et, là où elle existe, avec sa clé de contrôle, ainsi que les champs supplémentaires qu’exige la facture de certains pays.

• <CordProvider>Composant

  Configurez une seule fois : publishableKey ou proxyUrl (jamais les deux), locale es, en, pt, fr ou de, appearance et debug.

• useQuoteBuilder()Hook

  L’état du builder sans UI : lignes avec key, client, devise, totaux ventilés par taux et retenues, validation et builder.submit().

• useCreateQuote()Hook

  Crée un devis via votre proxy ou avec votre pk_ et renvoie son numéro, son jeton et son lien public. Un double clic ne le duplique jamais.

• useCordCatalog()Hook

  Votre catalogue produits. Avec une clé publiable, le serveur masque le coût et la marge.

• useCordClients()Hook

  Votre annuaire clients, en mode proxy uniquement : avec une pk_, il répond clients_require_proxy sans toucher au réseau.

@flouviahq/elementsL’import enregistre les éléments en Shadow DOM : votre CSS ne les casse pas et le leur ne touche pas à votre page. Fonctionne avec Astro, Svelte, Laravel, Rails ou n’importe quel HTML.

• <cord-quote>Composant

  Attributs token, base-url, min-height, appearance et debug. Les événements arrivent sans préfixe : approved, pay, rejected. <cord-cotizador> reste disponible comme alias.

• <cord-invoice>Composant

  La facture intégrée, avec les mêmes attributs. Elle émet en plus paid.

• <cord-fiscal-form>Composant

  Un élément de formulaire natif : dans votre <form>, il fournit les données fiscales et bloque l’envoi tant qu’il reste des erreurs.

• mountCotizador()Fonction

  Monte l’iframe dans l’élément que vous lui passez (document: "invoice" pour une facture) et renvoie un contrôleur avec destroy().

• calculateDocumentTotals()Fonction

  Le même moteur de calcul que Cord utilise côté serveur : taxe par ligne, plusieurs taux et retenues. Votre UI n’affiche jamais un total différent.

• CordErrorClasse

  Chaque erreur porte un status, un code stable, un request_id et une doc_url avec l’explication.

• enableDebug()Fonction

  Une barre de débogage sur votre site, avec les événements, les requêtes et les avertissements. Elle n’apparaît qu’avec des clés pk_test_.

@flouviahq/elements/headlessLe noyau sans framework sur lequel reposent React, Vue et les Web Components. Aucun effet de bord à l’import.

• createQuoteBuilder()Fonction

  État et actions du générateur de devis : addProduct, updateItem, setMoneda, validate et submit, avec abonnement aux changements.

• builder.draftWithAi()Fonction

  Rédige un brouillon de lignes à partir d’un texte, en streaming. Elles arrivent marquées comme suggérées pour que le client les vérifie.

• createCordClient()Fonction

  Client HTTP avec nouvelles tentatives, Idempotency-Key automatique et la configuration de votre compte en cache avec ETag.

• createFiscalForm()Fonction

  Le formulaire fiscal sans UI, avec le validateur d’identifiant fiscal des 12 pays.

/vue · /framer · /webflowDes wrappers natifs pour que chaque plateforme s’y sente chez elle.

• CordCotizador · CordInvoice (Vue)Composant

  Props token, baseUrl, minHeight et appearance ; ils émettent chaque événement (approved, pay, updated, status-changed, paid…) et state avec l’état en direct.

• useCordQuoteBuilder()Hook

  Le builder headless sous forme de composable Vue.

• FramerCordCotizadorComposant

  Code Component avec token et baseUrl modifiables depuis le panneau des propriétés de Framer.

• data-cord-tokenAttribut

  Webflow ou HTML : ajoutez l’attribut à n’importe quel Div Block et le script s’occupe du montage.

• data-cord-documentAttribut

  "invoice" pour afficher une facture au lieu d’un devis.

• data-cord-appearanceAttribut

  Le même objet appearance en JSON : thème, variables, rules et layout.

@flouviahq/node · @flouviahq/cliDes paquets à part pour votre backend et votre terminal. Elements vit dans le navigateur ; votre clé secrète, jamais.

• new Cord(sk)Classe

  @flouviahq/node : l’API complète avec votre sk_ ou rk_. Fonctionne sur Node, Bun, Deno, Cloudflare Workers et Vercel, sans dépendances.

• constructEvent()Fonction

  Vérifie la signature X-Cord-Signature-V1 et son ancienneté, puis renvoie l’événement typé. Un ancien événement rejoué est refusé.

• createElementsProxy()Fonction

  Met en place le mode proxyUrl d’Elements sur votre backend : le navigateur ne voit jamais de clé.

• cord listenFonction

  @flouviahq/cli : reçoit en localhost les webhooks de votre compte de test, signés exactement comme en production.

• cord triggerFonction

  Déclenche n’importe quel événement (quote.approved, invoice.paid…) vers vos endpoints de test.

Événements de l’iframeLes mêmes dans React, Vue, les Web Components et embed.js. Sans domaine autorisé, ils arrivent sans données.

• cord:readyÉvénement

  Chargement terminé : { status, folio, moneda, total }.

• cord:viewedÉvénement

  Le client a ouvert le document.

• cord:approvedÉvénement

  Le client a approuvé et signé : { signed_by, hash }.

• cord:signedÉvénement

  Émis en même temps qu’approved, pour la même action : ne le comptez pas deux fois.

• cord:rejectedÉvénement

  Le client a refusé : { comentario }.

• cord:messageÉvénement

  Le client a écrit ou fait une contre-proposition : { action, mensaje, propuesta }.

• cord:item_commentÉvénement

  Le client a commenté une ligne : { item_id, mensaje }.

• cord:payÉvénement

  Le client a cliqué sur payer. Cord a déjà ouvert le paiement dans sa fenêtre ; { url } n’est qu’une notification.

• cord:updatedÉvénement

  Le commercial a modifié le devis pendant qu’il était ouvert : { subtotal, total, moneda }.

• cord:status_changedÉvénement

  Le statut a changé : { status }.

• cord:paidÉvénement

  Factures uniquement : elle est réglée. { folio, moneda, saldo }.