# 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 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 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:

- [Use an AI Assistant for your Stripe integration.](https://docs.stripe.com/stripe-vscode.md#ai-assistant)
- [Get started with a Stripe Sample.](https://docs.stripe.com/stripe-vscode.md#samples)
- [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/stripe-cli/install.md) 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

### Use an AI Assistant for your Stripe integration 

The Stripe AI assistant applies Stripe knowledge to your VS Code editor to help you build integrations. It combines large language models with the Stripe documentation, API reference, code snippets, and developer insights to provide assistance directly in your development environment.

With the Stripe AI Assistant, you can:

- Get immediate answers about the Stripe API and products
- Receive code suggestions tailored to your integration
- Ask follow-up questions for more detailed information
- Access knowledge from the Stripe documentation and the Stripe developer community

To get started with the Stripe AI assistant:

1. Make sure you have the Stripe VS Code extension installed.
1. Navigate to the Stripe extension UI
1. Under **AI Assistant** click **Ask a question**.
   - If you’re a Copilot user, this opens the Copilot chat where you can @-mention `@stripe`. In the input field, talk to the Stripe-specific assistant using `@stripe` followed by your question.
   - If you’re not a Copilot user, it opens a chat UI where you can talk to the Stripe LLM directly.
![](https://docs.stripecdn.com/236b4a0f43c11245f1afc59557ecc6f2d2170fdcf7ae3f843793df1e8007c625.mp4)
### Get started quickly with a Stripe Sample 

[Stripe Samples](https://github.com/stripe-samples) are built by Stripe, and provide all of the client and server code you need for common integration scenarios, such as creating a subscription with Stripe Billing.

The **Start with a Stripe Sample** button allows you to browse through the catalog and select the right language for your integration. The extension clones and opens the Sample in a new workspace, automatically populating your API keys in the .env file of the Sample.
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/samples-demo-3.mp4)
### 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/stripe-cli.md)
- [Webhooks](https://docs.stripe.com/webhooks.md)