# Starten mit Stripe Apps

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

Erstellen Sie eine „Hello, world!“-Beispiel-App mit einer *Nutzeroberflächen-Erweiterung* (A set of APIs that allow you to inject user interface elements into the Stripe Dashboard using TypeScript and React) auf der Kundendatenseite im Stripe-Dashboard.

## Codierungsagenten verwenden

Der Stripe Apps-Skill hilft Ihrem Coding-Agenten dabei, anhand der neuesten Richtlinien von Stripe ein Grundgerüst für eine Stripe-App zu generieren, die App zu erstellen, in einer Vorschau anzuzeigen und zu testen. [Installieren Sie die Agenten-Skills von Stripe](https://docs.stripe.com/skills.md), starten Sie dann eine neue Agenten-Sitzung in dem Verzeichnis, in dem Sie Ihre App erstellen möchten, und verwenden Sie diesen Prompt:

```bash
Use the Stripe Apps skill to build a "Hello, world!" Stripe app that displays a UI extension on the Customer details page. Guide me through previewing and testing it.
```

Sie können auch der folgenden Schritt-für-Schritt-Anleitung folgen.

## Bevor Sie starten

> **Entwicklung einer App bei bestehender Stripe-Erweiterung**
> 
> Wenn Sie eine bestehende *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients)-Erweiterung haben, lesen Sie [Zu Stripe Apps migrieren](https://docs.stripe.com/stripe-apps/migrate-connect-extension.md).

1. [Melden Sie sich im Stripe-Dashboard an](https://dashboard.stripe.com) oder [erstellen Sie ein Konto](https://dashboard.stripe.com/register/stripe_apps).
2. [Installieren Sie die Stripe-CLI](https://docs.stripe.com/cli/install). Wenn Sie diese bereits installiert haben, überprüfen Sie, ob Sie Version 1.52.0 oder neuer verwenden, indem Sie Folgendes ausführen:
   ```bash
   stripe version
   ```
Wenn Ihre Version älter als 1.52.0 ist, [aktualisieren Sie die Stripe-CLI](https://docs.stripe.com/cli/upgrade).
3. Melden Sie sich bei der Stripe-CLI an, indem Sie Folgendes ausführen:
   ```bash
   stripe login
   ```
Folgen Sie den Eingabeaufforderungen, um dasselbe Stripe-Konto auszuwählen, das Sie im Dashboard verwenden.
4. Überprüfen Sie, ob [Node.js](https://nodejs.org/) installiert ist, indem Sie Folgendes ausführen:
   ```bash
   node -v
   ```
Stripe Apps erfordert die Node.js-Version `>=22`. Wir empfehlen die Verwendung einer [aktiven LTS-Version](https://nodejs.org/en/about/previous-releases) (22 oder neuer). Wenn Node.js bei Ihnen nicht installiert ist, [laden Sie es herunter und installieren Sie es](https://nodejs.org/en/download/).
5. Installieren Sie [pnpm](https://pnpm.io/installation). Stripe Apps verwendet pnpm als Paketmanager:
   ```bash
   brew install pnpm
   ```
Überprüfen Sie die Installation:
   ```bash
   pnpm --version
   ```

Wenn Sie planen, [Ihre App im App-Marktplatz zu veröffentlichen](https://docs.stripe.com/stripe-apps/publish-app.md), gelten zusätzliche Einschränkungen:

- Sie müssen über ein [Live-Stripe-Konto](https://docs.stripe.com/get-started/account/set-up.md) mit einer verifizierten E-Mail-Adresse und Unternehmensangaben verfügen.
- Ein [Connect-Plattformkonto](https://docs.stripe.com/connect.md) kann keine App im Stripe Marketplace veröffentlichen.

Wenn Sie eine [Erweiterung](https://docs.stripe.com/extensions/how-extensions-work.md) erstellen, vergewissern Sie sich, dass Sie über Folgendes verfügen:

| Voraussetzung | Einrichtung |
| --- | --- |
| [Stripe-Konto](https://docs.stripe.com/get-started/account/set-up.md) mit Zugriff auf die private Vorschau der Erweiterungen | Wenn Sie keinen Zugriff haben, [registrieren](https://docs.stripe.com/stripe-apps/create-app.md#signup) Sie sich für den frühzeitigen Zugriff. |
| [Stripe-CLI](https://docs.stripe.com/cli.md) v1.52.0 oder höher. Sie müssen in Ihrem Konto angemeldet sein | Führen Sie zur Überprüfung `stripe version` aus. [Installieren](https://docs.stripe.com/cli/install) oder [aktualisieren](https://docs.stripe.com/cli/upgrade) Sie bei Bedarf. |
| Eine [Sandbox](https://docs.stripe.com/sandboxes.md) (empfohlen für die erstmalige Einrichtung) | Erstellen Sie eine im Dashboard, falls Sie noch keine haben. |
| [Node.js](https://nodejs.org) v22 oder höher | `node --version` |
| [pnpm](https://github.com/pnpm/pnpm/releases) v10 (v11 wird nicht unterstützt) | `pnpm --version` |
| [Stripe Apps CLI-Plug-in](https://docs.stripe.com/stripe-apps/create-app.md#install-stripe-apps-cli) v1.19.0 oder höher | `stripe plugin install apps` und bestätigen Sie dann mit `Stripe apps -v` |
| Generate-Plug-in v0.11.5 oder höher | Mit `stripe generate --version` bestätigen |

## Installation des Stripe Apps CLI-Plugins

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

```bash
stripe plugin install apps
```

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

```bash
stripe apps -v
# apps version 1.19.0
```

Wenn Sie das Plug-in `apps` bereits installiert haben, empfehlen wir, es auf die neueste Version zu aktualisieren, indem Sie Folgendes ausführen:

```bash
stripe plugin upgrade apps
```

## Die Version des Generate-CLI-Plug-in verifizieren

Das Generate-Plug-in fügt der Stripe-CLI Befehle zur Codegenerierung hinzu. Verwenden Sie `stripe generate app`, um das Startprojekt und die Konfiguration Ihrer App zu erstellen. Das Apps-Plug-in bietet Befehle, um Ihre App zu entwickeln, in der Vorschau anzuzeigen und hochzuladen.

Das Generate-Plug-in wird automatisch installiert, sobald Sie den Befehl `stripe generate` zum ersten Mal ausführen. Vergewissern Sie sich, dass Sie Version `0.11.5` oder höher verwenden:

```bash
stripe generate --version
# generate version 0.11.5
```

Wenn Sie das Plug-in `generate` bereits installiert haben, empfehlen wir, es auf die neueste Version zu aktualisieren, indem Sie Folgendes ausführen:

```bash
stripe plugin upgrade generate
```

## Eine App erstellen

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

   ```bash
   stripe generate app helloworld
   cd 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](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#schema) 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.

### Verzeichnisdateistruktur der App

| Dateipfad | Beschreibung |
| --- | --- |
| `src/views/` | Verzeichnis für Ihre TypeScript-Dateien, die Elemente der Nutzeroberfläche im Stripe-Dashboard erstellen, auch als *'Ansichten* (A view is a React component that creates UI extensions in the Stripe Dashboard) bezeichnet. |
| `src/views/App.tsx` | Die Beispiel-*Ansicht* (A view is a React component that creates UI extensions in the Stripe Dashboard) der Seite mit Kundendetails im Stripe-Dashboard. |
| `src/views/App.test.tsx` | Die Testdatei für die Funktionalität der `App.tsx`-Ansicht. |
| `stripe-app.json` | Die *App-Manifest* (In a Stripe App, the app manifest is a stripe-app.json file in your app's root directory. It defines your app's ID, views, permissions, and other essential properties)-Datei, die die Integration Ihrer App in die Stripe-Plattform beschreibt. |
| `package.json` | Die Datei, die Metadaten speziell für den Umgang mit App-Abhängigkeiten enthält. |
| `yarn.lock` | Automatisch generierte Datei, in der die aktuellen Versionen der App-Abhängigkeiten aufgeführt sind. |
| `jest.config.ts` | Die Konfigurationsdatei zur Ausführung von Testdateien. |
| `images.d.ts` | Die Typdeklaration für unterstützende Bilddateien in Ihrer Stripe-App. |
| `tsconfig.json` | Die Konfigurationsdatei für die Kompilierung von TypeScript-Dateien. |
| `.eslintrc.json` | Die Konfigurationsdatei für das Linting von TypeScript-Dateien. |
| `.vscode/extensions.json` | Die Datei, die die empfohlenen VS-Code-Erweiterungen enthält. |
| `.gitignore` | Die Datei, die Git anweist, bestimmte Dateien oder Ordner zu ignorieren. |

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](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#apps-cant-control-the-react-version).

## 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`:

   ```bash
   cd helloworld
   ```

2. Um eine Vorschau Ihrer App anzuzeigen, starten Sie Ihren lokalen Entwicklungsserver:

   ```bash
   stripe apps start
   ```

3. Drücken Sie **Enter**, um den Browser zu öffnen.

   > Verwenden Sie einen [Browser, der das Stripe-Dashboard unterstützt](https://docs.stripe.com/dashboard/basics.md). Safari unterstützt das Dashboard nicht. Weitere Aktualisierungen finden Sie in der [Browserunterstützung für GitHub-Probleme](https://github.com/stripe/stripe-apps/issues/146).

4. Klicken Sie auf **Weiter**, um eine Vorschau der App in Ihrem Stripe-Konto anzuzeigen:
![Screenshot zum Aktivieren des Vorschaumodus](https://b.stripecdn.com/docs-statics-srv/assets/enable_app_preview.7d71712d107d581e0a25a4ebaf71484e.png)
   
   App-Vorschau aktivieren
![Hallo Welt-App](https://b.stripecdn.com/docs-statics-srv/assets/helloworld_app.7b1588ce22f93f72ab2ecd07c44dd041.png)
   
   Ihre App im Dashboard

[Aktivieren Sie den lokalen Netzwerkzugriff](https://docs.stripe.com/stripe-apps/enable-local-network-access.md), bevor Sie Ihre App anzeigen.

## 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 `Home.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](https://b.stripecdn.com/docs-statics-srv/assets/helloworld_error.ee7aeea9d33b54f1e17b108f61741e97.png)
   
   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.

## See also

- [Erstellen einer Erweiterung der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/build-ui.md)
- [Serverseitige Logik hinzufügen](https://docs.stripe.com/stripe-apps/build-backend.md)
- [Verteilungsoptionen](https://docs.stripe.com/stripe-apps/distribution-options.md)

### Sie möchten eine Vorschau der neuen App-Komponenten und Funktionen?

Enter your email to request access.

```bash
curl https://docs.stripe.com/preview/register \
  -X POST \
  -H "Content-Type: application/json" \
  -H "Referer: https://docs.stripe.com/stripe-apps/create-app" \
  -d '{"email": "EMAIL", "preview": "stripe_apps_private_preview"}'
```