Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Developer tools
Get started
Payments
Finance automation
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Overview
Versioning
Changelog
Upgrade your API version
Upgrade your SDK version
Developer tools
SDKs
API
Testing
Workbench
Event Destinations
Workflows
Stripe CLI
Stripe Shell
Developers Dashboard
Agent toolkit
Stripe health alertsBuild with LLMsStripe for Visual Studio CodeFile uploads
Security
Security
Extend Stripe
Stripe Apps
    Overview
    Get started
    Create an app
    How Stripe Apps work
    Sample apps
    Build an app
    Store secrets
    API authentication methods
    Authorization flows
    Server-side logic
    Listen to events
    Handle different modes
    Enable sandbox support
    App settings page
    Build a UI
    Onboarding
    Distribute your app
    Distribution options
    Upload your app
    Versions and releases
    Test your app
    Publish your app
    Promote your app
    Add deep links
    Create install links
    Assign roles in UI extensions
    Post-install actions
    App analytics
    Embedded components for Apps
    Embed third-party Stripe Apps
    Migrating to Stripe Apps
    Migrate or build an extension
    Migrate a plugin to Stripe Apps or Stripe Connect
    Reference
    App manifest
    CLI
    Extension SDK
    Permissions
    Viewports
    Design patterns
    Components
      Accordion
      Badge
      Banner
      BarChart
      Box
      Button
      ButtonGroup
      Checkbox
      Chip
      ContextView
      DateField
      Divider
      FocusView
      FormFieldGroup
      Icon
      Img
      Inline
      LineChart
      Link
      List
      Menu
      PropertyList
      Radio
      Select
      SettingsView
      SignInView
      Sparkline
      Spinner
      Switch
      Table
      Tabs
      Tasklist
      TextArea
      TextField
      Toast
      Tooltip
Stripe Connectors
Partners
Partner ecosystem
Partner certification
HomeDeveloper toolsStripe AppsComponents

ContextView component for Stripe AppsDashboard only

ContextView allows apps to render next to Stripe content in a drawer so users can look at them side by side and share context.

Copy page

The root view of your app must be a ContextView.

These in-context modules allow the app to meet users in their existing workflows and provide contextual information and actions.

A user’s interaction with an app always begins with a view type called a ContextView view. Each app must have a single ContextView view (per viewport), which acts as the default view when the page loads (similar to the index.html of a website).

ContextView in an application

What ContextView looks like

Note

To create a view within an existing ContextView, see FocusView.

ContextView props

PropertyType

children

Required

React.ReactNode

The contents of the component.

title

Required

string

The title of the ContextView. This will be displayed at the top of the drawer under that app’s name.

actions

Optional

React.ReactNode

A React fragment containing up to three Buttons that will be displayed directly under the header and above the children of the ContextView.

banner

Optional

React.ReactElement | undefined

A Banner component that will be displayed directly under the header and above the children of the ContextView.

brandColor

Optional

string | undefined

A CSS color that contrasts well with brandIcon.

brandIcon

Optional

string | undefined

A square, 1-color SVG that contrasts well with brandColor.

description

Optional

string | undefined

A description of the view’s purpose, can also be used as a subtitle.

externalLink

Optional

ExternalLink | undefined

A link to an external webpage. This should generally allow the user to view related information on another site with more context than what the app makes available in the app drawer.

Related types: ExternalLink.

footerContent

Optional

React.ReactNode

React node adjacent to any actions in the footer.

primaryAction

Optional

React.ReactElement | undefined

A primary call to action (“Save” or “Continue”) Button placed in the footer.

secondaryAction

Optional

React.ReactElement | undefined

A secondary call to action (“Cancel”) Button placed in the footer.

ExternalLink

PropertyType

href

Required

string

URL of an external link.

label

Required

string

Label of an external link.

Example

import { Box, Button, ContextView, } from '@stripe/ui-extension-sdk/ui'; import appIcon from './icon.svg'; const HappyView = () => ( <ContextView title="Get started with Stripe Apps" actions={ <> <Button>Action 1</Button> <Button>Action 2</Button> </> } brandColor="#635bff" brandIcon={appIcon} > <Box>Example Content</Box> </ContextView> );

See also

  • Design patterns to follow
  • Style your app
  • UI testing
Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc