Stripe Apps の使用を開始する

Stripe ダッシュボードでアプリを構築することで、アプリ開発の基礎を学習します。

このガイドでは、Stripe ダッシュボードの顧客の詳細ページで UI 拡張機能を使用して、「Hello, world!」サンプルアプリを構築します。

既存の Connect 拡張機能がある場合は、Stripe Apps に移行をご覧ください。
Stripe ダッシュボードにログインします。
まだインストールしていない場合は、Stripe CLI をインストールし、同じアカウントを使用してログインします。
Command Line
homebrew
# Install Homebrew to run this command: https://brew.sh/ brew install stripe/stripe-cli/stripe # Connect the CLI to your dashboard stripe login
その他のインストールオプションについては、Stripe CLI を使ってみるをご覧ください。
CLI バージョン 1.12.4 以降を使用していることを確認します。これは以下を実行することで確認できます。
Command Line
```
stripe version
```
Stripe の CLI バージョンが 1.12.4 より前の場合は、Stripe CLI バージョンを最新バージョンに更新してください。
ノードがインストールされており、最新であることを確認します。
Command Line
```
node -v
```
アプリの依存関係は、NPM または Yarn を使用して管理できます。最適な開発体験を得るために、最新の安定バージョンを使用してください。アプリを App Marketplace に公開する場合は、さらに次の制限が適用されます。

Stripe アプリの構築を開始するために、Stripe Apps CLI プラグインをインストールします。

Command Line
stripe plugin install apps

apps プラグインがすでにインストールされている場合は、バージョンが 1.5.12 以降であることを確認してください。

Command Line
stripe apps -v
# apps version 1.5.12

apps プラグインをアップグレードする必要がある場合は、以下のコマンドを実行します。

Command Line

stripe plugin upgrade apps

「Hello, world!」アプリの基本構造を構築します。
Command Line
```
stripe apps create helloworld
```
指示に従い、以下の情報を入力します。
- ID: 自動生成されたアプリ ID を受け入れるか、カスタマイズします。Stripe は、これによってアプリを識別します。アプリ ID はグローバルに一意である必要があります。
- 表示名: 表示名を入力します。これは、ダッシュボードに表示されるアプリの名前です。この名前は後でいつでも変更できます。

Stripe Apps は React 17 のみをサポートしています。インストールするすべての依存関係が、このバージョンと互換性があることを確認してください。詳細については、UI拡張機能の仕組みをご覧ください。

アプリをローカルで実行し、更新し、変更内容をダッシュボードでプレビューできます。

helloworld ディレクトリーに移動します。
Command Line
```
cd helloworld
```
アプリをプレビューするには、ローカルの開発サーバーを起動します。
Command Line
```
stripe apps start
```
Enter を押してブラウザーを開きます。
注
Stripe ダッシュボードに対応しているブラウザーをご使用ください。Safari はダッシュボードに対応していません。その他の更新内容については、GitHub 課題管理ブラウザーのサポートでご確認ください。
続行をクリックして、Stripe アカウントでアプリをプレビューします。
アプリのプレビューを有効化
ダッシュボードでのアプリ

App ビューは、ダッシュボードの顧客の詳細ページでのみ有効になります。アプリが表示されない場合は、ダッシュボードで顧客を作成していることを確認してください。

ダッシュボードでアプリをプレビューしている間、ローカルの開発サーバーはアプリのリアルタイムの更新を有効にします。

Stripe ダッシュボードページを開き、開発サーバーを実行した状態で、App.tsx ファイルのタイトルを変更します。ファイルを保存し、アプリの変更内容を確認します。
同じファイルで </ContextView> 終了タグから > を削除し、ファイルを保存してエラーを確認します。
Stripe ダッシュボード、ブラウザーの開発者ツール、Stripe CLI のエラーを解決できます。
開発サーバーを停止するには、コマンドラインから Ctrl+C を使用します。

これで、サンプルアプリは完成です。次に、Stripe アプリに機能を追加してください。