# Stripe for Visual Studio Code

Build, test, and use Stripe inside your editor.

Stripe’s [extension](https://marketplace.visualstudio.com/items?itemName=Stripe.vscode-stripe) for [Visual Studio Code](https://code.visualstudio.com/) lets you view API request logs, forward events to your application, and use Stripe within your editor.

A new Stripe panel in the activity bar provides access to code snippets for several languages, adds [debug configurations](https://code.visualstudio.com/docs/editor/debugging#_redirect-inputoutput-tofrom-the-debug-target), and extends the [command palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette) with common developer workflows.

With Stripe for VS Code, you can:

- [Forward Stripe webhook events to your local application.](https://docs.stripe.com/stripe-vscode.md#webhooks)
- [Stream request logs in real-time.](https://docs.stripe.com/stripe-vscode.md#monitor-logs)
- [Trigger new events while testing.](https://docs.stripe.com/stripe-vscode.md#webhooks)
- [Generate snippets for common scenarios.](https://docs.stripe.com/stripe-vscode.md#snippets)
- [Verify your source code doesn’t expose API keys.](https://docs.stripe.com/stripe-vscode.md#linter)
- [Quickly jump to the API reference.](https://docs.stripe.com/stripe-vscode.md#api-reference)
- [Access the Stripe Dashboard.](https://docs.stripe.com/stripe-vscode.md#dashboard-access)

## Install Stripe for VS Code 

> As a prerequisite, ensure you have the [Stripe CLI](https://docs.stripe.com/cli/install) installed.

You can find the Stripe VS Code extension in the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Stripe.vscode-stripe). Click **Install** to add the extension to your editor.

## Features

### Trigger and forward webhook events 

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

- Click **Forward webhook events to your local machine** in the **Events** section.
- Run the command `Stripe: Forward webhook events to your local machine` from the [command palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).

Then, enter the localhost URL that you want to forward events to. If you’re using Connect, you can set a different URL for events from your Connect applications. If your localhost URLs use HTTPS, you can skip SSL certificate verification.

You can use the **Trigger new event** button to test your webhook integration with events from the Stripe API.

> You can only trigger events in a testing environment.
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/forward-webhooks-demo_2.0.0.mp4)
You can stream events created by members of your account in real time with the **Start streaming events** button. Clicking on an event entry under **Recent events** opens event details directly inside your editor.

> If you’d like to resend an event, you can right click an event entry under **Recent events** or run a [Stripe CLI](https://docs.stripe.com/cli/events/resend) command: `stripe events resend <event>`.
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/events-stream.mp4)
#### Stripe debug configuration 

When forwarding events to your local machine, you may find yourself entering the same URLs over and over. To fix this, you can create a [debug configuration](https://code.visualstudio.com/docs/editor/debugging#_redirect-inputoutput-tofrom-the-debug-target) to save your forwarding setup, allowing you to start forwarding to your URLs with a single button.
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/debug-configuration.mp4)
Place the following configuration in a [launch.json](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations) file, which VS Code uses to track debugging setup details. Then, select the configuration in the Run view. After selecting your configuration, press `F5` to quickly start forwarding events.

```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
    }
  ]
}
```

You can specify the `forwardTo` and `forwardConnectTo` parameters; these are the URLs on your local machine that you want to receive your account’s events and Connect events, respectively. The `events` parameter accepts an optional list to specify which events to receive. If you’re using HTTPS URLs, the `skipVerify` parameter accepts a Boolean to skip verifying SSL certificates.

#### Compound configurations 

You can launch your local application and forward webhook events simultaneously using a [compound configuration](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": ["<node_internals>/**"]
    }
  ],
  "compounds": [
    {
      "name": "Launch: Stripe + API",
      "configurations": ["Node: Launch Program", "Stripe: Webhooks listen"]
    }
  ]
}
```

### Monitor API request logs in real-time 

You can stream API request logs created by members of your account in real time with the **Start streaming API logs** button. Clicking on a log entry under **Recent logs** opens log details directly inside your editor. From there, you can hover over the request ID to open the log in your Dashboard.

> The extension only delivers logs for requests made in a testing environment.
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/logs-stream.mp4)
### Code snippets for common Stripe scenarios 

You can quickly generate code snippets for common scenarios (for example, creating a Checkout Session and redirecting the user to the browser) or basic API requests. After generating a snippet, you can tab through it to fill in your values.
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/stripe_vs_code_snippets_1.7.1.mp4)
### Verify your source code doesn’t expose API keys 

The built-in Stripe linter checks for [API keys](https://docs.stripe.com/keys.md) in your source code and marks them as problems if you unsafely expose them.

> The linter treats unsafe use of test-mode keys as warnings and live-mode keys as errors.
![](https://b.stripecdn.com/docs-statics-srv/assets/api_key_linter.99d5ec681ed1835e12ec8ff43a31df42.png)

### Access the Stripe API reference 

You can hover over a resource method to reveal a link to the [Stripe API reference](https://docs.stripe.com/api.md). This is useful for identifying parameters for an API request or the shape of an API response.
![](https://b.stripecdn.com/docs-statics-srv/assets/api_reference_hover.7faf7deee997b0f54656ed4a4f842e14.png)

### Access the Stripe Dashboard 

The **Quick Links** section includes links to quickly jump to the Dashboard to manage API keys, webhooks, and other resources.
![](https://b.stripecdn.com/docs-statics-srv/assets/quick_links_view.dd5362166ad40a383ca540bc62e71ed6.png)

## Settings 

The following configurations can be set in your [VS Code settings](https://code.visualstudio.com/docs/getstarted/settings):

| Setting name | Description |
| --- | --- |
| `stripe.cliInstallPath` | Specifies the absolute install path for the Stripe CLI executable. Default: the default install path for the Stripe CLI |
| `stripe.projectName` | Specifies the project name to read from for the Stripe CLI configuration. You can define a unique configuration for individual projects, or use the global configuration by default. See the [Stripe CLI reference](https://docs.stripe.com/cli/login) for more details. Default: `default` |
| `stripe.telemetry.enabled` | Specifies whether to enable Stripe telemetry (even if enabled still abides by the overall `telemetry.enableTelemetry` setting). Default: `true` |

## Commands 

The extension supports various commands to access features through the [command palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette). To see the full list of supported commands, open the command palette and type `Stripe`.
![](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)