Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Revenue
Platforms and marketplaces
Money management
Developer resources
Overview
Versioning
Changelog
Upgrade your API version
Upgrade your SDK version
Essentials
SDKs
API
Testing
Stripe CLI
Sample projects
Tools
Workbench
Developers Dashboard
Stripe Shell
Stripe for Visual Studio Code
Features
Workflows
Event Destinations
Stripe health alertsFile uploads
AI solutions
Agent toolkit
Security and privacy
Security
Privacy
Extend Stripe
Build Stripe apps
    Overview
    Get started
    Create an app
    How Stripe Apps work
    Sample apps
    Build an app
    Store secrets
    API authentication methods
    Authorisation 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
    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
      Tickbox
      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
Use apps from Stripe
Partners
Partner ecosystem
Partner certification
HomeDeveloper resourcesBuild Stripe appsComponents

SignInView component for Stripe Apps

SignInView allows apps to render a sign in screen.

Use the SignInView component to display a graphic with your app’s icon next to Stripe’s, a short description of your sign in process, action buttons, and so on. If your app requires users to sign in, the SignInView component is required to make sure users clearly understand that they’re connecting to Stripe.

A SignInView example displayed in the drawer.

SignInView used on the settings page.

SignInView props

PropertyType

brandColor

Optional

string | undefined

A CSS colour that contrasts well with brandIcon.

brandIcon

Optional

string | undefined

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

description

Optional

string | undefined

A paragraph description of the app and its features.

descriptionActionContents

Optional

React.ReactNode

Description action contents that open in a FocusView.

descriptionActionLabel

Optional

string | undefined

An action label (“Learn more” or “View demo”, for example) below the description.

descriptionActionTitle

Optional

string | undefined

The title in the FocusView for the description action.

footerContent

Optional

React.ReactNode

React node below the primary action in the footer.

primaryAction

Optional

(SignInActionWithHref | SignInActionWithOnPress) | undefined

Related types: SignInActionWithHref, SignInActionWithOnPress.

secondaryAction

Optional

(SignInActionWithHref | SignInActionWithOnPress) | undefined

Related types: SignInActionWithHref, SignInActionWithOnPress.

SignInActionWithHref

PropertyType

href

Required

string

label

Required

string

onPress

Optional

((event: PressEvent) => void) | undefined

target

Optional

string | undefined

SignInActionWithOnPress

PropertyType

label

Required

string

onPress

Required

(event: PressEvent) => void

href

Optional

string | undefined

target

Optional

string | undefined

Example

import {Link, SignInView} from '@stripe/ui-extension-sdk/ui'; import appIcon from './icon.svg'; const Onboarding = ( <SignInView description="Connect your SuperTodo account with Stripe." primaryAction={{label: 'Sign in', href: 'https://example.com'}} footerContent={ <> Don't have an account? <Link href="https://example.com">Sign up</Link> </> } brandColor="#635bff" brandIcon={appIcon} /> );

Additional context

Before a user signs in, you might want to display a demo, a detailed description of your app, or screenshots. Remember that at this point the user has already installed your app so they should be motivated to sign in, but if you want to show additional context, you can do it in a focused view using the descriptionActionLabel, descriptionActionTitle, and descriptionActionContents properties. For example:

import {Img, Link, SignInView} from '@stripe/ui-extension-sdk/ui'; import appIcon from './icon.svg'; const Onboarding = () => ( <SignInView description="Connect your SuperTodo account with Stripe." primaryAction={{label: 'Sign in', href: 'https://example.com'}} footerContent={ <> Don't have an account? <Link href="https://example.com">Sign up</Link> </> } brandColor="#635bff" brandIcon={appIcon} descriptionActionLabel="Learn more" descriptionActionTitle="Learn more" descriptionActionContents={ <> <Img src="https://example.com/screenshot.png" /> To import existing data from SuperTodo, you will need to connect your SuperTodo account to Stripe. </> } /> );

See also

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