Für KI kopieren

React und Next.js

Leistungsfähige Headless-Primitive und vorgestaltete Komponenten für Ihr React-Frontend.

Installation

Stellen Sie sicher, dass das Paket in Ihrem Projekt installiert ist.

npm install @flouviahq/elements

Der Provider: <CordProvider>

Um eine Komponente oder einen Hook für React aus dem SDK zu verwenden, muss Ihre Anwendung (oder der Teil Ihrer App, der den Angebotsrechner nutzt) von einem CordProvider umschlossen sein.

Es gibt zwei Sicherheitsmodi, um den Provider zu initialisieren: Publishable und Proxy. Diese Modi schließen sich gegenseitig aus; Sie können nicht beide Eigenschaften gleichzeitig übergeben.

Publishable-Modus (direkt im Frontend)

Verwenden Sie diesen Modus, wenn der React-Client direkt mit der API von Cord kommunizieren soll. Veröffentlichbare Schlüssel (pk_live_... / pk_test_...) sind aus Sicherheitsgründen stark eingeschränkt: Sie können Angebote erstellen und den Produktkatalog lesen (ohne Ihre Kosten), aber sie können niemals Ihr CRM-Kundenverzeichnis lesen.

// app/layout.tsx
import { CordProvider } from '@flouviahq/elements/react';

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

Proxy-Modus (Backend als Vermittler)

Verwenden Sie diesen Modus, wenn Sie keinen Schlüssel in Ihrem Client offenlegen möchten oder Funktionen brauchen, die geheime Schlüssel erfordern (zum Beispiel das CRM lesen). Das SDK sendet die Anfragen an die Proxy-Route, die Sie angeben, und Ihr Backend leitet sie mit dem geheimen Schlüssel (sk_live_...) an die API von Cord weiter.

<CordProvider proxyUrl="/api/cord/proxy">
  {children}
</CordProvider>

---

<CordCotizador>: iframe-Viewer

Wenn Sie bereits das token eines Angebots haben und es nur anzeigen möchten, damit der Kunde es bestätigt und bezahlt, verwenden Sie den nativen Viewer. Diese Komponente rendert sicher ein eingebettetes iframe unter Ihrer Marke.

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

function QuotePage({ token }: { token: string }) {
  return (
    <CordCotizador
      token={token}
      onApproved={(detail) => console.log('Approved by', detail.signed_by)}
      onPay={(detail) => console.log('Payment opened at', detail.url)}
    />
  );
}

<CordInvoice>

Dasselbe für eine Rechnung (/i/{token}). Die Komponente akzeptiert dieselben Props und ergänzt onPaid:

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

<CordInvoice token={invoiceToken} onPaid={(d) => console.log('Paid', d.folio)} />

In Vue sendet CordInvoice aus @flouviahq/elements/vue das Ereignis paid.

---

<CordBuilder>: Angebots-Builder (Compound)

Wenn Sie eine Oberfläche zum Erstellen neuer Angebote bauen und dabei die standardisierte Oberfläche des SDK nutzen möchten, verwenden Sie den CordBuilder. Er folgt dem Muster zusammengesetzter Komponenten (Compound Pattern), sodass Sie Teile des Formulars neu anordnen oder weglassen können.

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

function NewQuote() {
  return (
    <CordBuilder onQuoteCreated={(q) => console.log('Created:', q.folio)}>
      <CordBuilder.Header />
      <CordBuilder.Items className="my-tailwind-class" />
      <CordBuilder.Summary />
      <CordBuilder.SubmitButton className="btn btn-primary" />
    </CordBuilder>
  );
}

Die Komponenten setzen stabile CSS-Klassen (.cord-*), damit Sie sie leicht anpassen können. Cord setzt dabei nie Inline-Styles: Ihr eigenes CSS (etwa Tailwind oder CSS Modules) hat so immer Vorrang, ohne dass Sie !important brauchen.

---

useQuoteBuilder: Headless UI

Wenn <CordBuilder> nicht genau zu den Designanforderungen Ihrer Oberfläche passt, können Sie mit dem Hook useQuoteBuilder die gesamte Zustandslogik übernehmen und Schaltflächen, Eingabefelder und Tabellen vollständig selbst rendern.

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

function MyOwnBuilder() {
  const {
    items, updateItem, removeItem, subtotal, iva, total,
    cliente, setCliente, notas, setNotas,
    handleSubmit, isLoading
  } = useQuoteBuilder({
    catalog: myLocalProducts, 
    onQuoteCreated: (q) => console.log('Link:', q.link_publico),
  });

  return (
    <form onSubmit={handleSubmit}>
      {/* Bauen Sie Ihre eigene Oberfläche mit dem Zustand von Cord */}
      <h2>Total: ${total}</h2>
      <button type="submit" disabled={isLoading}>Create</button>
    </form>
  );
}