Skip to main content

Einen Stripe-Checkout-Flow erstellen

Gib Devin eine Checkout-Spezifikation zusammen mit deinen Stripe-Sandbox-Keys und erhalte einen funktionsfähigen Zahlungsablauf – Pricing-Seite, Checkout-Session, Webhook-Handler und Bestätigungsseite –, der im Browser verifiziert ist.
AuthorCognition
CategoryFeature-Entwicklung
1

(Optional) die Codebasis mit Ask Devin eingrenzen

Wenn du dir nicht sicher bist, wie deine App aktuell Zahlungen verarbeitet – oder welche Dateien und Muster du in deiner Spezifikation referenzieren solltest – nutze zuerst Ask Devin, um das zu untersuchen:Verwende die Antworten, um deine Spezifikation auszufüllen – verweise auf konkrete Dateien, Tabellennamen und Muster, damit Devin etwas baut, das sich nahtlos in deine Codebasis einfügt. Du kannst außerdem eine Devin-Sitzung direkt aus Ask Devin starten; dabei werden alle gewonnenen Informationen als Kontext übernommen.
2

Sandbox-Schlüssel von Stripe hinzufügen

Devin benötigt Stripe-Testmodus-Schlüssel, um Checkout-Sessions zu erstellen und den Webhook-Handler zu überprüfen. Verwende immer Sandbox-Zugangsdaten – gib Devin niemals Produktions-Stripe-Schlüssel.Die einfachste Möglichkeit ist, sie als Organisationsgeheimnisse zu speichern, bevor du die Session startest:
  1. Gehe zu Settings > Secrets und füge hinzu:
  2. Devin greift als Umgebungsvariablen auf diese zu, sodass sie niemals hardcodiert in deinem Quellcode landen.
Organisationsgeheimnisse müssen vor dem Start der Session hinzugefügt werden – sie werden beim Start der Session eingespeist. Alternativ kannst du Secrets während der Session über den Chat bereitstellen, und Devin wird dich außerdem proaktiv nach allen Zugangsdaten fragen, die es benötigt, wenn fehlende Umgebungsvariablen erkannt werden.
3

Übergeben Sie Ihre Checkout-Spezifikation

Füge deine Spezifikation – sei es aus einem PRD, einem Linear-Ticket oder einer ausführlichen Slack-Nachricht – direkt in Devin ein. Eine gute Checkout-Spezifikation deckt die Preistarife, den Bezahlablauf und das Verhalten nach einer erfolgreichen Zahlung ab. Je strukturierter, desto besser.Eine gute Spezifikation für Devin umfasst drei Dinge: was gebaut werden soll (Preistarife, Checkout-Flow, Webhook-Handler), wo es liegt (Routen, Tabellen, Dateien) und wie es sich einfügt (bestehende Muster, denen du folgen sollst). Du musst nicht jedes Implementierungsdetail angeben – Devin untersucht deine Codebasis, um die Lücken zu schließen.
4

Devin erstellt und überprüft direkt im Browser

Devin liest Ihre Spezifikation, untersucht den Code nach passenden Mustern und implementiert dann über den gesamten Stack hinweg. Bevor es einen PR eröffnet, führt es Ihre App lokal aus und öffnet seinen integrierten Browser, um zu überprüfen, dass der Checkout-Flow End-to-End funktioniert.So sieht das beim Stripe-Checkout-Beispiel aus:
  1. Erstellt die Migration — Fügt die Tabelle subscriptions mit Spalten für user_id, stripe_subscription_id, plan, status und current_period_end hinzu
  2. Baut die Preisseite — Erstellt die Preiskarten mit drei Preisstufen unter /pricing, jeweils mit einem “Subscribe”-Button, der einen Request an die Checkout-API sendet
  3. Implementiert das Erstellen von Checkout-Sessions — Implementiert POST /api/checkout/sessions, das eine Stripe-Checkout-Session mit der richtigen Price-ID, der E-Mail-Adresse des Kunden und den Redirect-URLs erstellt
  4. Fügt den Webhook-Handler hinzu — Implementiert POST /api/webhooks/stripe mit Signaturprüfung, checkout.session.completed-Event-Handling und Datenbank-Updates
  5. Baut die Erfolgsseite — Erstellt /checkout/success, das die Stripe-Session abruft, den Namen des Plans, den abgerechneten Betrag und einen “Go to Dashboard”-Link anzeigt
  6. Schreibt Tests — Schreibt Tests für die Webhook-Signaturprüfung (gültig, ungültig, fehlend), das Erstellen von Checkout-Sessions und die Plan-Update-Logik in der Datenbank
  7. Öffnet den Browser — Startet den Dev-Server, navigiert zu /pricing, klickt auf “Subscribe” bei der Pro-Stufe, überprüft, dass der Stripe-Checkout-Redirect funktioniert, und prüft, dass die Erfolgsseite nach einer Testzahlung korrekt gerendert wird
  8. Öffnet einen PR — Liefert alle Änderungen mit einer Zusammenfassung dessen, was implementiert wurde und wie es verifiziert wurde
Der Browser-Verifizierungsschritt fängt Probleme ab, die Unit-Tests übersehen — eine Preiskarte, die keinen Checkout auslöst, eine Redirect-URL, die einen 404 zurückgibt, oder eine Erfolgsseite, die Sitzungsdetails nicht laden kann. Wenn Sie eine lokale Testing-Skill definiert haben, folgt Devin diesen Schritten automatisch für jedes Feature, das es entwickelt.
5

Vom PR aus weiterarbeiten

Sobald der PR geöffnet wurde, sende weitere Prompts in derselben Sitzung, um den Checkout-Flow zu erweitern oder anzupassen.
6

PR mit Devin Review prüfen

Sobald Devin den PR erstellt hat, kannst du Devin Review nutzen, um die Änderungen zu prüfen. Devin Review hat den vollständigen Kontext zu deiner Codebasis und kann Bugs, Sicherheitsprobleme und Stilinkonsistenzen über den gesamten Diff hinweg erkennen. Du kannst im Review-Chat Rückfragen stellen – zum Beispiel: “Überprüft der Webhook-Handler den Event-Typ, bevor er ihn verarbeitet?” – und Devin wird auf Basis des tatsächlichen Codes antworten.