Cord Elements für React

Für das Frontend stellt Cord kein SDK mit eigenständigen Zahlungsformularen bereit: Die Kartenzahlung wird im sicheren iframe des öffentlichen Angebotslinks verarbeitet. Was wir veröffentlichen, ist Cord Elements (@flouviahq/elements), mit zwei Bausteinen für React: einem Viewer für bereits erstellte Angebote und einem Builder, um neue Angebote aus Ihrer eigenen Oberfläche zu erstellen.

Installation

npm install @flouviahq/elements

CordProvider: Publishable Key oder Ihr eigener Proxy

Um Angebote zu erstellen oder den Katalog aus dem Browser zu lesen, umschließen Sie Ihre App mit CordProvider. Es handelt sich um eine diskriminierte Union: Sie übergeben publishableKey oder proxyUrl, nie beides.

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

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

Mit publishableKey (pk_live_.../pk_test_..., erstellt im Tab Schlüssel der Entwickler-Workbench) kann der Browser direkt Angebote erstellen und den Produktkatalog lesen; er kann nicht Ihr Kundenverzeichnis lesen (useCordClients() gibt einen CordError mit code: 'clients_require_proxy' zurück) und weder auf Rechnungsstellung noch auf Forderungsmanagement zugreifen. Wenn Sie das benötigen, verwenden Sie proxyUrl mit einer Route Ihres Backends, die Cord mit einem sk_-Schlüssel aufruft.

Ein bestehendes Angebot ansehen, bestätigen oder bezahlen

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

function MyPortal({ token }) {
  return (
    <CordCotizador
      token={token}
      onApproved={(e) => console.log('Approved, signed by', e.signed_by)}
      onPay={(e) => console.log('Payment opened at', e.url)}
      onRejected={(e) => console.log('Rejected:', e.comentario)}
    />
  );
}

CordCotizador bindet denselben Angebotsrechner wie unter /q in einem sicheren iframe mit automatischer Höhe ein; er funktioniert ohne CordProvider, wenn Sie nur anzeigen und bestätigen lassen müssen (keine neuen Angebote erstellen und keinen Katalog lesen).

Ein neues Angebot erstellen

CordBuilder bringt eine einsatzbereite Oberfläche mit stabilen .cord-*-Klassen mit, die Sie mit Ihrem eigenen CSS überschreiben können:

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

function NewQuote() {
  return <CordBuilder onQuoteCreated={(q) => console.log(q.folio, q.link_publico)} />;
}

Wenn Sie lieber Ihre eigene Oberfläche bauen, liefert useQuoteBuilder() denselben Zustand (Positionen, Kunde, Summen, handleSubmit) als Headless-Hook, ohne dazwischengeschaltete visuelle Komponente.

Verfügbare Ereignisse

CordCotizador sendet onReady, onViewed, onApproved, onSigned (zusammen mit onApproved, dieselbe Aktion), onRejected, onMessage, onItemComment und onPay. Verwenden Sie sie, um in Ihrer App zu reagieren (weiterleiten, ein Dankeschön anzeigen, Analysen erfassen usw.).

Andere Frameworks

Dasselbe Paket enthält die Web Component <cord-cotizador> (Astro, Vue, Svelte, PHP, beliebiges HTML) sowie Wrapper für Vue und Framer. Für Websites ohne Build (WordPress, Webflow) verwenden Sie den einzeiligen Loader embed.js. Alle Snippets finden Sie auf der Seite Cord Elements.