Stripe for Visual Studio Code

Beta

Stripe’s extension for Visual Studio Code makes it easy to generate sample code, view API request logs, forward events to your application, and use Stripe within your editor.

A new Stripe panel in the activity bar provides easy access to code snippets for several languages, adds debug configurations, and extends the command palette with common developer workflows.

With Stripe for VS Code, you can:

• Stream real-time request logs from the terminal.
• Forward Stripe webhook events to your local application.
• Trigger new events while testing.
• Generate sample code for common scenarios.
• Verify your source code doesn’t expose API keys.
• Quickly jump to the API reference.
• Easily access the Stripe Dashboard.

Install Stripe for VS Code

You can find the Stripe VS Code extension in the Visual Studio Marketplace. Click Install to add the extension to your editor.

Alternatively, manually install the plugin:

1. See the latest Releases for the vscode-stripe GitHub project.
2. Download the vscode-stripe-X.X.X.vsix file from the latest release. The link is listed under the Assets section of the release.
3. Run code --install-extension <path to vscode-stripe-X.X.X.vsix> from your terminal.

Features

Monitor API request logs in real-time

The Logs section includes a command to Start streaming API logs, which streams API request logs created by members of your account in real-time. Clicking on a log entry under Recent logs will navigate you to the log in your Dashboard.

Trigger and forward webhook traffic

You can listen for incoming webhook events and forward them to your to your local machine in one of two ways:

• Run the Start webhooks listening command in the Events section.
• Run the command Stripe: Start Webhooks events listening with CLI from the command palette.

The Events section includes several commands to test your integration by triggering Stripe events, which can also be forwarded to your application.

You can also see details for recently triggered events directly inside your editor.

Stripe debug configuration

Alternatively, you can create a debug configuration to automatically forward webhook events when starting the debugger. This configuration should be placed in a launch.json file, which VS Code will use to keep track of debugging setup details.

{
  "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"]
    }
  ]
}

You can also specify the forwardTo and forwardConnectTo parameters; these are the URLs on your local server that should receive your account’s events and Connect events, respectively. The events parameter accepts an optional list to specify which events to receive.

Compound configurations

You can compose multiple stripe debug configurations in the compounds section of your settings to have a single command that launches both your local application and Stripe services simultaneously:

{
  "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"]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Node: Launch Program",
      "program": "${workspaceFolder}/examples/standalone.js",
      "skipFiles": ["<node_internals>/**"]
    }
  ],
  "compounds": [
    {
      "name": "Launch: Stripe + API",
      "configurations": ["Node: Launch Program", "Stripe: Webhooks listen"]
    }
  ]
}

Code snippets for common Stripe scenarios

The VS Code extension can quickly generate code snippets for common scenarios (e.g. creating a Checkout Session and redirecting the user to the browser) or basic requests for API resources.

Once a snippet is expanded, you can simply tab through the sections of the method signatures that need to be replaced or filled in.

Verify your source code doesn’t expose API keys

The built-in Stripe linter checks for API keys present in your source code, and presents a warning if you unsafely expose your API secret key.

Access the Stripe API reference

You can hover over a resource method to reveal a link to the corresponding entry in the Stripe API reference. This can be useful when trying to identify parameters for a given resource or the shape of an API response.

Access the Stripe Dashboard

The Dashboard section of the Stripe VS Code extension includes links to quickly jump to specific views in the Dashboard to manage API keys, webhooks, and other resources.

Settings

The following configurations can be set in your VS Code settings:

Commands

The extension supports various commands to access features through the command palette. To see the full list of supported commands open the command palette and type Stripe.

Contributing

Stripe VS Code is an open-source project under the MIT License. Contributions to the project are welcome. For details on how to contribute to the project, check out the vscode-stripe project on GitHub.

Feedback

Feel free to provide feedback or submit feature requests through the project’s issue tracker.