Stripe-Zahlungen zu deiner Coderblock-App hinzufügen

Was du erstellen wirst

Mit Coderblock kannst du Stripe-Zahlungen zu einer bestehenden App hinzufügen, ohne Checkout-Endpunkte, Webhooks oder Code für die Zahlungsabwicklung manuell schreiben zu müssen. Beschreibe einfach im Chat, was du umsetzen möchtest: Der Agent verbindet das Frontend, Backend, die Datenbank und die erforderliche Stripe-Konfiguration zu einer vollständigen Integration.

In diesem Tutorial erfährst du, wie du Folgendes hinzufügst:

• ein wiederkehrendes Abonnement;
• eine Einmalzahlung.

Du beginnst im Testmodus von Stripe, prüfst den gesamten Ablauf aus Kundensicht und wechselst anschließend zu echten Zahlungen und veröffentlichst deine App. Lege vor dem Start Folgendes fest:

• was deine Kunden kaufen werden;
• ob es sich um eine Einmalzahlung oder eine wiederkehrende Zahlung handelt;
• Preis und Währung;
• welche Funktionen oder Inhalte nach der Zahlung verfügbar sein sollen;
• ob du ein von Coderblock verwaltetes Stripe-Konto oder dein eigenes Stripe-Konto verwenden möchtest.

---

Schritt 1: Öffne oder erstelle deine App

Öffne das Coderblock-Projekt, zu dem du Zahlungen hinzufügen möchtest. Wenn du bei null anfängst, kannst du die App in natürlicher Sprache beschreiben oder eine der verfügbaren Produktvorlagen auswählen. Zum Beispiel:

Erstelle eine abonnementbasierte Website für Online-Kochkurse. Besucher können die Kurse ansehen, aber nur zahlende Mitglieder dürfen die vollständigen Videos abspielen.

Coderblock erstellt das Frontend mit React, Vite, TypeScript und Tailwind sowie ein echtes Backend und eine eigene Postgres-Datenbank für das Projekt. Während der Entwicklung kannst du die App unter <app>.coderblock.dev in der Vorschau anzeigen. Änderungen werden übernommen, während du im Chat mit dem Agenten weiterarbeitest. Wenn deine App Kundenkonten benötigt, solltest du diese vor der Einrichtung der Zahlungen hinzufügen:

Füge eine Registrierung und Anmeldung für Kunden hinzu. Schütze den Mitgliederbereich, sodass nur authentifizierte Benutzer darauf zugreifen können.

Der Agent verwendet Supabase Auth, anstatt eine eigene Tabelle für Passwörter anzulegen. Außerdem richtet er die Sitzungsverwaltung, geschützte Routen und die jedem authentifizierten Benutzer zugeordnete Row Level Security von Postgres ein.

---

Schritt 2: Beschreibe dein Zahlungsmodell

Beschreibe dem Agenten nun, was du verkaufen möchtest. Nenne den Produktnamen, den Preis, die Währung, das Abrechnungsintervall und was nach dem Checkout geschehen soll.

Für ein Abonnement

Du kannst Folgendes schreiben:

Füge ein Cooking-Club-Abonnement für 9,99 € pro Monat hinzu. Authentifizierte Kunden sollen es auf der Preisseite abschließen können. Gewähre ihnen nach der Zahlung Zugriff auf den geschützten Mitgliederbereich.

Für eine Einmalzahlung

Alternativ:

Füge einen einmaligen Checkout über 49 € für den Kurs „Patisserie für Fortgeschrittene“ hinzu. Vermerke nach der Zahlung, dass der Kunde Zugriff auf den Kurs hat.

Der Agent erstellt das tatsächliche Produkt und den zugehörigen Preis in Stripe, richtet den Checkout ein, verknüpft ihn mit dem authentifizierten Kunden und ergänzt die erforderliche Backend-Logik zum Speichern des Zahlungsstatus. Außerdem übernimmt er die Integration des Stripe-Webhooks. Prüfe jetzt die Live-Vorschau. Achte darauf, dass:

• Produktname;
• Preis;
• Abrechnungsintervall;
• Call-to-Action;
• Nutzererlebnis nach dem Checkout

deinen Vorstellungen entsprechen. Wenn du etwas ändern möchtest, kannst du es einfach im Chat anfordern:

