SignInView-Komponente für Stripe-Apps

Mit SignInView können Apps einen Anmeldebildschirm rendern.

SDK-Version

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.

SignInView-Eigenschaften

Eigenschaft	Typ
`brandColor`	Optional `string \| undefined` Eine CSS-Farbe, die sich gut von `brandIcon` abhebt.
`brandIcon`	Optional `string \| undefined` Ein quadratischer, 1-farbiger SVG, der sich gut von der `brandColor` abhebt.
`description`	Optional `string \| undefined` Eine Absatzbeschreibung der App und ihrer Funktionen.
`descriptionActionContents`	Optional `React.ReactNode` Beschreibung von Aktionsinhalten, die in einer `FocusView` geöffnet werden.
`descriptionActionLabel`	Optional `string \| undefined` Ein Aktionslabel (z. B. „Mehr erfahren“ oder „Demo anzeigen“) unter der Beschreibung.
`descriptionActionTitle`	Optional `string \| undefined` Der Titel in der `FocusView` für die Beschreibungsaktion.
`footerContent`	Optional `React.ReactNode` React Node unterhalb der primären Aktion in der Fußzeile.
`primaryAction`	Optional `(SignInActionWithHref \| SignInActionWithOnPress) \| undefined` Verwandte Typen: SignInActionWithHref, SignInActionWithOnPress.
`secondaryAction`	Optional `(SignInActionWithHref \| SignInActionWithOnPress) \| undefined` Verwandte Typen: SignInActionWithHref, SignInActionWithOnPress.

SignInActionWithHref

Eigenschaft	Typ
`href`	Pflichtfeld `string`
`label`	Pflichtfeld `string`
`onPress`	Optional `((event: PressEvent) => void) \| undefined`
`target`	Optional `string \| undefined`

SignInActionWithOnPress

Eigenschaft	Typ
`label`	Pflichtfeld `string`
`onPress`	Pflichtfeld `(event: PressEvent) => void`
`href`	Optional `string \| undefined`
`target`	Optional `string \| undefined`

Beispiel

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}
  />
);

Weitere Inhalte

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. Zum Beispiel:

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.
      </>
    }
  />
);