Stripe verbinden

Anforderungen

Bevor Sie Stripe integrieren, stellen Sie sicher, dass Sie Folgendes haben:

• Eine funktionierende MGX-Anwendung.
• Das MGX-Projekt ist bereits mit einem Supabase-Projekt verbunden. (Mehr über Supabase erfahren.)
• Produkte und entsprechende Preise in Ihrem Stripe-Dashboard erstellt.

Hinweis: Der Vorschaumodus kann nicht zum Testen der Zahlungsfunktion verwendet werden. Stellen Sie Ihre MGX-App bereit und wechseln Sie Stripe in den Testmodus, um die Integration zu überprüfen.

Testkarte:

• Kartennummer: 4242 4242 4242 4242
• Ablaufdatum: Beliebiges zukünftiges Datum
• CVC: Beliebige 3-stellige Zahl

Stripe-Zahlungseinrichtung

1. Supabase verbinden

   • Klicken Sie auf die Supabase-Schaltfläche oben rechts in MGX
   • Folgen Sie den Supabase Connect Guides, um Ihr Ziel-Supabase-Projekt auszuwählen
   • Nach der Verbindung können Sie die Zahlungseinstellungen über Supabase konfigurieren

2. Beschreiben Sie Ihre Abonnementanforderungen in natürlicher Sprache

   • Beispiel: Erstelle ein Zahlungssystem, das drei Abonnementpläne für 4,99 $ pro Woche, 14,99 $ pro Monat und 149,99 $ pro Jahr unterstützt.

   Nach dem Absenden erzeugt der MGX Agent Konfigurationsschaltflächen. Sie müssen mindestens zwei Felder ausfüllen.

3. Klicken Sie auf die Schaltfläche Add Stripe Secret Key

   

   • Geben Sie Ihren geheimen Stripe-Schlüssel im Feld STRIPE_SECRET_KEY ein.
   • Geben Sie für jeden Plan die entsprechende Stripe-Preis-ID in das Feld ein, das auf PRICE_ID endet.

   

   Ihren geheimen Stripe-Schlüssel finden Sie hier: https://dashboard.stripe.com/test/apikeys

   Navigieren Sie zu Product Catalog > Products und holen Sie sich die Preis-ID mit einer der folgenden Methoden:

   • Klicken Sie in der Liste "Pricing" auf die Schaltfläche „More“ rechts neben dem entsprechenden Preis und dann auf "Copy Price ID".

   

   Sie können auch direkt auf den Preisnamen klicken, um die Detailseite zu öffnen, und dann die oben rechts angezeigte Preis-ID kopieren.

   

   Fügen Sie schließlich jede Preis-ID sorgfältig in das entsprechende Eingabefeld ein.

   

   Hinweis: Aus Datenschutz- und Sicherheitsgründen fügen Sie Ihren geheimen Schlüssel niemals direkt in den MGX-Chat ein. Eine Offenlegung kann unbefugten Zugriff auf Ihr Stripe-Konto ermöglichen. Verwenden Sie stattdessen die Schaltfläche "Add API Key" von MGX, um ihn sicher zu speichern.

4. Klicken Sie auf die Schaltfläche Add Stripe Webhook Secret Key

   

   • Geben Sie Ihren Webhook Secret Key ein

5. So finden Sie den Webhook Secret Key:

   Klicken Sie in Stripe unten links auf „Developers“ und wählen Sie dann die Option Webhooks aus.

   

   Klicken Sie auf der Webhooks-Seite auf die Schaltfläche "Add destination".

   

   Wählen Sie die Webhook-Ereignisse aus, die zu den Anforderungen Ihres Projekts passen:

   • checkout.session.async_payment_failed
   • checkout.session.async_payment_succeeded
   • checkout.session.completed
   • checkout.session.expired

   

   Nachdem Sie auf "Continue" geklickt haben, wählen Sie "Webhook endpoint" aus.

   

   Geben Sie die Endpoint-URL aus Supabase ein.

   

6. So finden Sie Ihre Supabase-Endpoint-URL:

   Klicken Sie in MGX auf View Edge Function.

   

   • Klicken Sie, um die Edge Function mit dem entsprechenden Suffix _webhook auszuwählen.

     

   • Kopieren Sie im Detailbereich der entsprechenden Edge Function die Endpoint-URL und fügen Sie sie in das Stripe Event Destination ein.

     

7. Testen Sie Ihre Integration

   Verwenden Sie den Testmodus von Stripe, um Zahlungen zu testen.

   Testkartendaten:

   • Kartennummer: 4242 4242 4242 4242
   • Beliebiges zukünftiges Ablaufdatum
   • Beliebige 3-stellige CVC

FAQ

Warum kann ich Zahlungen nicht im Vorschaumodus testen?

Der Vorschaumodus läuft in einer lokalen Umgebung, die keine öffentlich zugängliche Webhook-URL bereitstellt. Sie müssen Ihre App bereitstellen, um Stripe-Ereignisse zu empfangen.

Wie wechsle ich in den Produktionsmodus?

Sie können den Testmodus im Stripe-Dashboard deaktivieren und Ihren Live Secret Key sowie Ihr Webhook Secret verwenden.

Wie kann ich überprüfen, ob eine Testzahlung erfolgreich war?

Gehen Sie nach Abschluss einer Testzahlung zur Seite Payments in Stripe, um Ihre Test-Transaktionsdatensätze anzuzeigen.