SignInView component for Stripe Apps
Use SignInView to allow apps to render a sign in screen.
SDK version
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
| Property | Type |
|---|---|
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 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
| Property | Type |
|---|---|
href | Required string |
label | Required string |
onPress | Optional ((event: PressEvent) => void) | undefined |
target | Optional string | undefined |
SignInActionWithOnPress
| Property | Type |
|---|---|
label | Required string |
onPress | Required (event: PressEvent) => void |
href | Optional string | undefined |
target | Optional string | undefined |
Example
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: