Weiter zum Inhalt
Konto erstellen
oder
anmelden
Das Logo der Stripe-Dokumentation
/
KI fragen
Konto erstellen
Anmelden
Jetzt starten
Zahlungen
Finanzautomatisierung
Plattformen und Marktplätze
Geldmanagement
Entwickler-Tools
Jetzt starten
Zahlungen
Finanzautomatisierung
Jetzt starten
Zahlungen
Finanzautomatisierung
Plattformen und Marktplätze
Geldmanagement
Übersicht
Versionierung
Änderungsprotokoll
Aktualisieren Sie Ihre API-Version
Ihre SDK-Version aktualisieren
Entwickler-Tools
SDKs
API
Tests
Workbench
Ereignisziele
Arbeitsabläufe
Stripe-CLI
Stripe Shell
Entwickler-Dashboard
Agent-Toolkit
Stripe-StatuswarnungenBuild with LLMsStripe für Visual Studio CodeHochgeladene Dateien
Sicherheit
Sicherheit
Extend Stripe
Stripe-Apps
    Übersicht
    Jetzt starten
    Eine App erstellen
    Funktionsweise von Stripe-Apps
    Beispiel-Apps
    App erstellen
    Shop-Geheimnisse
    API-Authentifizierungsmethoden
    Autorisierungsabläufe
    Serverseitige Logik
    Ereignisse überwachen
    Umgang mit verschiedenen Modi
    Sandbox-Unterstützung aktivieren
    App-Einstellungsseite
    Erstellen Sie eine Nutzeroberfläche
    Onboarding
    Ihre App verbreiten
    Vertriebsmöglichkeiten
    App hochladen
    Versionen und Releases
    Ihre App testen
    Ihre App veröffentlichen
    Ihre App bewerben
    Deep-Links hinzufügen
    Installationslinks erstellen
    Rollen in Erweiterungen der Nutzeroberfläche zuweisen
    Aktionen nach der Installation
    App-Analytik
    Eingebettete Komponenten für Apps
    Stripe-Apps von Drittanbietern einbetten
    Umstellung auf Stripe Apps
    Migrieren oder Erweiterung erstellen
    Ein Plugin zu Stripe Apps oder Stripe Connect migrieren
    Verwendungszweck
    App-Manifest
    CLI
    Erweiterungs-SDK
    Berechtigungen
    Darstellungsfelder
    Entwurfsmuster
    Komponenten
Stripe Connectors
Partner
Partner-Ecosystem
Partner-Zertifizierung
StartseiteEntwickler-ToolsStripe Apps

Starten mit Stripe Apps

Lernen Sie die Grundlagen der App-Entwicklung kennen, indem Sie eine App im Stripe-Dashboard erstellen.

Seite kopieren

In diesem Leitfaden erstellen Sie eine „Hallo Welt“-Beispiel-App mit einer Erweiterung der Nutzeroberfläche auf der Seite mit Kundendetails im Stripe-Dashboard.

Bevor Sie starten

  1. Wenn Sie bereits eine Connect-Erweiterung verwenden, steigen Sie auf Stripe Apps um.
  2. Melden Sie sich beim Stripe-Dashboard an.
  3. Sofern noch nicht geschehen, installieren Sie die Stripe-CLI und melden Sie sich mit demselben Konto an.
    Command Line
    Homebrew
    # Install Homebrew to run this command: https://brew.sh/ brew install stripe/stripe-cli/stripe # Connect the CLI to your dashboard stripe login

    Weitere Installationsoptionen finden Sie unter Mit der Stripe-CLI loslegen.

  4. Vergewissern Sie sich, dass es sich um die Version 1.12.4 oder neuer handelt. Dies können Sie folgendermaßen überprüfen:
    Command Line
    stripe version
    Wenn Ihre Stripe-CLI-Version älter als Version 1.12.4 ist, aktualisieren Sie Ihre Stripe-CLI auf die neueste Version.
  5. Stellen Sie sicher, dass Node installiert und auf dem neuesten Stand ist.
    Command Line
    node -v
    Sie können die Abhängigkeiten Ihrer App mit NPM oder Yarn verwalten. Verwenden Sie die neueste stabile Version für ein optimales Entwicklungserlebnis. Wenn Sie Ihre App auf dem App Marketplace veröffentlichen möchten gelten zusätzliche Einschränkungen:
  • Ihr Konto muss aktiviert werden.
  • Um derzeit eine App auf dem Stripe Marketplace zu veröffentlichen, dürfen Sie kein Plattformkonto sein.

