# SettingsView component for Stripe Apps

Let users change details about how the app works with their account.

# 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.

You can define a specialized settings view to let users change specific details about how the app works with their account. For example, an app that uses a third-party API like Zendesk could use `SettingsView` to authorize a user with their Zendesk account. For more details, learn how to [add a settings page](https://docs.stripe.com/stripe-apps/app-settings.md) for your app.
![](https://b.stripecdn.com/docs-statics-srv/assets/settingsview.ca0e43bcc311ea9819da61b2949e6ed1.png)

What SettingsView looks like

`SettingsView` is a view root component, just like `ContextView`, containing all other UI elements. It’s the only view that isn’t tied to a specific object, but tied instead to the `settings` viewport. The `settings` viewport maps to predefined locations in the Dashboard, outside of the app drawer.

`SettingsView` renders on the app settings page in the Dashboard after you upload an app. While previewing your app locally, you can preview the `SettingsView` in the Dashboard at <https://dashboard.stripe.com/apps/settings-preview>.

To use `SettingsView`, you must add a view with the `settings` viewport to your app manifest. An application with a settings view would have an app manifest with a `ui_extension` field that would look something like this:

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

### SettingsView props

| Property        | Type                                                                                                                                                                                                               |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`      | (Required)
  `React.ReactNode`

  The contents of the component.                                                                                                                                                   |
| `onSave`        | (Optional)
  `((values: {     [x: string]: string; }) => void) | undefined`

  If provided, a “Save” `Button` will be rendered with the `SettingsView`. This callback will be called when the `Button` is clicked. |
| `statusMessage` | (Optional)
  `string | undefined`

  A string to display a status such as “Saved” or “Error” in the header of the view.                                                                                            |

## Example

This example shows how to fetch settings from an external API, display them, and save changes.


# 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.

You can define a specialized settings view to let users change specific details about how the app works with their account. For example, an app that uses a third-party API like Zendesk could use `SettingsView` to authorize a user with their Zendesk account. For more details, learn how to [add a settings page](https://docs.stripe.com/stripe-apps/app-settings.md) for your app.
![](https://b.stripecdn.com/docs-statics-srv/assets/settingsview.ca0e43bcc311ea9819da61b2949e6ed1.png)

What SettingsView looks like

`SettingsView` is a view root component, just like `ContextView`, containing all other UI elements. It’s the only view that isn’t tied to a specific object, but tied instead to the `settings` viewport. The `settings` viewport maps to predefined locations in the Dashboard, outside of the app drawer.

`SettingsView` renders on the app settings page in the Dashboard after you upload an app. While previewing your app locally, you can preview the `SettingsView` in the Dashboard at <https://dashboard.stripe.com/apps/settings-preview>.

To use `SettingsView`, you must add a view with the `settings` viewport to your app manifest. An application with a settings view would have an app manifest with a `ui_extension` field that would look something like this:

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

### SettingsView props

| Property        | Type                                                                                                                                                                                                               |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`      | (Required)
  `React.ReactNode`

  The contents of the component.                                                                                                                                                   |
| `onSave`        | (Optional)
  `((values: {     [x: string]: string; }) => void) | undefined`

  If provided, a “Save” `Button` will be rendered with the `SettingsView`. This callback will be called when the `Button` is clicked. |
| `statusMessage` | (Optional)
  `string | undefined`

  A string to display a status such as “Saved” or “Error” in the header of the view.                                                                                            |

## Example

This example shows how to fetch settings from an external API, display them, and save changes.


## See also

- [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md)
- [Style your app](https://docs.stripe.com/stripe-apps/style.md)
- [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)