Vue de connexion
Utilisez le composant SignInView
pour afficher une image contenant l’icône de votre application à côté de celle de Stripe, une brève description de votre processus de connexion, des boutons d’action, etc. Si les utilisateurs doivent se connecter à votre application, le composant SignInView
est requis afin que les utilisateurs comprennent bien qu’ils se connectent à Stripe.
Un exemple de SignInView affiché dans le volet.
SignInView utilisé sur la page des paramètres.
Props
Prop | Type | Description |
---|---|---|
brandColor |
| A CSS color that contrasts well with `brandIcon`. |
brandIcon |
| A square, 1-color SVG that contrasts well with `brandColor`. |
description |
| A paragraph description of the app and its features. |
descriptionActionContents |
| Description action contents that open in a FocusView. |
descriptionActionLabel |
| An action label ("Learn more" or "View demo", for example) below the description. |
descriptionActionTitle |
| The title in the FocusView for the description action. |
footerContent |
| React node below the primary action in the footer. |
primaryAction |
| A primary call to action ("Sign in" or "Authenticate", for example) button placed in the footer. |
secondaryAction |
| A secondary call to action ("Sign up", for example) link placed in the footer. |
Exemple
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} />
Contexte supplémentaire
Avant qu’un utilisateur ne se connecte, vous pouvez afficher une démonstration, une description détaillée de votre application ou des captures d’écran de votre expérience. N’oubliez pas qu’à ce stade, l’utilisateur a déjà installé votre application. Il a donc probablement déjà décidé de se connecter. Cependant, si vous souhaitez afficher davantage de contexte, vous pouvez le faire dans une vue ciblée à l’aide de descriptionActionLabel
, descriptionActionTitle
et descriptionActionContents
. Par exemple :
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. </> } /> );