SignInView
Mit der SignInView
-Komponente können Sie neben dem App-Symbol von Stripe Ihr eigenes Symbol sowie eine kurze Beschreibung Ihres Anmeldevorgangs, der Aktionsschaltflächen usw. einfügen. Müssen sich Ihre Nutzer/innen bei Ihrer App anmelden, so ist die SignInView
-Komponente erforderlich – dadurch wissen die Nutzer/innen, dass sie sich mit Stripe verbinden.
Ein SignInView-Beispiel, das in der Schublade angezeigt wird.
Auf der Einstellungsseite verwendetes SignInView.
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. |
Beispiel
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} />
Zusätzlicher Kontext
Vor der Anmeldung durch Nutzer/innen sollten Sie diesen eine Demo, eine detaillierte Beschreibung Ihrer App oder auch Screenshots der Erfahrung zeigen. Denken Sie daran, dass Nutzer/innen zu diesem Zeitpunkt Ihre App bereits installiert haben – eine Anmeldung ist also wahrscheinlich. Wenn Sie jedoch zusätzliche Inhalte anzeigen möchten, können Sie dies in einer fokussierten Ansicht mit den Eigenschaften descriptionActionLabel
, descriptionActionTitle
und descriptionActionContents
tun. Das kann z. B. so aussehen:
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. </> } /> );