# アプリのマニフェストリファレンス

アプリのマニフェスト、すなわちアプリのマニフェストファイルのすべてのフィールドのインデックス、タイプ、記述についてご紹介します。

アプリマニフェストは、アプリが Stripe プラットフォームとどのように連携するかを記述するものです。すべての Stripe アプリで、プロジェクトディレクトリ構造のルートにアプリマニフェストファイルが必要です。

アプリマニフェストは、[Stripe Apps CLI](https://docs.stripe.com/stripe-apps/reference/cli.md) を使用して更新することも、直接編集することもできます。たとえば、コマンド `stripe apps grant permission` を使用して[権限を追加](https://docs.stripe.com/stripe-apps/reference/permissions.md)したり、アプリマニフェストに権限リクエストを直接追加したりできます。

アプリのマニフェストファイルは、このページで説明されている[スキーマ](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#schema)に従います。

#### v1 マニフェスト

v1 マニフェストは、プロジェクトディレクトリのルートにある `stripe-app.json` ファイルです。

## 例

```json
{
  "id": "com.invoicing.[YOUR_APP]",
  "version": "1.2.3",
  "name": "[YOUR APP] Shipment Invoicing",
  "icon": "./[YOUR_APP]_icon_32.png",
  "sandbox_install_compatible": true,
  "distribution_type": "public", // or "private" (default)
  "stripe_api_access_type": "oauth", // or "platform" (default) or "restricted_api_key"
  "allowed_redirect_uris": ["https://example.com/oauth/callback"],
  "permissions": [
    {
      "permission": "invoice_write",
      "purpose": "Allows [YOUR APP] to add shipping line items to an invoice."
    },
    {
      "permission": "product_read",
      "purpose": "Allows [YOUR APP] to use product sizes for calculating shipping."
    }
  ],
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.invoice.detail",
        "component": "AddShipping"
      }
    ],
    "content_security_policy": {
      "connect-src": [
        "https://api.example.com/a_specific_endpoint",
        "https://api.example.com/a_whole_subdirectory/"
      ],
      "image-src": [
        "https://images.example.com/one_image.jpg",
        "https://images.example.com/a_whole_subdirectory/"
      ],
      "purpose": "These URLs allow the app to contact [YOUR APP] for creating shipping details and loading images of shipping partner logos"
    }
  },
  "post_install_action": {
    "type": "external",
    "url": "https://example.com"
  },
  "constants": {
    "API_BASE": "https://api.example.com"
  }
}
```

## スキーマ

アプリのマニフェストファイルは、次のフィールドを含む JSON ファイルです。

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| id | スラグ | com.invoicing.myapp | 作成者が定義する、アプリのグローバルで一意の識別子です。初回提出時に Stripe で検証します。 |
| バージョン | 文字列 | 1.2.4 | 定義するアプリのバージョン。バージョン ID の形式は自由に決めることができます。 |
| 名前 | 文字列 | 自分のアプリ | アプリを指す名称として、UI に表示される名前。一般公開アプリには、「Stripe」、「app (アプリ)」、「free (無料)」、「paid (有料)」の語句を含めないでください。 |
| アイコン | 文字列 | ./favicon.png | 属性の横に表示する 300x300 ピクセルの PNG アイコンへの、アプリバンドル内の相対パス。 |
| distribution_type | “public” | “private” | “public” | アプリの[配布タイプ](https://docs.stripe.com/stripe-apps/distribution-options.md)。 |
| sandbox_install_compatible | true | false | true | アプリの[サンドボックスへのインストール](https://docs.stripe.com/stripe-apps/enable-sandbox-support.md)を有効にします。 |
| stripe_api_access_type | “platform” | “oauth” | “restricted_api_key” | oauth | アプリの [API 認証方法](https://docs.stripe.com/stripe-apps/api-authentication.md)。 |
| allowed_redirect_uris | 配列<String> |  | ユーザーが OAuth またはインストールリンクを使用してアプリをインストールした後にリダイレクトされる URL です。 |
| 権限 | 配列<[PermissionRequest](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#permissionrequest)\> |  | アプリが機能するために必要な権限。 |
| ui_extension | [UIExtensionManifest](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#uiextensionmanifest) |  | 「UI 拡張機能」ケイパビリティ特有の設定。 |
| post_install_action | [PostInstallAction](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#postinstallaction) |  | アプリのインストール後にユーザーをカスタムの場所に誘導するためのオプションの設定。 |
| 定数 | オブジェクト | `{"API_BASE": "https://api.example.com/v1"}` | [CLI マニフェストフラグを使用してローカル開発用に上書き](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#extended-manifest)可能な、[UI 拡張機能コンテキストプロパティ](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md#props)でアクセスできる任意の定数値を持つオブジェクト。 |

### 権限リクエスト

権限のリクエストには、次のフィールドがあります。

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| 権限 | 文字列 | customer_write | アプリが要求している権限。詳細は[権限](https://docs.stripe.com/stripe-apps/reference/permissions.md)をご覧ください。 |
| 目的 | 文字列 | マップ<locale, string> | 「このアプリは、images.example.com から画像を読み込みます。」 | アプリをインストールする人に、アプリがこれらの権限を必要とする理由を説明する、ユーザー向けの説明。 |
| 名前 | 文字列 | 「選択された配送料金で請求書を更新するために、[お客様のアプリ] で必要とされます」 | アプリの審査担当者に、アプリがこれらの権限を必要とする理由について説明する、Stripe 向けの説明。 |

### UiExtensionManifest

UI 拡張機能のマニフェストには、次のフィールドがあります。

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| ビュー | 配列<[ViewManifest](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#viewmanifest)\> |  | 特定の場所で、ダッシュボードに表示される React コンポーネント。[もっと知る](https://docs.stripe.com/stripe-apps/design.md#types-of-views)。 |
| content_security_policy | [CSPRequest](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#csprequest) |  | UI 拡張機能が特定の目的で、特定の URL にアクセスできるように許可を求めるリクエスト。 |

### ViewManifest

ビューのマニフェストには、次のフィールドがあります。

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| viewport | 文字列 | stripe.dashboard.invoice.detail | ダッシュボード内のどこに UI 拡張機能が表示されるかを示す ID。[使用できるビューポートのリスト](https://docs.stripe.com/stripe-apps/reference/viewports.md)をご覧ください。 |
| component | 文字列 | AddShippingSelector | いずれかの [view コンポーネント](https://docs.stripe.com/stripe-apps/components.md#views)を使用する、エクスポートされた React コンポーネント。 |

### CSPRequest

コンテンツセキュリティーポリシーのリクエストには、以下のフィールドがあります。

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| connect-src | 配列<string> | https://o0.ingest.sentry.io/api/ | 許可されたサードパーティー API の URL。URL がスラッシュで終わる場合には、その子もすべて許可されます。詳細については、[サードパーティー API を使用する](https://docs.stripe.com/stripe-apps/build-ui.md#use-third-party-apis)をご覧ください。 |
| image-src | 配列<string> | https://images.example.com/ | [Img](https://docs.stripe.com/stripe-apps/components/img.md) コンポーネントの読み込み元となる URL。URL がスラッシュで終わる場合には、その子もすべて許可されます。 |
| 目的 | 文字列 | マップ<locale, string> | 「このアプリは、https://images.example.comから画像を読み込みます。また、デバッグを目的として当社のパートナーである Sentry に匿名のエラーレポートを送信します。」 | アプリのインストール時にユーザーに表示する説明。プラグインがこれらの URL と直接通信する必要がある理由を説明します。 |

URL は [CSP 仕様](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)に準拠している必要があります。HTTPS スキームのみが許可されます。使用方法とトラブルシューティングについては、[サードパーティー API を使用する](https://docs.stripe.com/stripe-apps/build-ui.md#use-third-party-apis)をご覧ください。

### PostInstallAction

インストール後のアクションには以下のフィールドがあります。

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| タイプ | 文字列 | `外部`、`設定` | ユーザーが Stripe ダッシュボードでアプリをインストールした後の追加アクション。詳細については、[インストール後の設定を有効にする](https://docs.stripe.com/stripe-apps/post-install-actions.md)をご覧ください。 |
| url | 文字列 | https://example.com | アプリをインストールした後にユーザーをリダイレクトする外部 URL。これはインストール後のアクションタイプが `external` の場合にのみ必要とされます。 |

#### v2 マニフェスト

v2 マニフェストは、プロジェクトディレクトリのルートにある `stripe-app.yaml` ファイルです。既存のアプリを v1 から v2 に移行するには、`stripe apps migrate` を実行します。

## 例

```yaml
id: com.invoicing.YOUR_APP
version: 1.2.3
name: YOUR APP Shipment Invoicing
icon: icons/icon.png
declarations:
  distribution_type: public
  stripe_api_access:
    permissions:
      - permission: invoice_write
        purpose: Allows YOUR APP to add shipping line items to an invoice.
      - permission: product_read
        purpose: Allows YOUR APP to use product sizes for calculating shipping.
  stripe_api_access_type: oauth
  allowed_redirect_uris:
    - https://example.com/oauth/callback
  post_install_action:
    type: external
    url: https://example.com
  constants:
    API_BASE: https://api.example.com
ui_extension:
  views:
    - viewport: stripe.dashboard.invoice.detail
      component: AddShipping
  content_security_policy:
    connect-src:
      - https://api.example.com/a_specific_endpoint
      - https://api.example.com/a_whole_subdirectory/
    image-src:
      - https://images.example.com/one_image.jpg
      - https://images.example.com/a_whole_subdirectory/
    purpose: >-
      These URLs allow the app to contact YOUR APP for creating shipping details
      and loading images of shipping partner logos
extensions: []
```

## スキーマ

v2 マニフェストは YAML ファイルです。必須フィールドは `id`、`name`、`version`、および `extensions` です。

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| id | 文字列 | com.invoicing.myapp | アプリのグローバルに一意な識別子で、お客様が定義します。先頭と末尾は英数字である必要があります。Stripe は初回送信時に検証します。 |
| バージョン | 文字列 | 1.2.4 | 定義するアプリのバージョン。バージョン ID の形式は自由に決めることができます。 |
| 名前 | 文字列 | 自分のアプリ | アプリを参照するときに UI に表示される名前。 |
| アイコン | 文字列 | icons/icon.png | App マーケットプレイスで使用する、アプリ用の 300 x 300 ピクセルの PNG 画像へのパス。 |
| 宣言 | [宣言](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-declarations) |  | 配布タイプ、API アクセス、権限など、アプリに関する最上位レベルの宣言。 |
| ui_extension | [UIExtension](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-uiextension) |  | Stripe ダッシュボードでのアプリのユーザーインターフェース、権限、動作の設定。 |
| 拡張機能 | 配列<[Extension](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-extension)\> |  | アプリが提供する拡張機能のリスト。必須 (空でも可)。 |
| custom_object_definitions | [CustomObjectDefinitions](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-customobjectdefinitions) |  | アプリが提供するカスタムオブジェクト定義。 |

### 宣言

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| distribution_type | “public” | “private” | “public” | アプリの[配布タイプ](https://docs.stripe.com/stripe-apps/distribution-options.md)。 |
| stripe_api_access | オブジェクト |  | アプリの権限。`permissions` と、必要に応じて `connect_permissions` が含まれ、いずれも [Permission](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-permission) の配列です。 |
| stripe_api_access_type | “default” | “restricted_api_key” | “oauth” | “platform” | “oauth” | アプリの [API 認証方法](https://docs.stripe.com/stripe-apps/api-authentication.md)。 |
| sandbox_install_compatible | true | false | true | アプリの[サンドボックスへのインストール](https://docs.stripe.com/stripe-apps/enable-sandbox-support.md)を有効にします。 |
| post_install_action | [PostInstallAction](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-postinstallaction) |  | アプリのインストール後にユーザーをカスタムの場所へ誘導するためのオプション設定。 |
| 定数 | オブジェクト | `{API_BASE: https://api.example.com/v1}` | コンテキスト props を通じてビューに渡されるカスタム値。 |
| allowed_redirect_uris | 配列<string> |  | インストールが正常に完了した後にユーザーをリダイレクトできる、許可済み URL のリスト。 |

### 権限

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| 権限 | 文字列 | customer_write | 権限の ID。[権限の詳細を見る](https://docs.stripe.com/stripe-apps/reference/permissions.md)。 |
| 目的 | 文字列 | 「このアプリは、images.example.com から画像を読み込みます。」 | 権限をリクエストする理由。 |

### UIExtension

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| ビュー | 配列<[ViewManifest](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-viewmanifest)\> |  | アプリをダッシュボードのどこに表示するかを設定します。 |
| content_security_policy | [CSPRequest](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-csprequest) |  | アプリのコンテンツセキュリティポリシーを設定します。 |

### ViewManifest

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| viewport | 文字列 | stripe.dashboard.invoice.detail | ダッシュボードで UI 拡張機能が表示される場所を示す識別子。[利用可能なビューポートの一覧](https://docs.stripe.com/stripe-apps/reference/viewports.md)を参照してください。 |
| component | 文字列 | AddShipping | レンダリングする `src/views` ディレクトリ内の React コンポーネント名。 |

### CSPRequest

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| connect-src | 配列<string> | https://o0.ingest.sentry.io/api/ | 許可されたサードパーティー API の URL。URL がスラッシュで終わる場合には、その子もすべて許可されます。詳細については、[サードパーティー API を使用する](https://docs.stripe.com/stripe-apps/build-ui.md#use-third-party-apis)をご覧ください。 |
| image-src | 配列<string> | https://images.example.com/ | [Img](https://docs.stripe.com/stripe-apps/components/img.md) コンポーネントが読み込める URL。URL がスラッシュで終わる場合は、後続のすべてのパスも許可されます。 |
| 目的 | 文字列 | 「このアプリはhttps://images.example.com.”から画像を読み込みます | アプリのインストール時にユーザーに表示するメッセージです。アプリが外部 URL と通信する必要がある理由を説明します。 |

### PostInstallAction

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| タイプ | 文字列 | `外部`、`モーダル`、`アカウント登録`、`設定` | ユーザーが Stripe ダッシュボードにアプリをインストールした後の追加アクション。詳細については、[インストール後の設定を有効にする](https://docs.stripe.com/stripe-apps/post-install-actions.md)をご覧ください。 |
| url | 文字列 | https://example.com | アプリのインストール後にユーザーをリダイレクトする外部 URL。`type` が `external` の場合にのみ必須です。 |

### 拡張

`extensions` 配列の各エントリは、アプリによって実装されるスクリプト拡張を表します。

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| id | 文字列 | my-extension | アプリ内での拡張機能の一意の識別子。 |
| 名前 | 文字列 | マイ拡張機能 | 拡張機能の表示名。 |
| 説明 | 文字列 |  | 開発者が定義する任意の説明 (最大 300 文字)。 |
| interface_id | 文字列 | billing.sales.prorations | この拡張が実装する拡張インターフェースの識別子。 |
| バージョン | 文字列 | 0.1.0 | 拡張機能のセマンティックバージョン。 |
| stripe_version | 文字列 | 2024-06-20 | この拡張機能で使用する Stripe API バージョン。 |
| 権限 | 配列<[Permission](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-permission)\> |  | 拡張機能に必要な権限。 |
| スクリプト | [ScriptConfig](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-scriptconfig) |  | 拡張機能のスクリプト設定。 |
| 設定 | [CustomInput](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-custominput) |  | 拡張用のカスタム入力スキーマと UI。 |
| メソッド | オブジェクト |  | 拡張機能によって実装されるメソッド。キーはメソッド名、値は [MethodConfig](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-methodconfig) オブジェクトです。 |
| エンドポイント | 配列<[Endpoint](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-endpoint)\> |  | 拡張によって提供されるエンドポイント。 |

### ScriptConfig

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| タイプ | “typescript” | “typescript” | スクリプトの種類。 |
| コンテンツ | 文字列 |  | スクリプトのコンテンツまたはエントリーポイント。 |

### CustomInput

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| input_schema | オブジェクト |  | 入力スキーマの定義。`type: "json_schema"` と `content` (`.json` ファイルへのパス) が必要です。 |
| ui_schema | オブジェクト |  | JSONForms 形式の UI スキーマ定義。`type: "jsonforms"` と `content` (`.json` ファイルへのパス) が必要です。 |

### MethodConfig

各メソッド値は以下のいずれかです:

**スクリプトの実装:**

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| implementation_type | “script” | “script” | 実装のタイプ。 |
| custom_input | [CustomInput](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-custominput) |  | このメソッドのカスタム入力スキーマと UI。 |
| エラー | 配列<[ErrorDefinition](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-errordefinition)\> |  | このメソッドの構造化されたエラーの宣言。 |

**リモート関数の実装:**

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| implementation_type | “remote_function” | “remote_function” | 実装のタイプ。 |
| endpoint_id | 文字列 |  | このメソッドで呼び出すエンドポイントの ID です。 |
| resource_id | 文字列 |  | 管理されるリソースの ID。 |
| sandbox_resource_id | 文字列 |  | サンドボックス環境で使用する管理リソースの ID。 |
| エラー | 配列<[ErrorDefinition](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-errordefinition)\> |  | このメソッドの構造化されたエラーの宣言。 |

### エラー定義

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| code | 文字列 | invalid_amount | 機械可読なエラー識別子です。メソッド内で一意であり、snake_case を使用する必要があります。 |
| メッセージ | 文字列 | 「金額は正の値でなければなりません。」 | 人間が読めるメッセージテンプレートです。 |
| 再試行の可否 | ブール値 | false | このエラーが発生した場合に呼び出し元が再試行すべきかどうかを示します。デフォルトは `false` です。 |

### エンドポイント

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| id | 文字列 | my-endpoint | 拡張内のエンドポイントの一意識別子。 |
| タイプ | “stripe_function” | “custom_http” | “custom_http” | エンドポイントの種類。 |
| 本番 | [EndpointDefinition](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-endpointdefinition) |  | 本番環境向けの設定。 |
| managed_sandbox | [EndpointDefinition](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-endpointdefinition) |  | マネージドサンドボックス環境の設定。 |
| テスト | [EndpointDefinition](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-endpointdefinition) |  | テスト環境の設定。 |

### エンドポイント定義

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| url | 文字列 | https://api.example.com/handler | エンドポイントの HTTPS URL です。 |
| 目的 | 文字列 | 「日割り計算のリクエストを処理します。」 | エンドポイントの目的。 |
| auth | [EndpointAuth](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#v2-endpointauth) |  | エンドポイントの認証設定。 |

### EndpointAuth

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| タイプ | “bearer_token” | “header” | “bearer_token” | 認証の種類。 |
| secret_name | 文字列 | my-api-key | 認証情報を含むシークレットの名前です。 |
| header_name | 文字列 | X-Api-Key | 認証に使用するヘッダーの名前です。`type` が`"header"` の場合に必須です。 |

### CustomObjectDefinitions

| フィールド名 | タイプ | 例 | **Description** |
| --- | --- | --- | --- |
| 定義 | 配列<object> |  | カスタムオブジェクト定義の一覧。各エントリーには、`id` (文字列) と、`type: "typescript"` および仕様ファイルへのパスを示す `content` を持つ `specification` オブジェクトが必要です。 |

## 開発用の拡張マニフェストファイルを使用する

ローカル開発では、本番環境と異なる*アプリマニフェスト* (In a Stripe App, the app manifest is a stripe-app.json file in your app's root directory. It defines your app's ID, views, permissions, and other essential properties)値を使用する必要がある場合があります。例えば、アプリのバックエンドは `https://api.example.com/v1` に配置される可能性がありますが、ローカル開発のバックエンドは `http://localhost:8888/v1`. で実行されます。

マニフェストファイルのこの例を考慮すると:

```json
{
  "id": "com.invoicing.[YOUR_APP]",
  "version": "1.2.3",
  "name": "[YOUR APP] Shipment Invoicing",
  "icon": "./[YOUR_APP]_icon_32.png",
  "permissions": [],
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.invoice.detail",
        "component": "InvoiceDetail"
      }
    ],
    "content_security_policy": {
      "connect-src": ["https://api.example.com/v1"],
      "purpose": "Allow the app to retrieve example data"
    }
  },
  "constants": {
    "API_BASE": "https://api.example.com/v1"
  }
}
```

`stripe-app.[anything].json` という別のマニフェストファイルを作成します。これは、メインのマニフェストを拡張し、ローカル値でそれを上書きします。以下に例を示します。

```json
{
  "extends": "stripe-app.json",
  "ui_extension": {
    "content_security_policy": {
      "connect-src": ["http://localhost:8888/v1"]
    }
  },
  "constants": {
    "API_BASE": "http://localhost:8888/v1"
  }
}
```

開発中にローカルマニフェストファイルを使用するには、`--manifest` flag を使用して読み込みます。以下に例を示します。

```bash
stripe apps start --manifest stripe-app.dev.json
```

[コンテキストプロパティー](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md#props)を使用してビューで `constants` 値にアクセスします。以下に例を示します。

```jsx
import {useEffect, useState} from 'react';
import type {ExtensionContextValue} from '@stripe/ui-extension-sdk/context';
import {Box} from '@stripe/ui-extension-sdk/ui';

const InvoiceDetail = ({environment}: ExtensionContextValue) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(`${environment.constants.API_BASE}/some-endpoint`)
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  return data ? <Box>Here is your message: {data.message}</Box> : 'Loading...';
};
```

## See also

- [Stripe Apps CLI リファレンス](https://docs.stripe.com/stripe-apps/reference/cli.md)
- [権限リファレンス](https://docs.stripe.com/stripe-apps/reference/permissions.md)
- [UI Extensions の仕組み](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md)