# Stripe Apps の SettingsView コンポーネント

アカウントでのアプリの機能に関して、顧客が詳細を変更できるようにします。

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/settingsview?app-sdk-version=8.

専用の設定ビューを定義すると、各自のアカウントでアプリをどのように機能させるかの詳細を、変更できます。たとえば、Zendesk などのサードパーティー API を使用するアプリでは、`SettingsView` を使用してユーザーを Zendesk アカウントで認証できます。詳細については、アプリの[設定ページを追加](https://docs.stripe.com/stripe-apps/app-settings.md)する方法をご覧ください。
![](https://b.stripecdn.com/docs-statics-srv/assets/settingsview.ca0e43bcc311ea9819da61b2949e6ed1.png)

SettingsView のデザイン

`SettingsView` は、`ContextView` と同様に、その他すべての UI エレメントを含むビューのルートコンポーネントです。特定のオブジェクトに関連付けられていない唯一のビューですが、`settings` ビューポートに関連付けられています。`settings` ビューポートは、アプリドロワー以外の、ダッシュボードの事前設定された場所にマッピングされます。

アプリをアップロードすると、`SettingsView` がダッシュボードのアプリの設定ページに表示されます。アプリをローカルでプレビューしている間は、ダッシュボードの <https://dashboard.stripe.com/apps/settings-preview> で `SettingsView` をプレビューできます。

`SettingsView` を使用するには、`settings` ビューポートでアプリマニフェストにビューを追加する必要があります。SettingsView があるアプリケーションには、以下のような `ui_extension` フィールドを含むアプリマニフェストがあります。

```json
{
  ...,
  "ui_extension": {
    "views": [
      ...,
      {
        "viewport": "settings",
        "component": "AppSettings"
      }
    ]
  }
}
```

### SettingsView プロパティ

| プロパティー          | タイプ                                                                                                                                                              |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`      | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                                                                                       |
| `onSave`        | (オプション)
  `((values: {     [x: string]: string; }) => void) | undefined`

  指定がある場合は、`SettingsView` に「保存」`Button` が表示されます。このコールバックは `Button` がクリックされたときに呼び出されます。 |
| `statusMessage` | (オプション)
  `string | undefined`

  ビューのヘッダーに「保存済み」や「エラー」などのステータスを表示する文字列。                                                                                         |

## 例

この例は、外部 API から設定を取得して表示し、変更を保存する方法を示しています。


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/settingsview?app-sdk-version=9.

専用の設定ビューを定義すると、各自のアカウントでアプリをどのように機能させるかの詳細を、変更できます。たとえば、Zendesk などのサードパーティー API を使用するアプリでは、`SettingsView` を使用してユーザーを Zendesk アカウントで認証できます。詳細については、アプリの[設定ページを追加](https://docs.stripe.com/stripe-apps/app-settings.md)する方法をご覧ください。
![](https://b.stripecdn.com/docs-statics-srv/assets/settingsview.ca0e43bcc311ea9819da61b2949e6ed1.png)

SettingsView のデザイン

`SettingsView` は、`ContextView` と同様に、その他すべての UI エレメントを含むビューのルートコンポーネントです。特定のオブジェクトに関連付けられていない唯一のビューですが、`settings` ビューポートに関連付けられています。`settings` ビューポートは、アプリドロワー以外の、ダッシュボードの事前設定された場所にマッピングされます。

アプリをアップロードすると、`SettingsView` がダッシュボードのアプリの設定ページに表示されます。アプリをローカルでプレビューしている間は、ダッシュボードの <https://dashboard.stripe.com/apps/settings-preview> で `SettingsView` をプレビューできます。

`SettingsView` を使用するには、`settings` ビューポートでアプリマニフェストにビューを追加する必要があります。SettingsView があるアプリケーションには、以下のような `ui_extension` フィールドを含むアプリマニフェストがあります。

```json
{
  ...,
  "ui_extension": {
    "views": [
      ...,
      {
        "viewport": "settings",
        "component": "AppSettings"
      }
    ]
  }
}
```

### SettingsView プロパティ

| プロパティー          | タイプ                                                                                                                                                              |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`      | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                                                                                       |
| `onSave`        | (オプション)
  `((values: {     [x: string]: string; }) => void) | undefined`

  指定がある場合は、`SettingsView` に「保存」`Button` が表示されます。このコールバックは `Button` がクリックされたときに呼び出されます。 |
| `statusMessage` | (オプション)
  `string | undefined`

  ビューのヘッダーに「保存済み」や「エラー」などのステータスを表示する文字列。                                                                                         |

## 例

この例は、外部 API から設定を取得して表示し、変更を保存する方法を示しています。


## See also

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)