# Stripe für Visual Studio Code Erstellen, testen und verwenden Sie Stripe in Ihrem Editor. Mit der Stripe-[Erweiterung](https://marketplace.visualstudio.com/items?itemName=Stripe.vscode-stripe) für [Visual Studio Code](https://code.visualstudio.com/) können Sie API-Anfrage-Logs einsehen, Ereignisse an Ihre Anwendung weiterleiten und Stripe in Ihrem Editor verwenden. Ein neues Stripe-Panel in der Aktivitätenleiste bietet Zugriff auf Codeausschnitte für mehrere Sprachen, fügt [Debug-Konfigurationen](https://code.visualstudio.com/docs/editor/debugging#_redirect-inputoutput-tofrom-the-debug-target) hinzu und erweitert die [Befehlspalette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette) um gängige Abläufe für Entwickler/innen. Mit Stripe für VS Code können Sie Folgendes tun: - [Stripe-Webhook-Ereignisse an Ihre lokale Anwendung weiterleiten.](https://docs.stripe.com/stripe-vscode.md#webhooks) - [Anfragenprotokolle in Echtzeit streamen.](https://docs.stripe.com/stripe-vscode.md#monitor-logs) - [Neue Ereignisse beim Testen auslösen.](https://docs.stripe.com/stripe-vscode.md#webhooks) - [Snippets für gängige Szenarien generieren.](https://docs.stripe.com/stripe-vscode.md#snippets) - [Überprüfen Sie, ob in Ihrem Code API-Schlüssel zugänglich gemacht werden.](https://docs.stripe.com/stripe-vscode.md#linter) - [Schnell die API-Dokumentation aufrufen.](https://docs.stripe.com/stripe-vscode.md#api-reference) - [Auf das Stripe-Dashboard zugreifen.](https://docs.stripe.com/stripe-vscode.md#dashboard-access) ## Stripe für VS Code installieren > Stellen Sie als Voraussetzung sicher, dass die [Stripe-CLI](https://docs.stripe.com/cli/install) installiert ist. Sie finden die Stripe VS Code-Erweiterung im [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Stripe.vscode-stripe). Klicken Sie auf **Install** (Installieren), um die Erweiterung zu Ihrem Editor hinzuzufügen. ## Funktionen ### Webhook-Ereignisse auslösen und weiterleiten Es gibt zwei Möglichkeiten, eingehende Webhooks zu überwachen und an Ihren lokalen Computer weiterzuleiten: - Klicken Sie im Abschnitt **Events** (Ereignisse) auf **Forward webhook events to your local machine** (Webhook-Ereignisse an Ihren lokalen Computer weiterleiten). - Führen Sie den Befehl `Stripe: Forward webhook events to your local machine` über die [Befehlspalette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette) aus. Geben Sie dann die Localhost-URL an, an die Sie die Ereignisse weiterleiten möchten. Wenn Sie Connect nutzen, können Sie für Ereignisse von Ihren Connect-Anwendungen eine andere URL festlegen. Wenn Ihre Localhost-URLs HTTPS verwenden, können Sie die SSL-Zertifikatsverifizierung überspringen. Mit der Schaltfläche **Trigger new event** (Neues Ereignis auslösen) können Sie Ihre Webhook-Integration mit Ereignissen von der Stripe-API testen. > Sie können Ereignisse nur in einer Testumgebung auslösen. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/forward-webhooks-demo_2.0.0.mp4) Mit der Schaltfläche **Start streaming events** (Ereignis-Stream starten) können Sie Ereignisse, die von Mitgliedern Ihres Kontos erstellt wurden, in Echtzeit streamen. Wenn Sie unter **Recent events** (Kürzliche Ereignisse) auf ein Ereignis klicken, werden die Ereignisdetails direkt in Ihrem Editor geöffnet. > Falls Sie ein Ereignis erneut senden möchten, können Sie unter **Recent events** (Kürzliche Ereignisse) auf ein Ereignis klicken oder einen [Stripe-CLI](https://docs.stripe.com/cli/events/resend)-Befehl ausführen: `stripe events resend `. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/events-stream.mp4) #### Stripe-Debug-Konfiguration Wenn Sie Ereignisse an Ihren lokalen Computer weiterleiten, müssen Sie unter Umständen dieselben URLs immer wieder eingeben. Um das zu umgehen, können Sie eine [Debug Configuration](https://code.visualstudio.com/docs/editor/debugging#_redirect-inputoutput-tofrom-the-debug-target) erstellen, um Ihre Weiterleitungskonfiguration zu speichern. Auf diese Weise können Sie Ihre URLs mit einer einzigen Schaltfläche weiterleiten. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/debug-configuration.mp4) Fügen Sie die folgende Konfiguration in eine [launch.json](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations)-Datei ein, mit der VS Code die Details der Debugging-Konfiguration dokumentiert. Wählen Sie dann diese Konfiguration in der Ansicht „Run“ (Ausführen) aus. Drücken Sie nach dem Auswählen Ihrer Konfiguration die `F5`-Taste, um schnell mit dem Weiterleiten von Ereignissen zu beginnen. ```json { "version": "0.2.0", "configurations": [ { "name": "Stripe: Webhooks listen", "type": "stripe", "request": "launch", "command": "listen", "forwardTo": "http://localhost:3000", "forwardConnectTo": "http://localhost:3000", "events": ["payment_intent.succeeded", "payment_intent.canceled"], "skipVerify": true } ] } ``` Sie können die Parameter `forwardTo` und `forwardConnectTo` festlegen. Dabei handelt es sich um die URLs auf Ihrem lokalen Computer, an die die Ereignisse Ihres Kontos bzw. die Connect-Ereignisse weitergeleitet werden. Im Parameter `events` kann mit einer optionalen Liste festgelegt werden, welche Ereignisse empfangen werden sollen. Wenn Sie URLs mit HTTPS verwenden, kann für den Parameter `skipVerify` ein boolescher Wert angegeben werden, um die SSL-Zertifikatsverifizierung zu überspringen. #### Compound Configurations (zusammengesetzte Konfigurationen) Mit einer [Compound Configuration](https://code.visualstudio.com/docs/editor/debugging#_compound-launch-configurations) können Sie zeitgleich Ihre lokale Anwendung starten und Webhook-Ereignisse weiterleiten. ```json { "version": "0.2.0", "configurations": [ { "name": "Stripe: Webhooks listen", "type": "stripe", "request": "launch", "command": "listen", "forwardTo": "http://localhost:3000", "forwardConnectTo": "http://localhost:3000", "events": ["payment_intent.succeeded", "payment_intent.canceled"], "skipVerify": true }, { "type": "node", "request": "launch", "name": "Node: Launch Program", "program": "${workspaceFolder}/examples/standalone.js", "skipFiles": ["/**"] } ], "compounds": [ { "name": "Launch: Stripe + API", "configurations": ["Node: Launch Program", "Stripe: Webhooks listen"] } ] } ``` ### API-Anfragenprotokolle in Echtzeit überwachen Mit der Schaltfläche **Start streaming API logs** (API-Anfragenprotokoll-Stream starten) können Sie API-Anfragenprotokolle, die von Mitgliedern Ihres Kontos erstellt wurden, in Echtzeit streamen. Wenn Sie unter **Recent logs** (kürzliche Protokolle) auf ein Protokoll klicken, werden die Protokolldetails direkt in Ihrem Editor geöffnet. Sie können anschließend den Mauszeiger über die Anfragen-ID bewegen, um das Protokoll in Ihrem Dashboard zu öffnen. > Die Erweiterung stellt nur Protokolle für Anfragen zur Verfügung, die in der Testumgebung durchgeführt wurden. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/logs-stream.mp4) ### Code-Snippets für gängige Stripe-Szenarien Sie können schnell Code-Snippets für gängige Szenarien (z. B. Erstellen einer Checkout-Sitzung und Weiterleiten der Nutzer/innen an den Browser) oder einfache API-Anfragen generieren. Nachdem Sie ein Snippet generiert haben, können Sie mit der Tab-Taste durch das Snippet navigieren, um Ihre Werte einzutragen. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/stripe_vs_code_snippets_1.7.1.mp4) ### Überprüfen, ob Ihr Code API-Schlüssel zugänglich macht Der integrierte Linter von Stripe überprüft Ihren Quellcode auf [API-Schlüssel](https://docs.stripe.com/keys.md) und markiert sie als Probleme, wenn sie unsicher zugänglich gemacht wurden. > Bei unsicherer Verwendung behandelt der Linter Test-Modus-Schlüssel als Warnungen und Live-Modus-Schlüssel als Fehler. ![](https://b.stripecdn.com/docs-statics-srv/assets/api_key_linter.99d5ec681ed1835e12ec8ff43a31df42.png) ### Auf die Stripe-API-Dokumentation zugreifen Sie können mit der Maus über eine Ressourcenmethode fahren, um einen Link zur [Stripe-API-Dokumentation](https://docs.stripe.com/api.md) einzublenden. Sie können diese verwenden, um Parameter für eine API-Anfrage oder das Format einer API-Antwort zu ermitteln. ![](https://b.stripecdn.com/docs-statics-srv/assets/api_reference_hover.7faf7deee997b0f54656ed4a4f842e14.png) ### Auf das Stripe-Dashboard zugreifen Der Abschnitt **Quick Links** enthält Links, mit denen Sie schnell das Dashboard aufrufen können, um API-Schlüssel, Webhooks und andere Ressourcen zu verwalten. ![](https://b.stripecdn.com/docs-statics-srv/assets/quick_links_view.dd5362166ad40a383ca540bc62e71ed6.png) ## Einstellungen Folgende Konfigurationen können in Ihren [VS Code-Einstellungen](https://code.visualstudio.com/docs/getstarted/settings) festgelegt werden: | Bezeichnung der Einstellung | Beschreibung | | --- | --- | | `stripe.cliInstallPath` | Gibt den absoluten Installationspfad für die ausführbare Stripe-CLI-Datei an. Standardeinstellung: Der Standardinstallationspfad für das Stripe-CLI. | | `stripe.projectName` | Gibt den Projektnamen an, der aus der Stripe-CLI-Konfiguration abgerufen wird. Sie können eine eindeutige Konfiguration für jedes einzelne Projekt definieren oder die globale Konfiguration als Standard verwenden. Weitere Informationen finden Sie im [Stripe-CLI-Referenzdokument](https://docs.stripe.com/cli/login). Standardwert: `default` | | `stripe.telemetry.enabled` | Legt fest, ob die Stripe-Telemetrie aktiviert ist (richtet sich auch im aktivierten Zustand nach der globalen Einstellung `telemetry.enableTelemetry`). Standardwert: `true`. | ## Befehle Die Erweiterung unterstützt verschiedene Befehle, mit denen über die [Befehlspalette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette) auf Funktionen zugegriffen werden kann. Um die vollständige Liste unterstützter Befehle anzuzeigen, öffnen Sie die Befehlspalette und geben `Stripe` ein. ![](https://b.stripecdn.com/docs-statics-srv/assets/command_palette.ee0cb66b2fbbc0c2e981e1340815e57e.png) ## See also - [Stripe-CLI](https://docs.stripe.com/cli.md) - [Webhooks](https://docs.stripe.com/webhooks.md)