# Stripe pour Visual Studio Code Développez, testez et utilisez Stripe depuis votre éditeur. L’[extension](https://marketplace.visualstudio.com/items?itemName=Stripe.vscode-stripe) de Stripe pour [Visual Studio Code](https://code.visualstudio.com/) vous permet de générer des exemples de code, d’afficher les logs de requêtes API, de transmettre des événements à votre application et d’utiliser Stripe dans votre éditeur. Le nouveau panneau Stripe dans la barre d’activités permet d’accéder aux extraits de code dans plusieurs langues, d’ajouter des [configurations de débogage](https://code.visualstudio.com/docs/editor/debugging#_redirect-inputoutput-tofrom-the-debug-target) et de développer la [palette de commandes](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette) avec des flux de développement communs. Avec Stripe pour VS Code, vous pouvez : - [Utiliser un assistant IA pour votre intégration Stripe.](https://docs.stripe.com/stripe-vscode.md#ai-assistant) - [Démarrer avec un modèle Stripe.](https://docs.stripe.com/stripe-vscode.md#samples) - [Transférer des événements webhook Stripe vers votre application locale.](https://docs.stripe.com/stripe-vscode.md#webhooks) - [Streamer les logs de requêtes en temps réel.](https://docs.stripe.com/stripe-vscode.md#monitor-logs) - [Déclencher de nouveaux événements pendant les tests.](https://docs.stripe.com/stripe-vscode.md#webhooks) - [Générer des extraits pour les scénarios communs.](https://docs.stripe.com/stripe-vscode.md#snippets) - [Vérifier que votre code source n’expose pas les clés API.](https://docs.stripe.com/stripe-vscode.md#linter) - [Accéder rapidement à la documentation de l’API.](https://docs.stripe.com/stripe-vscode.md#api-reference) - [Accéder au Dashboard Stripe.](https://docs.stripe.com/stripe-vscode.md#dashboard-access) ## Installer Stripe pour VS Code > Comme prérequis, assurez-vous que la [Stripe CLI](https://docs.stripe.com/stripe-cli/install.md) est installée. Vous trouverez l’extension Stripe VS Code sur la [place de marché de Visual Studio](https://marketplace.visualstudio.com/items?itemName=Stripe.vscode-stripe). Cliquez sur **Install** (Installer) pour ajouter l’extension à votre éditeur. ## Fonctionnalités ### Utilisez un assistant IA pour votre intégration Stripe L’assistant IA de Stripe applique les connaissances de Stripe à votre éditeur VS Code pour vous aider à créer des intégrations. Il combine des grands modèles linguistiques avec la documentation Stripe, la documentation de l’API, des extraits de code et des informations pour les développeurs afin de vous aider directement dans votre environnement de développement. Avec l’assistant IA de Stripe, vous pouvez : - Obtenir des réponses immédiates sur l’API et les produits Stripe - Recevoir des suggestions de code adaptées à votre intégration - Poser des questions de suivi pour obtenir des informations plus détaillées - Accéder aux connaissances disponibles dans la documentation Stripe et auprès de la communauté des développeurs Stripe Pour démarrer avec l’assistant IA de Stripe : 1. Assurez-vous d’avoir installé l’extension Stripe VS Code. 1. Accédez à l’interface utilisateur de l’extension Stripe. 1. Sous **Assistant IA**, cliquez sur **Poser une question**. - Si vous utilisez Copilot, le chat Copilot s’ouvre, dans lequel vous pouvez @-mentionner `@stripe`. Dans le champ de saisie, adressez-vous à l’assistant propre à Stripe en utilisant le paramètre `@stripe` suivi de votre question. - Si vous n’utilisez pas Copilot, une interface utilisateur de chat s’ouvre dans laquelle vous pouvez parler directement au LLM de Stripe. ![](https://docs.stripecdn.com/236b4a0f43c11245f1afc59557ecc6f2d2170fdcf7ae3f843793df1e8007c625.mp4) ### Démarrer rapidement avec un exemple Stripe Les [exemples Stripe](https://github.com/stripe-samples) sont intégrés dans Stripe, et fournissent tous les codes client et serveur dont vous avez besoin pour les scénarios communs d’intégration, comme la création d’un abonnement avec Stripe Billing. Le bouton **Démarrer avec un exemple Stripe** vous permet de parcourir le catalogue et de sélectionner la langue de votre intégration. L’extension est clonée et ouvre l’exemple dans un nouvel espace de travail, et vos clés API sont automatiquement renseignées dans le fichier .env de l’exemple. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/samples-demo-3.mp4) ### Déclencher et transférer les événements webhook Vous pouvez écouter les événements webhook entrants et les transférer vers votre machine locale en suivant l’une des deux méthodes suivantes : - Dans la section **Événements**, cliquez sur **Transférer les événements webhook vers votre machine locale**. - Exécutez la commande `Stripe: Forward webhook events to your local machine` à partir de la [palette de commandes](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette). Ensuite, saisissez l’URL de l’hôte local vers lequel vous souhaitez transférer les événements. Si vous utilisez Connect, vous pouvez définir une URL différente pour les événements à partir de vos applications Connect. Si les URL de votre hôte local utilisent le protocole HTTPS, vous pouvez ignorer la vérification du certificat SSL. Vous pouvez utiliser le bouton **Déclencher un nouvel événement** pour tester votre intégration de webhook avec des événements à partir de l’API Stripe. > Vous pouvez uniquement déclencher les événements dans un environnement de test. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/forward-webhooks-demo_2.0.0.mp4) Vous pouvez afficher en temps réel les événements créés par les membres de votre compte en cliquant sur le bouton **Lancer l’affichage des événements**. En cliquant sur un événement sous **Événements récents**, vous pouvez ouvrir les informations de l’événement directement dans votre éditeur. > Si vous voulez renvoyer un événement, vous pouvez cliquer avec le bouton droit de la souris sur l’entrée d’un événement sous **Événements récents** ou exécuter une commande de la [CLI Stripe](https://docs.stripe.com/cli/events/resend) : `stripe events resend `. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/events-stream.mp4) #### Configuration de débogage Stripe Lorsque vous transférez des événements vers votre machine locale, il se peut que vous entriez sans cesse les mêmes URL. Pour régler ce problème, vous pouvez créer une [configuration de débogage](https://code.visualstudio.com/docs/editor/debugging#_redirect-inputoutput-tofrom-the-debug-target) pour enregistrer votre configuration de transfert, ce qui vous permettra de lancer le transfert vers vos URL avec un simple bouton. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/debug-configuration.mp4) Placez la configuration suivante dans un fichier [launch.json](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations), que VS Code utilise pour suivre les informations relatives à la configuration de débogage. Sélectionnez ensuite la configuration dans la vue Exécuter. Après avoir sélectionné votre configuration, appuyez sur `F5` pour lancer rapidement le transfert des événements. ```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 } ] } ``` Vous pouvez spécifier les paramètres `forwardTo` et `forwardConnectTo`. Il s’agit des URL sur votre machine locale sur lesquelles vous recevrez les événements du compte et les événements Connect, respectivement. Le paramètre `events` prend en charge une liste facultative permettant d’indiquer les événements à recevoir. Si vous utilisez des URL HTTPS, le paramètre `skipVerify` accepte une valeur booléenne permettant d’ignorer la vérification des certificats SSL. #### Combinaison de configurations Vous pouvez lancer votre application locale et transférer les événements webhook de manière simultanée avec une [combinaison de configurations](https://code.visualstudio.com/docs/editor/debugging#_compound-launch-configurations). ```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"] } ] } ``` ### Suivre les logs de requêtes API en temps réel Vous pouvez streamer les logs de requêtes API créés par les membres de votre compte en temps réel avec le bouton **Lancer le stream des logs API**. Si vous cliquez sur une entrée sous **Logs récents**, les informations du log s’ouvrent directement dans votre éditeur. Dès lors, vous pouvez survoler l’ID de la requête pour ouvrir le log dans votre Dashboard. > L’extension fournit uniquement des logs pour les requêtes exécutées dans un environnement de test. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/logs-stream.mp4) ### Extraits de code pour les scénarios Stripe communs Vous pouvez générer rapidement des extraits de codes pour les scénarios communs (par exemple, pour la création d’une session Checkout ou la redirection de l’utilisateur vers le navigateur) ou les requêtes API de base. Après avoir généré un extrait, vous pouvez le parcourir pour y saisir vos valeurs. ![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/stripe_vs_code_snippets_1.7.1.mp4) ### Vérifier que votre code source n’expose pas les clés API Le linter intégré de Stripe contrôle les [clés API](https://docs.stripe.com/keys.md) dans votre code source et les marque comme problématiques si vous les exposez de manière non sécurisée. > Le linter génère des avertissements en cas d’utilisation non sécurisée des clés en mode test et des erreurs en présence de clés en mode production. ![](https://b.stripecdn.com/docs-statics-srv/assets/api_key_linter.99d5ec681ed1835e12ec8ff43a31df42.png) ### Accéder à la documentation de l’API Stripe Vous pouvez survoler une méthode de ressources pour faire apparaître un lien vers la [documentation de l’API Stripe](https://docs.stripe.com/api.md). Cela vous permet notamment d’identifier les paramètres d’une requête API ou la forme d’une réponse de l’API. ![](https://b.stripecdn.com/docs-statics-srv/assets/api_reference_hover.7faf7deee997b0f54656ed4a4f842e14.png) ### Accéder au Dashboard Stripe La section **Liens rapides** inclut des liens permettant d’accéder rapidement au Dashboard pour gérer les clés API, les webhooks et d’autres ressources. ![](https://b.stripecdn.com/docs-statics-srv/assets/quick_links_view.dd5362166ad40a383ca540bc62e71ed6.png) ## Paramètres Les configurations suivantes peuvent être définies dans vos [paramètres VS Code](https://code.visualstudio.com/docs/getstarted/settings) : | Nom du paramètre | Description | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stripe.cliInstallPath` | Indique le chemin d’installation absolu pour l’exécutable de la CLI Stripe. Par défaut : le chemin d’installation par défaut utilisé par la CLI Stripe | | `stripe.projectName` | Indique le nom de projet à lire à partir de la configuration de la CLI Stripe. Vous pouvez définir une configuration unique pour chaque projet, ou utiliser une configuration générale par défaut. Consultez la [documentation relative à la CLI Stripe](https://docs.stripe.com/cli/login) pour plus d’informations. Par défaut : `default` | | `stripe.telemetry.enabled` | Indique s’il faut activer la télémesure Stripe (même si activée, elle doit toujours respecter le paramètre général `telemetry.enableTelemetry`). Par défaut : `true` | ## Commandes L’extension prend en charge diverses commandes permettant d’accéder aux fonctionnalités via la [palette de commandes](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette). Pour afficher la liste complète des commandes prises en charge, ouvrez la palette de commandes et saisissez `Stripe`. ![](https://b.stripecdn.com/docs-statics-srv/assets/command_palette.ee0cb66b2fbbc0c2e981e1340815e57e.png) ## See also - [CLI Stripe](https://docs.stripe.com/stripe-cli.md) - [Webhooks](https://docs.stripe.com/webhooks.md)