Ändere den Text der Schaltfläche in „Abonnement starten“ und zeige darüber eine kurze Liste der Vorteile an.

---

Schritt 3: Wähle aus, wie Stripe verbunden werden soll

Coderblock unterstützt zwei Möglichkeiten, eine Verbindung zu Stripe herzustellen. Die verwaltete Option ist die Standardeinstellung und erfordert keine API-Schlüssel.

Option A: Verwende ein verwaltetes Stripe-Konto

Bitte den Agenten, mit der standardmäßigen verwalteten Einrichtung fortzufahren. Er stellt dir einige einfache Fragen, etwa zum Land und zum Namen deines Unternehmens, und erstellt anschließend das Stripe-Konto für das Projekt. Du musst weder API-Schlüssel kopieren noch Webhooks manuell konfigurieren: Coderblock verwaltet den Zahlungs-Webhook und verbindet das Projekt automatisch. Die Identitätsprüfung und die Einrichtung von Auszahlungen kannst du später über den vom Agenten bereitgestellten Stripe-Onboarding-Link abschließen. Wenn du bereit bist, echte Zahlungen zu empfangen, öffne den Link und ergänze die von Stripe verlangten Unternehmensinformationen.

Option B: Verwende dein eigenes Stripe-Konto

Wenn du bereits ein Stripe-Konto hast und es mit dem Projekt verbinden möchtest, schreibe:

Verbinde dieses Projekt mit meinem bestehenden Stripe-Konto.

Der Agent fordert STRIPE_SECRET_KEY über ein dafür vorgesehenes, sicheres Feld für Umgebungsvariablen an. Gib den Schlüssel ausschließlich in dieses Feld ein. Coderblock speichert Geheimnisse im serverseitigen Secret-Speicher des Projekts. Dadurch wird verhindert, dass der Schlüssel in den generierten Code gelangt oder im Chat angezeigt wird. Nachdem der Agent den Schlüssel erhalten hat, registriert er automatisch den erforderlichen Webhook und schließt die Integration ab. Füge Geheimnisse niemals manuell in Frontend-Dateien ein und fordere die App nicht dazu auf, sie im Browsercode offenzulegen.

---

Schritt 4: Teste den gesamten Checkout-Ablauf

Lass die Integration im Testmodus, bis du den gesamten Ablauf erfolgreich überprüft hast. Öffne die Live-Vorschau und teste das Erlebnis so, wie es ein Kunde tun würde:

1. Erstelle ein Testbenutzerkonto oder melde dich mit einem bestehenden Konto an.
2. Öffne die Preis- oder Produktseite.
3. Wähle das kostenpflichtige Produkt aus.
4. Schließe den Stripe-Test-Checkout ab.
5. Kehre nach der Testzahlung zur App zurück.
6. Prüfe, ob die richtigen Inhalte, Funktionen oder Kontoberechtigungen freigeschaltet wurden.
7. Aktualisiere die Seite oder melde dich erneut an, um sicherzustellen, dass der Zugriff bestehen bleibt.

Teste nicht nur den erfolgreichen Ablauf. Probiere die App auch mit einem Konto aus, das keine Zahlung vorgenommen hat, und vergewissere dich, dass es nicht auf geschützte kostenpflichtige Funktionen zugreifen kann.

Prüfe auch das Backend

Auf der Registerkarte Backend im Coderblock-Editor kannst du Folgendes überprüfen:

• Tabellen;
• authentifizierte Benutzer;
• Storage;
• App-Funktionen.

Stelle sicher, dass die Zahlungs- oder Abonnementinformationen dem richtigen authentifizierten Benutzer zugeordnet sind. Die Row Level Security muss außerdem verhindern, dass ein Kunde die privaten Daten eines anderen Kunden lesen oder ändern kann. Wenn etwas nicht wie erwartet funktioniert, beschreibe dem Agenten das beobachtete Verhalten, anstatt den Zahlungscode manuell zu bearbeiten. Zum Beispiel:

Der Checkout wird erfolgreich abgeschlossen, aber das Dashboard im Mitgliederbereich bleibt gesperrt. Aktualisiere den Zugriff nach der Bestätigung der Stripe-Zahlung und stelle sicher, dass er auch nach einer erneuten Anmeldung funktioniert.

