Stripe-Integration

So richtest du Zahlungen in deiner App mit unserer Stripe-Integration ein

Mit Lovable kannst du Stripe jetzt komplett über den Chat einrichten.

Chat‑gesteuertes Auto‑Setup (empfohlen)
Nachdem du Supabase verbunden und deinen Stripe Secret Key über Add API Key gespeichert hast, beschreibe einfach, was du brauchst:

• „Füge drei Abo‑Tarife hinzu …“
• „Erstelle einen einmaligen Checkout für mein E‑Book für $29“
  Lovable generiert die Checkout‑/Portal‑Edge-Funktionen, Datenbanktabellen mit RLS und UI‑Buttons – keine manuelle Programmierung oder Webhooks, außer du bittest explizit darum.

• Für Einzelverkäufe stelle sicher, dass dein Warenkorb oder deine Produktseite bereits funktioniert.
• Für Abos stelle sicher, dass Supabase Auth eingerichtet ist, damit Lovable Stripe‑Kunden mit der id jedes Nutzers verknüpfen kann

​

Wichtigste Punkte

• Verwende den chatbasierten Ablauf sowohl für Abonnements als auch für Einmalzahlungen.
• Füge deinen Stripe Secret Key niemals in den Chat ein. Konfiguriere ihn über das Formular Add API Key im Chat.
• Webhooks sind opt‑in. Lovable verwendet Edge‑Function‑Polling, sofern du keine Webhooks anforderst.
• Debugge in der Browser Console → Network/Errors, Supabase → Edge Functions → Logs (Protokolle) und im Stripe Dashboard → Logs (Protokolle).
• Teste immer im Stripe‑Testmodus und stelle dann bereit.

​

Voraussetzungen

Bevor du Stripe integrierst, stelle sicher, dass die folgenden Voraussetzungen erfüllt sind:

• Das Projekt muss mit Supabase verbunden sein. Mehr über Supabase erfahren
• Ein Stripe-Konto mit korrekt konfigurierten Produkten.
• Ein funktionierendes Frontend und Backend:
  • Für den Verkauf einzelner Produkte stelle sicher, dass ein Warenkorb und eine Checkout-Seite funktionsfähig sind.
  • Für Abonnements richte eine Login-Funktionalität und unterschiedliche Preisstufen ein.

Bitte beachte Die Stripe-Integration funktioniert nicht in der Vorschau. Wenn du die Integration testen möchtest, stelle sicher, dass du das Projekt bereitstellst. Achte außerdem darauf, dass du in Stripe den Testmodus aktiviert hast, wenn du die Funktionalität ausprobierst. Beim Testen von Zahlungen kannst du folgende Kartendaten verwenden: Kartennummer: 4242 4242 4242 4242, beliebige 3 Ziffern als CVC und ein beliebiges zukünftiges Datum.

​

Stripe-Zahlungs-Setup (No‑Code-Chat-Flow)

Lovable generiert jetzt die gesamte Stripe-Logik für dich. Sobald dein Stripe Secret Key über das In-Chat-Formular Add API Key konfiguriert und dein Projekt mit Supabase verbunden ist, sag Lovable einfach im Chat, was du brauchst – manuelle Payment Links sind nicht mehr nötig.

1. Schritt 1

   Bereite dein Projekt vor

   • Supabase ist verbunden
   • Stripe Secret Key über das In-Chat-Formular Add API Key hinzugefügt
   • (Optional) Preise oder Produkt-IDs griffbereit
2. Schritt 2

   Beispiele:

   • Erstelle einen einmaligen Checkout für meinen „Digital Course“ für $29
   • Richte einen jährlichen Premium-Tarif für $99 ein, der an die id jedes Nutzers gebunden ist
3. Schritt 3

   Prüfen & anwenden Lovable erstellt automatisch das Grundgerüst für die Edge Functions, Datenbanktabellen und UI-Komponenten (alle mit der id des Nutzers in Supabase verknüpft). Überprüfe die Vorschau und klicke dann auf Apply, um bereitzustellen.

