SignInView

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

Props

Prop	Type	Description
brandColor	`string`	A CSS color that contrasts well with `brandIcon`.
brandIcon	`string`	A square, 1-color SVG that contrasts well with `brandColor`.
description	`string`	A paragraph description of the app and its features.
descriptionActionContents	`ReactNode`	Description action contents that open in a FocusView.
descriptionActionLabel	`string`	An action label ("Learn more" or "View demo", for example) below the description.
descriptionActionTitle	`string`	The title in the FocusView for the description action.
footerContent	`ReactNode`	React node below the primary action in the footer.
primaryAction	`{ label: string; href: string; target?: string; onPress?: (() => void); } \| { label: string; href?: string \| undefined; target?: string \| undefined; onPress: () => void; } \| undefined`	A primary call to action ("Sign in" or "Authenticate", for example) button placed in the footer.
secondaryAction	`{ label: string; href: string; target?: string; onPress?: (() => void); } \| { label: string; href?: string \| undefined; target?: string \| undefined; onPress: () => void; } \| undefined`	A secondary call to action ("Sign up", for example) link placed in the footer.

Example

import {
  Link,
  SignInView,
} from '@stripe/ui-extension-sdk';
import appIcon from './icon.svg';

<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 of the experience. 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 href="https://example.com/screenshot.png" />
        To import existing data from SuperTodo, you will need to connect your SuperTodo account to Stripe.
      </>
    }
  />
);

SignInView

Props

Example

Additional context

See also