# Visual Studio Code をご利用の場合

エディターから Stripe を構築、テスト、使用します。

[Visual Studio Code](https://code.visualstudio.com/) 向けの Stripe [拡張機能](https://marketplace.visualstudio.com/items?itemName=Stripe.vscode-stripe)を使用すると、API リクエストログを表示し、アプリケーションにイベントを転送して、エディター内で Stripe を使用できます。

アクティビティーバーの新しい Stripe パネルを使用すると、複数言語のコードスニペットにアクセスできるほか、[デバッグ設定](https://code.visualstudio.com/docs/editor/debugging#_redirect-inputoutput-tofrom-the-debug-target)の追加や、一般的な開発者ワークフローで[コマンドパレット](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette)の拡張が可能になります。

VS Code 向けの Stripe を使用して、以下のことが可能になります。

- [Stripe Webhook イベントをローカルアプリケーションに転送](https://docs.stripe.com/stripe-vscode.md#webhooks)
- [リアルタイムでリクエストログをストリーミング](https://docs.stripe.com/stripe-vscode.md#monitor-logs)
- [テスト中に新しいイベントをトリガー](https://docs.stripe.com/stripe-vscode.md#webhooks)
- [一般的なシナリオのためのスニペットを生成](https://docs.stripe.com/stripe-vscode.md#snippets)
- [ソースコードが API キーを公開していないことを確認](https://docs.stripe.com/stripe-vscode.md#linter)
- [API リファレンスにすばやく移動](https://docs.stripe.com/stripe-vscode.md#api-reference)
- [Stripe ダッシュボードにアクセスする](https://docs.stripe.com/stripe-vscode.md#dashboard-access)

## VS Code 向けの Stripe のインストール

> 前提条件として、[Stripe CLI](https://docs.stripe.com/cli/install) がインストールされていることを確認してください。

Stripe VS Code の拡張機能は [Visual Studio のマーケットプレイス](https://marketplace.visualstudio.com/items?itemName=Stripe.vscode-stripe)で確認できます。**インストール**をクリックして、拡張機能をエディターに追加します。

## 機能

### Webhook イベントをトリガーして転送する

受信する Webhook イベントをリッスンし、以下の 2 つのいずれかの方法でローカルマシンに転送できます。

- **EVENTS (イベント)** セクションで **Forward webhook events to your local machine (Webhook イベントをローカルマシンに転送)** をクリックします。
- [コマンドパレット](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette)から、`Stripe: Forward webhook events to your local machine` コマンドを実行します。

次に、イベントの転送先の localhost URL を入力します。Connect を使用している場合は、Connect アプリケーションからのイベントに対して別の URL を設定できます。ローカルホスト URL が HTTPS を使用している場合は、SSL 証明書の検証をスキップできます。

**Trigger new event (新しいイベントをトリガー)** ボタンを使用すると、Stripe API のイベントを使用して Webhook 組み込みをテストできます。

> イベントは、テスト環境でのみトリガーできます。
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/forward-webhooks-demo_2.0.0.mp4)
**Start streaming events (イベントのストリーミングを開始)** ボタンを使用すると、アカウントのメンバーが作成したイベントをリアルタイムでストリーミングできます。**Recent events (最近のイベント)** の下のイベントエントリーをクリックすると、イベントの詳細がエディター内に直接表示されます。

> イベントを再送信するには、**Recent events (最近のイベント)** のイベントエントリーを右クリックするか、[Stripe CLI](https://docs.stripe.com/cli/events/resend) で `stripe events resend <event>` コマンドを実行してください。
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/events-stream.mp4)
#### Stripe デバッグ設定

イベントをローカルマシンに転送する際、同じ URL を何度も入力しなければならないことがあります。この問題を解決するには、[デバッグ設定](https://code.visualstudio.com/docs/editor/debugging#_redirect-inputoutput-tofrom-the-debug-target)を作成して転送設定を保存しておくと、ボタン 1 つで URL への転送を開始することができます。
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/debug-configuration.mp4)
以下の設定を [launch.json](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations) ファイルに記述します。このファイルは VS Code がデバッグ設定の詳細を追跡するために使用します。次に、RUN (実行) ビューで設定を選択します。設定を選択した後、`F5` を押すと、イベントの転送がすぐに開始されます。

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

`forwardTo` および `forwardConnectTo` パラメーターを指定できます。これらのパラメーターは、アカウントのイベントと Connect イベントをそれぞれ受信するローカルマシン上の URL です。`events` パラメーターは、受信するイベントを指定するオプションのリストを受け付けます。HTTPS URL を使用している場合は、`skipVerify` パラメーターに SSL 証明書の検証をスキップするブール値を指定できます。

#### 複数の設定を組み合わせる

[複合起動設定](https://code.visualstudio.com/docs/editor/debugging#_compound-launch-configurations)を使用すると、ローカルアプリケーションの起動と Webhook イベントの転送を同時に行うことができます。

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

### リアルタイムで API ログリクエストをモニタリングする

**Start streaming API logs (API ログのストリーミングを開始)** ボタンを使用すると、アカウントのメンバーが作成した API リクエストのログをリアルタイムでストリーミングできます。**Recent logs (最近のログ)** の下のログエントリーをクリックすると、ログの詳細がエディター内に直接表示されます。そこで、リクエスト ID にカーソルを合わせると、ダッシュボードにログを表示することができます。

> 拡張機能は、テスト環境で行われたリクエストのログのみを配信します。
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/logs-stream.mp4)
### 一般的な Stripe シナリオのコードスニペット

一般的なシナリオ (Checkout セッションを作成してユーザーをブラウザーにリダイレクトするなど) や基本的な API リクエストに対応したコードスニペットを迅速に生成できます。スニペットを生成した後は、タブでスニペットを移動して値を入力できます。
![](https://d37ugbyn3rpeym.cloudfront.net/videos/developers/stripe_vs_code/stripe_vs_code_snippets_1.7.1.mp4)
### ソースコードが API キーを公開していないことを確認する

構築済みの Stripe linter は、ソースコード内にある [API キー](https://docs.stripe.com/keys.md)をチェックし、API キーが安全に公開されていない場合、API キーを問題としてマークします。

> linter は、キーが安全に使用されていない場合、テスト環境では警告として、本番環境ではエラーとして扱います。
![](https://b.stripecdn.com/docs-statics-srv/assets/api_key_linter.99d5ec681ed1835e12ec8ff43a31df42.png)

### Stripe API リファレンスにアクセスする

リソースメソッドにカーソルを合わせると、[Stripe API リファレンス](https://docs.stripe.com/api.md)へのリンクが表示されます。これを使用して、API リクエストのパラメーターや API レスポンスの形式を特定できます。
![](https://b.stripecdn.com/docs-statics-srv/assets/api_reference_hover.7faf7deee997b0f54656ed4a4f842e14.png)

### Stripe ダッシュボードにアクセスする

**QUICK LINKS (クイックリンク)** セクションには、ダッシュボードにすばやく移動するためのリンクが含まれ、API キー、Webhook、その他のリソースを管理することができます。
![](https://b.stripecdn.com/docs-statics-srv/assets/quick_links_view.dd5362166ad40a383ca540bc62e71ed6.png)

## 設定

[VS Code の設定](https://code.visualstudio.com/docs/getstarted/settings)では次を設定できます。

| 設定名 | 説明 |
| --- | --- |
| `stripe.cliInstallPath` | Stripe CLI 実行可能ファイルの絶対インストールパスを指定します。デフォルトは、Stripe CLI のデフォルトのインストールパスです。 |
| `stripe.projectName` | Stripe CLI 設定の読み取り元となるプロジェクト名を指定します。個々のプロジェクトに固有の設定を定義することも、デフォルトでグローバル設定を使用することもできます。詳細については、[Stripe CLI リファレンス](https://docs.stripe.com/cli/login)を参照してください。デフォルトは `default` です。 |
| `stripe.telemetry.enabled` | Stripe テレメトリを有効にするかどうかを指定します (有効にした場合でも、全体的な `telemetry.enableTelemetry` 設定に従います)。デフォルトは `true` です。 |

## コマンド

拡張機能は、[コマンドパレット](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette)を介して機能にアクセスするためのさまざまなコマンドをサポートします。サポートされているコマンドのリストを表示するには、コマンドパレットを開いて `Stripe` と入力します。
![](https://b.stripecdn.com/docs-statics-srv/assets/command_palette.ee0cb66b2fbbc0c2e981e1340815e57e.png)

## See also

- [Stripe CLI](https://docs.stripe.com/cli.md)
- [Webhook](https://docs.stripe.com/webhooks.md)