Cord Elements (einbettbare UI-Komponenten)

Cord Elements (@flouviahq/elements) ist die Komponentenbibliothek, mit der Sie den Angebotsrechner von Cord direkt in Ihre Website oder App einbetten, ohne den Kunden auf eine andere Domain zu schicken.

Vorteile

• Weniger Abbrüche: Der Kunde verlässt nie Ihre Domain (z. B. app.ihrunternehmen.de/portal), um ein Angebot anzusehen, zu bestätigen oder zu bezahlen.
• PCI-Konformität: Die Kartenzahlung erfolgt im sicheren iframe des öffentlichen Angebotslinks – sensible Kartendaten berühren nie Ihre Server.

Die zwei tatsächlichen Komponenten

1. CordCotizador – ein iframe mit automatischer Höhe, das ein bereits erstelltes Angebot anzeigt, damit der Kunde es ansehen, bestätigen (unterschreiben) oder bezahlen kann. Es ist derselbe Angebotsrechner, der unter /q/{token} läuft, mit Ihrer Marke über die API appearance (Farben, Schrift, helles/dunkles Design).
2. CordBuilder (oder der Headless-Hook useQuoteBuilder) – stellt ein neues Angebot über Ihre eigene Oberfläche zusammen und legt es an: Kunde, Positionen, Steuern und Summen, berechnet mit derselben Engine, die auch der Server verwendet.

Es gibt keine separaten Komponenten „nur für die Zahlung“ und kein einbettbares Self-Service-Portal für Rechnungen: Das PDF/XML einer Rechnung herunterladen oder Steuerdaten aktualisieren erfolgt heute über den öffentlichen Link der Rechnung oder in der App von Cord, nicht über eine eigene Elements-Komponente.

Sicherheit: Publishable Key oder eigener Proxy

Um Angebote aus dem Browser zu erstellen oder den Katalog zu lesen, müssen Sie entscheiden, wie Ihre App mit der API spricht: mit einem Publishable Key (pk_live_.../pk_test_..., im Client sichtbar, aber mit eng begrenztem Umfang – er kann nie Ihr Kundenverzeichnis lesen oder auf die Rechnungsstellung zugreifen) oder mit Ihrem eigenen Proxy (Ihr Backend ruft Cord mit einem sk_-Schlüssel auf). Der Viewer CordCotizador braucht keines von beiden: Er benötigt nur den öffentlichen token des Angebots.

Installation

npm install @flouviahq/elements

Siehe Cord Elements für React für den React-Wrapper oder die Seite Cord Elements für die Web Component <cord-cotizador> (funktioniert auf jeder Website) und die Wrapper für Vue und Framer.