Ihr Angebotsrechner, direkt auf der Website Ihres Kunden.

@flouviahq/elements/reactKomponenten und Hooks für React 17 oder neuer und Next.js. Die Direktive "use client" ist bereits enthalten.

• <CordCotizador>Komponente

  Zeigt ein bestehendes Angebot, damit der Kunde es ansehen, bestätigen, verhandeln oder bezahlen kann. Typisierte Callbacks für jedes Ereignis und onStateChange mit dem aktuellen Zustand.

• <CordInvoice>Komponente

  Die Rechnung unter /i/{token}: offener Betrag, Status, Positionen und PDF. Die Zahlung öffnet sich in einem Cord-Fenster, und onPaid meldet, sobald sie beglichen ist.

• <CordBuilder>Komponente

  Ein fertiges Formular für neue Angebote, mit den Währungen, Steuern pro Position und Zahlungsbedingungen Ihres Kontos. Compound Component aus Header, Config, Items, Notes, Summary und SubmitButton.

• <CordFiscalForm>Komponente

  Steuerdaten des Empfängers mit demselben Validator wie auf dem Server: die Steuernummer aller 12 Cord-Länder (USt-IdNr. in Deutschland, NIF/CIF in Spanien, EIN in den USA …) im offiziellen Format und, wo es eine gibt, mit Prüfziffer, dazu die zusätzlichen Felder, die die Rechnung mancher Länder verlangt.

• <CordProvider>Komponente

  Einmal konfigurieren: publishableKey oder proxyUrl (nie beides), locale es, en, pt, fr oder de, appearance und debug.

• useQuoteBuilder()Hook

  Der Builder-Zustand ohne UI: Positionen mit key, Kunde, Währung, Summen mit Aufschlüsselung nach Steuersatz und Einbehalten, Validierung und builder.submit().

• useCreateQuote()Hook

  Erstellt ein Angebot über Ihren Proxy oder mit Ihrem pk_ und liefert Nummer, Token und öffentlichen Link. Ein Doppelklick erzeugt kein Duplikat.

• useCordCatalog()Hook

  Ihr Produktkatalog. Bei einem öffentlichen Schlüssel blendet der Server Kosten und Marge aus.

• useCordClients()Hook

  Ihr Kundenverzeichnis, nur im Proxy-Modus: Mit einem pk_ antwortet es ohne Netzwerkanfrage mit clients_require_proxy.

@flouviahq/elementsDer Import registriert die Elemente im Shadow DOM: Ihr CSS beeinträchtigt sie nicht, und deren CSS wirkt sich nicht auf Ihre Seite aus. Funktioniert mit Astro, Svelte, Laravel, Rails und beliebigem HTML.

• <cord-quote>Komponente

  Attribute token, base-url, min-height, appearance und debug. Ereignisse kommen ohne Präfix an: approved, pay, rejected. <cord-cotizador> bleibt als Alias erhalten.

• <cord-invoice>Komponente

  Die eingebettete Rechnung mit denselben Attributen. Sendet zusätzlich paid.

• <cord-fiscal-form>Komponente

  Ein natives Formularelement: In Ihrem <form> liefert es die Steuerdaten und blockiert das Absenden, solange Fehler vorliegen.

• mountCotizador()Funktion

  Bindet das iframe in das übergebene Element ein (document: "invoice" für eine Rechnung) und gibt einen Controller mit destroy() zurück.

• calculateDocumentTotals()Funktion

  Dieselbe Summen-Engine, die Cord auf dem Server nutzt: Steuer pro Position, mehrere Sätze und Einbehalte. Ihre UI zeigt nie eine abweichende Summe.

• CordErrorKlasse

  Jeder Fehler enthält status, einen stabilen code, request_id und doc_url mit der Erklärung.

• enableDebug()Funktion

  Eine Debug-Leiste auf Ihrer Website mit Ereignissen, Anfragen und Warnungen. Erscheint nur mit pk_test_-Schlüsseln.

@flouviahq/elements/headlessDer frameworkunabhängige Kern, auf dem React, Vue und die Web Components aufbauen. Keine Seiteneffekte beim Import.

