# アプリのインストール

アプリのインストールボタンを表示します。

アプリインストールは、連結アカウントがアプリをインストールできるようにするコンポーネントをレンダリングします。アプリインストールはプライベートプレビュー版コンポーネントであり、Stripe SDK のプレビューバージョンを使用する必要があります。[プライベートプレビュー版コンポーネント](https://docs.stripe.com/connect/supported-embedded-components.md#preview-components)の詳細をご覧ください。

実装の詳細については、[埋め込み Stripe アプリ実装ガイド](https://docs.stripe.com/stripe-apps/embedded-apps.md)を参照してください。

### アカウントセッションを作成する

[アカウントセッションの作成](https://docs.stripe.com/api/account_sessions/create.md)時に、`components` パラメーターで `app_install` を指定して、アプリのインストールコンポーネントを有効にします。`allowed_apps` で `features` パラメーターを指定することにより、インストールするアプリを有効にしてください。

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-07-29.preview; embedded_connect_beta=v2;" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[app_install][enabled]=true" \
  -d "components[app_install][features][allowed_apps][]=APP_ID"
```

アカウントセッションを作成して、[ConnectJS を初期化](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions)すると、フロントエンドにアプリのインストールコンポーネントを表示できます。

#### JavaScript

```js
const appInstall = stripeConnectInstance.create('app-install');
appInstall.setApp('{{APP_ID}}');
container.appendChild(appInstall);
```

この埋め込みコンポーネントは、次のパラメーターに対応します。

#### HTML + JS

| 方法 | タイプ | 説明 |
| --- | --- | --- |
| `setApp` | `string` | 連結アカウントがインストールできるアプリの ID を設定します。[利用可能なアプリ](https://docs.stripe.com/stripe-apps/embedded-apps.md#app-select)のリストをご覧ください。 |

#### React

| React プロパティ | タイプ | 説明 |
| --- | --- | --- |
| `app` | `string` | 連結アカウントがインストールできるアプリの ID。[利用可能なアプリ](https://docs.stripe.com/stripe-apps/embedded-apps.md#app-select)のリストをご覧ください。 |

現在の、または更新されたインストールの状態に基づいて、カスタムの動作を設定できます。

#### JavaScript

```js

// index.html
<div id="app-install-container"></div>

// index.js

// Do something when install state fetched on render
const handleAppInstallFetched = (response) => {
  console.log(`Install state fetched for app  ${response.appId} to ${response.state}`);
};

// Do something when install state changes
const handleAppInstallChanged = (response) => {
  console.log(`Install state changed for app  ${response.appId} to ${response.state}`);
};


const container = document.getElementById('app-install-container');
const appInstall = stripeConnectInstance.create('app-install');
appInstall.setApp('{{APP_ID}}');
appInstall.setOnAppInstallStateFetched(handleAppInstallFetched);
appInstall.setOnAppInstallStateChanged(handleAppInstallChanged);
container.appendChild(appInstall);
```

#### HTML + JS

| 方法 | 説明 | 変数 |
| --- | --- | --- |
| `setOnAppInstallStateFetched` | インストールのフェッチ時に、ユーザーがコールバック関数でカスタム動作を指定できるようにします。 | - `response.appId`:インストールされたアプリ
- `response.state`:インストール状態 `INSTALLED | UNINSTALLED` |
| `setOnAppInstallStateChanged` | インストール状態が変化したときに、ユーザーがコールバック関数でカスタム動作を指定できるようにします。 | - `response.appId`:インストールされたアプリ
- `response.state`:インストール状態 `INSTALLED | UNINSTALLED` |

#### React

| React プロパティ | 説明 | 変数 |
| --- | --- | --- |
| `onAppInstallStateFetched` | インストールのフェッチ時に、ユーザーがコールバック関数でカスタム動作を指定できるようにします。 | - `response.appId`:インストールされたアプリ
- `response.state`:インストール状態 `INSTALLED | UNINSTALLED` |
| `onAppInstallStateChanged` | インストール状態が変化したときに、ユーザーがコールバック関数でカスタム動作を指定できるようにします。 | - `response.appId`:インストールされたアプリ
- `response.state`:インストール状態 `INSTALLED | UNINSTALLED` |

プラットフォームに埋め込むことを事前に承認した Stripe のサンプルアプリ (`APP_ID` を `stripe.app-explorer` に設定) を導入できます。

## 早期アクセスをリクエストする  (プライベートプレビュー)

サインインして、プレビュー版の Connect 埋込型コンポーネントへのアクセスをリクエストします。

Stripe アカウントがない場合は、[今すぐ登録](https://dashboard.stripe.com/register)できます。