• Abonnements sollten immer mit der id des authentifizierten Nutzers in Supabase verknüpft sein, um sicheren, rollenbasierten Zugriff zu gewährleisten.

​

Erweiterte Integration: Webhooks & Supabase

Für komplexe Zahlungsstrukturen wie Abonnements und rollenbasierte Zugriffssteuerung empfiehlt Lovable die Verwendung von Supabase, um die Stripe-Integration sicher zu handhaben. So kannst du Webhooks korrekt verarbeiten, Abonnements verwalten und rollenbasierte Zugriffskontrolle auf Basis von Zahlungstarifen implementieren.

Die Edge-Funktion, die die erforderlichen Änderungen am Benutzerkonto vornimmt, sollte automatisch von der KI eingerichtet werden.

1. Supabase mit deinem Projekt verbinden

   Der Einstieg ist einfach. Lovable macht das Verbinden von Supabase dank einer nativen Integration unkompliziert:

   1. Klicke auf den Supabase-Button in der oberen rechten Ecke von Lovable.
   2. Folge den Anweisungen, um dein Projekt zu verknüpfen.
   3. Sobald die Verbindung hergestellt ist, ermöglicht Supabase sichere Zahlungsabwicklung, Abonnementverwaltung, Webhook-Verarbeitung, Speicherung von Kundendaten und Fehlerbehandlung.
2. Sichere Zahlungsabwicklung

   Starte den Prozess, indem du Lovable eine Eingabeaufforderung sendest:

   Lass uns Stripe mit meinem Projekt verbinden. Wir beginnen mit der sicheren Zahlungsabwicklung.

   Lovable generiert das erforderliche SQL-Schema für die Verarbeitung von Zahlungen. Dies umfasst Datenbanktabellen für Benutzer, Abonnements und Zahlungen. Du kannst diese Tabellen prüfen und an deine spezifischen Produktanforderungen anpassen, bevor du Änderungen übernimmst.

3. Edge Functions für Webhooks implementieren

   Edge Functions in Supabase fungieren als kleine, leistungsstarke serverlose Funktionen, die nah am Benutzer ausgeführt werden und so schnelle Reaktionszeiten sicherstellen. Sie helfen dabei, Webhook-Ereignisse wie Zahlungsbestätigungen zu verarbeiten, bevor die Datenbank aktualisiert wird.
4. API-Schlüssel sicher hinzufügen

   Um Stripe sicher zu integrieren, teile deinen API-Schlüssel nicht direkt im Chat. Stattdessen:

   
5. Deine Integration testen

   • Verwende den Testmodus von Stripe, um Zahlungen sicher zu testen.
   • Testkartendaten:
     • Kartennummer: 4242 4242 4242 4242
     • Beliebiges zukünftiges Ablaufdatum
     • Beliebiger 3-stelliger CVC
   • Stelle deine App bereit – die Stripe-Integration funktioniert nicht im Vorschaumodus.

​

Debugging & Fehlerbehebung

Konsolenprotokolle überprüfen

1. Step 1

   Öffne die Developer Tools (Rechtsklick > Inspect > Console in Chrome).

2. Step 2

   Suche nach Fehlern und überprüfe die Webhook-Ereignisprotokolle.

3. Step 3

   Kopiere Fehlermeldungen und bitte Lovable um Unterstützung beim Debugging.

Supabase-Protokolle überprüfen

1. Step 1

   Gehe zum Supabase Dashboard

2. Step 2

   Edge Functions

3. Step 3

   Logs, um nach Webhook-Fehlern zu suchen.

Webhook-Ereignisse in Stripe überprüfen

1. Step 1

   Navigiere zum Stripe Dashboard

2. Step 2

   Webhook-Protokolle

3. Step 3

   Bestätige, dass Stripe die Daten korrekt sendet.

Lovable Chat Mode verwenden

1. Step 1

   Wechsle in den chat mode und stelle Lovable Rückfragen.

2. Step 2

   Stelle Lovable Rückfragen.

3. Step 3

   Nutze die Rubber-Duck-Methode und erkläre dein Problem Schritt für Schritt, um es zu klären.