• createQuoteBuilder()Funktion

  Zustand und Aktionen des Angebotsrechners: addProduct, updateItem, setMoneda, validate und submit; Änderungen lassen sich abonnieren.

• builder.draftWithAi()Funktion

  Erstellt aus Text einen Entwurf der Positionen, per Streaming. Sie kommen als vorgeschlagen markiert an, damit der Kunde sie prüft.

• createCordClient()Funktion

  HTTP-Client mit Wiederholungsversuchen, automatischem Idempotency-Key und der Konfiguration Ihres Kontos im Cache per ETag.

• createFiscalForm()Funktion

  Das Steuerformular ohne UI, mit dem Steuernummer-Validator für alle 12 Länder.

/vue · /framer · /webflowNative Wrapper, damit es sich auf jeder Plattform wie zu Hause anfühlt.

• CordCotizador · CordInvoice (Vue)Komponente

  Props token, baseUrl, minHeight und appearance; sie senden jedes Ereignis (approved, pay, updated, status-changed, paid …) und state mit dem aktuellen Zustand.

• useCordQuoteBuilder()Hook

  Der Headless-Builder als Vue-Composable.

• FramerCordCotizadorKomponente

  Code Component mit token und baseUrl, bearbeitbar im Eigenschaftenbereich von Framer.

• data-cord-tokenAttribut

  Webflow oder HTML: Fügen Sie das Attribut einem beliebigen Div Block hinzu, den Rest erledigt das Skript.

• data-cord-documentAttribut

  "invoice", um statt eines Angebots eine Rechnung anzuzeigen.

• data-cord-appearanceAttribut

  Dasselbe appearance-Objekt als JSON: Design, Variablen, rules und layout.

@flouviahq/node · @flouviahq/cliSeparate Pakete für Ihr Backend und Ihr Terminal. Elements läuft im Browser, Ihr Secret Key nie.

• new Cord(sk)Klasse

  @flouviahq/node: die vollständige API mit Ihrem sk_ oder rk_. Läuft auf Node, Bun, Deno, Cloudflare Workers und Vercel, ohne Abhängigkeiten.

• constructEvent()Funktion

  Prüft die Signatur X-Cord-Signature-V1 und ihr Alter und gibt das typisierte Ereignis zurück. Ein veralteter, erneut gesendeter Webhook wird abgelehnt.

• createElementsProxy()Funktion

  Richtet den proxyUrl-Modus von Elements in Ihrem Backend ein: Der Browser sieht nie einen Schlüssel.

• cord listenFunktion

  @flouviahq/cli: empfängt die Webhooks Ihres Testkontos auf localhost, genauso signiert wie in Produktion.

• cord triggerFunktion

  Sendet ein beliebiges Ereignis (quote.approved, invoice.paid …) an Ihre Test-Endpoints.

iframe-EreignisseDieselben in React, Vue, den Web Components und embed.js. Ohne autorisierte Domains kommen sie ohne Daten an.

• cord:readyEreignis

  Fertig geladen: { status, folio, moneda, total }.

• cord:viewedEreignis

  Der Kunde hat das Dokument geöffnet.

• cord:approvedEreignis

  Bestätigt und unterzeichnet: { signed_by, hash }.

• cord:signedEreignis

  Wird zusammen mit approved für dieselbe Aktion gesendet: nicht doppelt zählen.

• cord:rejectedEreignis

  Abgelehnt: { comentario }.

• cord:messageEreignis

  Hat geschrieben oder ein Gegenangebot gemacht: { action, mensaje, propuesta }.

• cord:item_commentEreignis

  Hat eine Position kommentiert: { item_id, mensaje }.

• cord:payEreignis

  Hat auf Bezahlen geklickt. Cord hat die Zahlung bereits im eigenen Fenster geöffnet; { url } ist nur ein Hinweis.

• cord:updatedEreignis

  Der Vertriebsmitarbeiter hat das Angebot geändert, während es geöffnet war: { subtotal, total, moneda }.

• cord:status_changedEreignis

  Der Status hat sich geändert: { status }.

• cord:paidEreignis

  Nur bei Rechnungen: vollständig bezahlt. { folio, moneda, saldo }.