Der Agent kann daraufhin das Frontend, das Datenbankschema, die Sicherheitsregeln und das Verhalten des Backends anpassen.

Schritt 5: Füge Ansichten für Kunden und Administratoren hinzu

Ein guter Zahlungsablauf sollte Kunden nach dem Checkout den Status ihres Kontos klar anzeigen. Du kannst den Agenten beispielsweise um Folgendes bitten:

Füge der Kundenkontoseite einen Abrechnungsbereich hinzu, der den aktuellen Tarif und den Zahlungsstatus anzeigt.

Du kannst auch eine eigene Ansicht für Administratoren erstellen:

Füge eine geschützte Administrationsseite hinzu, auf der Kunden, das jeweils ausgewählte Produkt und der aktuelle Zahlungsstatus aufgelistet werden. Nur Benutzer mit der Administratorrolle dürfen sie öffnen.

Coderblock-Apps enthalten bereits eine Profiltabelle und eine grundlegende Rollenstruktur. Der Agent kann den Administratorzugriff daher mit den Rollen authentifizierter Benutzer verknüpfen und die passenden Richtlinien in der Datenbank anwenden.

Schritt 6: Wechsle zu echten Zahlungen und veröffentliche die App

Wenn du überprüft hast, dass Checkout, Konten und geschützte Routen korrekt funktionieren, teile dem Agenten mit, dass du zu echten Zahlungen wechseln möchtest. Bevor du fortfährst:

• bestätige die endgültigen Preise;
• überprüfe die Währung;
• kontrolliere die Abrechnungsintervalle;
• schließe gegebenenfalls die Stripe-Verfahren für Auszahlungen ab;
• schließe die Identitätsprüfung ab, sofern sie erforderlich ist.

Prüfe anschließend die Konfiguration ein letztes Mal im Live-Modus. Stelle sicher, dass das Produktionsprodukt, der Preis, die Währung, das Abrechnungsintervall, das Verhalten nach der Zahlung und die geschützten Funktionen korrekt eingerichtet sind. Wenn alles bereit ist, klicke auf Veröffentlichen. Die App wird unter <app>.coderblock.app bereitgestellt, einschließlich SSL.

Wenn du lieber eine eigene Domain verwenden möchtest, öffne Einstellungen → Domains. Du kannst eine bereits vorhandene Domain mithilfe der geführten DNS-Einrichtung verbinden oder direkt in Coderblock eine Domain kaufen. DNS und SSL werden dabei automatisch konfiguriert.

Ein letzter Test in der Produktionsumgebung

Teste den Checkout nach der Veröffentlichung erneut in der Produktionsumgebung. Der Wechsel vom Test- in den Live-Modus sollte gesondert geprüft werden: Stelle sicher, dass das richtige Produkt gekauft werden kann, die Zahlung das Konto korrekt aktualisiert und geschützte Inhalte ausschließlich autorisierten Benutzern zugänglich sind. Wenn du Änderungen vornehmen musst, kannst du im Chat weiterarbeiten, sie in der Live-Vorschau prüfen und anschließend als neues Update veröffentlichen.

---

Abschließende Checkliste

Bevor du Zahlungen von echten Kunden annimmst, prüfe Folgendes:

• Produktnamen, Preise, Währungen und Abrechnungsintervalle sind korrekt.
• Eine Anmeldung ist erforderlich, wenn Zahlungen einem Benutzer zugeordnet werden müssen.
• Erfolgreiche Zahlungen schalten ausschließlich die vorgesehenen Funktionen frei.
• Nicht zahlende Benutzer können nicht auf geschützte Inhalte zugreifen.
• Zahlungsdaten sind dem richtigen Konto zugeordnet.
• Die Row Level Security schützt die Kundendaten.
• Geheimnisse wurden ausschließlich über sichere Felder übermittelt.
• Das Stripe-Onboarding ist vollständig abgeschlossen, damit echte Zahlungen empfangen werden können.
• Die Produktionsdomain und die Rückleitung vom Checkout funktionieren korrekt.

Fertig. Deine Coderblock-App verfügt jetzt über einen echten Stripe-Zahlungsablauf, der mit Frontend, Backend, Authentifizierung und Postgres-Datenbank verbunden ist. Und das Wichtigste: Du kannst ihn jederzeit weiter anpassen, indem du im Chat einfach beschreibst, was du ändern möchtest.