Wie Sie E-Signaturen zu Ihrer Wasp-App hinzufügen

Wasp ist ein Full-Stack-Framework für React, Node.js und Prisma, mit dem Sie Authentifizierung, Server-Aktionen und Datenbank-Entitäten in einer deklarativen Konfigurationsdatei definieren können. Ihre Open SaaS-Vorlage wird direkt mit Authentifizierung, Zahlungen und einer Datenbank ausgeliefert und ist mit über 10.000 Sternen eines der beliebtesten SaaS-Boilerplates auf GitHub. Wenn Sie ein SaaS-Produkt auf Wasp aufbauen, ist das Hinzufügen von E-Signaturen ein natürlicher nächster Schritt für alles in den Bereichen Recht, HR, Consulting oder Immobilien.

Firma.dev integriert sich direkt in die Server-Aktionen und Prisma-Modelle von Wasp. Sie definieren eine Wasp-Aktion, rufen die Firma.dev-API aus Ihrem serverseitigen Code auf und verfolgen alles in Ihrer bestehenden Datenbank. Keine externe Infrastruktur, keine neuen Dienste, die verwaltet werden müssen.

Wie es funktioniert (die Kurzversion)

Die Architektur von Wasp macht dies elegant. Sie deklarieren eine Server-Aktion in Ihrer .wasp-Konfigurationsdatei, implementieren sie in TypeScript und rufen sie aus einer beliebigen React-Komponente auf. Die Aktion läuft serverseitig (sodass Ihr API-Schlüssel niemals den Browser berührt), erstellt eine Signaturanfrage über die Firma.dev-API und speichert das Ergebnis in Ihrer Prisma-Datenbank. Der Unterzeichner erhält das Dokument per E-Mail oder über ein eingebettetes Iframe in Ihrer App.

Wenn das Dokument unterzeichnet ist, sendet Firma.dev einen Webhook an eine Wasp-API-Route, die den Status der Signaturanfrage in Ihrer Datenbank aktualisiert. Ihr Frontend übernimmt die Änderung automatisch durch die reaktiven Abfragen von Wasp.

Wenn Sie bereits Open SaaS nutzen, haben Sie Authentifizierung, eine Datenbank und Server-Aktionen startklar. Die Firma.dev-Integration fügt vielleicht 100 Zeilen Code über zwei Dateien hinzu.

Unter der Haube

Für Entwickler, die die Architektur verstehen wollen, bevor sie in die Dokumentation einsteigen:

Die Integration besteht aus vier Teilen. Erstens, eine SigningRequest-Prisma-Entität, die jede Signaturanfrage mit ihrer Firma.dev-ID, Vorlage, Unterzeichner-E-Mail und Status verfolgt. Zweitens, eine sendSigningRequest-Wasp-Aktion, die Ihren API-Schlüssel aus .env.server liest, den create-and-send-Endpunkt von Firma.dev aufruft und das Ergebnis in Ihre Datenbank schreibt. Wasp verwaltet den Client-Server-RPC automatisch, sodass Ihre React-Komponente die Aktion einfach wie eine reguläre asynchrone Funktion aufruft.

Drittens, ein Webhook-Handler, der als eine Wasp-api-Route deklariert ist (mit auth: false, da Webhooks keine Sitzungstoken tragen), der auf Ereignisse wie signing_request.completed lauscht und Ihre Prisma-Einträge aktualisiert. Viertens, eine optionale eingebettete Signaturkomponente: ein Iframe, der auf https://app.firma.dev/signing/{id} verweist und es Unterzeichnern ermöglicht, Dokumente auszufüllen, ohne Ihre App zu verlassen.

Das Ganze funktioniert mit der Typsicherheit von Wasp. Sie typisieren Ihre Aktionseingabe und -ausgabe, und Wasp leitet die Typen im Frontend automatisch ab.

Sie können auch den Docs MCP-Server von Firma.dev während der Entwicklung mit Cursor oder Claude verbinden, sodass Ihr KI-Assistent auf die vollständige API-Dokumentation verweisen kann, wenn er Integrationscode generiert.

Was Sie bekommen

Nach der Verbindung kann Ihre Wasp-App Dokumente zur Unterzeichnung aus jeder Firma.dev-Vorlage senden, Echtzeit-Statusaktualisierungen über Webhooks und Prisma verfolgen, die Signierung direkt in Ihre Benutzeroberfläche einbetten und nachgelagerte Workflows auslösen, wenn Dokumente fertiggestellt sind.

Jede Unterschrift ist nach dem ESIGN Act, UETA und eIDAS (SES und AdES) rechtsverbindlich. Alle Dokumentendaten werden in der EU auf der AWS-Infrastruktur in Paris und Stockholm gespeichert.

Wenn Sie ein mandantenfähiges SaaS aufbauen, bieten die Customer Workspaces von Firma.dev jedem Ihrer Kunden eine eigene isolierte Signierumgebung mit separaten Vorlagen und Nutzungsverfolgung. Das passt hervorragend zu den Mandantenfähigkeitsmustern von Wasp.

Preise, die für SaaS-Entwickler funktionieren

Open SaaS existiert, weil es sich unangemessen anfühlte, 300 bis 2.000 $ für Boilerplate-Code zu bezahlen. Dieselbe Logik gilt für E-Signaturen. Die meisten Anbieter verlangen 25 bis 50 $ pro Benutzer und Monat, was sich schnell summiert, wenn das Signieren nur eine Funktion in Ihrem Produkt ist.

Firma.dev berechnet 0,029 € (ca. 3 US-Cent) pro Umschlag. Keine monatlichen Gebühren, keine Kosten pro Benutzer, keine Verträge. Sie stellen die Funktion bereit und zahlen nur, wenn Umschläge gesendet werden. Für ein SaaS-Projekt in der Frühphase auf Open SaaS bedeutet dies, dass Sie am ersten Tag mit E-Signaturen starten können, ohne Ihre Burn-Rate um einen Posten von 300 $/Monat zu erhöhen.

Erste Schritte

Die vollständige Wasp-Integrationsanleitung auf docs.firma.dev führt Sie durch jeden Schritt: Definition der Prisma-Entität, Erstellung der Server-Aktion, Einrichtung von Webhooks und Einbettung des Signiererlebnisses. Wenn Sie schon einmal eine Wasp-Aktion erstellt haben, werden Ihre Signaturanfragen in weniger als einer Stunde laufen.

Starten Sie kostenlos mit Firma.dev, keine Kreditkarte erforderlich.