Installation des Stripe Apps CLI-Plugins

Um mit der Erstellung einer Stripe-App zu beginnen, installieren Sie das CLI-Plugin für Stripe-Apps:

Command Line
stripe plugin install apps

Wenn Sie das apps-Plugin bereits installiert haben, stellen Sie sicher, dass Sie Version 1.5.12 oder höher verwenden.

Command Line
stripe apps -v # apps version 1.5.12

Wenn Sie das apps-Plugin aktualisieren müssen, können Sie Folgendes ausführen:

Command Line
stripe plugin upgrade apps

Eine App erstellen

  1. Die grundlegende Struktur Ihrer „Hallo Welt“-App erstellen:

    Command Line
    stripe apps create helloworld
  2. Folgen Sie der Eingabeaufforderung, indem Sie folgende Informationen eingeben:

    • ID: Sie können die automatisch generierte App-ID akzeptieren oder anpassen. So identifiziert Stripe Ihre App. Ihre App-ID muss global eindeutig sein.
    • Anzeigename: Geben Sie einen Anzeigenamen ein. Dies ist der Name, den Ihr Dashboard für Ihre App anzeigt. Sie können diesen Namen später jederzeit ändern.

Die Verzeichnisdatei weist nun die folgende Struktur auf:

Stripe Apps unterstützt nur React 17. Stellen Sie sicher, dass alle von Ihnen installierten Abhängigkeiten mit dieser Version kompatibel sind. Weitere Informationen finden Sie unter Funktionsweise von Nutzeroberflächen-Erweiterungen.

Vorschau Ihrer App anzeigen

Sie können Ihre App lokal ausführen, aktualisieren und Ihre Änderungen im Dashboard als Vorschau anzeigen:

  1. Wechseln Sie zum Verzeichnis helloworld:

    Command Line
    cd helloworld
  2. Um eine Vorschau Ihrer App anzuzeigen, starten Sie Ihren lokalen Entwicklungsserver:

    Command Line
    stripe apps start
  3. Drücken Sie Enter, um den Browser zu öffnen.

    Notiz

    Verwenden Sie einen Browser, der das Stripe-Dashboard unterstützt. Safari unterstützt das Dashboard nicht. Weitere Aktualisierungen finden Sie in der Browserunterstützung für GitHub-Probleme.

  4. Klicken Sie auf Weiter, um eine Vorschau der App in Ihrem Stripe-Konto anzuzeigen:

    Screenshot zum Aktivieren des Vorschaumodus

    App-Vorschau aktivieren

    Hallo Welt-App

    Ihre App im Dashboard

Die App-Ansicht wird nur auf der Seite mit Kundendetails im Dashboard dargestellt. Wenn Ihre App nicht angezeigt wird, erstellen Sie einen Kunden/eine Kundin im Dashboard.

Ihre App erstellen

Während Sie Ihre App im Dashboard in der Vorschau anzeigen, ermöglicht der lokale Entwicklungsserver Echtszeit-Updates für Ihre App:

  1. Ändern Sie den Titel in Ihrer Datei App.tsx bei geöffnetem Stripe-Dashboard und laufendem Entwicklungsserver. Speichern Sie die Datei, um Ihre Änderungen in Ihrer App anzuzeigen.

  2. Entfernen Sie in derselben Datei das > aus dem schließenden Tag </ContextView> und speichern Sie die Datei, woraufhin ein Fehler angezeigt wird:

    Hallo Welt-Fehler

    Sie können den Fehler im Stripe-Dashboard, in den Browser-Entwicklertools oder in der Stripe-CLI beheben.

  3. Um den Entwicklungsserver zu deaktivieren, geben Sie in der Betreffzeile Ctrl+C ein.

Ihre Beispiel-App ist nun fertig. Beginnen Sie nun damit, Ihrer Stripe-App weitere Funktionen hinzuzufügen.

Siehe auch

  • Erstellen einer Erweiterung der Nutzeroberfläche
  • Serverseitige Logik hinzufügen
  • Verteilungsoptionen
War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unser Änderungsprotokoll an.
Fragen? Sales-Team kontaktieren.
LLM? Lesen Sie llms.txt.
Unterstützt von Markdoc