# 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) Stripe pour [Visual Studio Code](https://code.visualstudio.com/) vous permet de consulter les logs de requêtes API, de transférer des événements vers votre formulaire d’inscription 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 : - [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 > Au préalable, assurez-vous d’avoir installé la [CLI Stripe](https://docs.stripe.com/cli/install). 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 ### 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 ressource pour afficher un lien vers la [documentation de l’API Stripe](https://docs.stripe.com/api.md). Vous pouvez l’utiliser pour identifier les paramètres d’une requête API ou le format d’une réponse 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 - [Interface de ligne de commande Stripe](https://docs.stripe.com/cli.md) - [Webhooks](https://docs.stripe.com/webhooks.md)