Cord Elements (composants d’interface intégrables)

Cord Elements (@flouviahq/elements) est la bibliothèque de composants qui vous permet d’intégrer le générateur de devis de Cord directement dans votre site ou votre application, sans envoyer le client vers un autre domaine.

Avantages

• Moins d’abandons : le client ne quitte jamais votre domaine (par exemple app.votreentreprise.com/portal) pour consulter, approuver ou payer un devis.
• Conformité PCI : le paiement par carte a lieu dans l’iframe sécurisée du lien public du devis — les données sensibles de la carte ne touchent jamais vos serveurs.

Les deux composants réels

1. CordCotizador — une iframe à hauteur automatique qui affiche un devis déjà créé pour que le client le consulte, l’approuve (signature) ou le paie. C’est le même générateur de devis que celui de /q/{token}, personnalisable à vos couleurs via l’API appearance (couleurs, typographie, thème clair ou sombre).
2. CordBuilder (ou le hook headless useQuoteBuilder) — prépare et crée un nouveau devis depuis votre propre interface : client, lignes, taxes et totaux calculés avec le même moteur que celui du serveur.

Il n’existe ni composant distinct « paiement uniquement » ni portail libre-service de factures intégrable : le téléchargement du PDF/XML d’une facture ou la mise à jour des informations fiscales se font aujourd’hui depuis le lien public de la facture ou dans l’application Cord, et non par un composant Elements distinct.

Sécurité : clé publiable ou votre propre proxy

Créer des devis ou lire le catalogue depuis le navigateur exige de décider comment votre application communique avec l’API : avec une clé publiable (pk_live_.../pk_test_..., exposée côté client mais à la portée restreinte — elle ne peut jamais lire votre répertoire clients ni toucher à la facturation) ou avec votre propre proxy (votre backend appelle Cord avec une clé sk_). Le lecteur CordCotizador n’a besoin ni de l’une ni de l’autre : il lui suffit du token public du devis.

Installation

npm install @flouviahq/elements

Voir Cord Elements pour React pour le wrapper React, ou la page Cord Elements pour le Web Component <cord-cotizador> (fonctionne sur n’importe quel site) et les wrappers Vue et Framer.