Stripe Apps の SignInView コンポーネント

SignInView を使用すると、アプリでサインイン画面を表示することができます。

SDK バージョン

SignInView コンポーネントを使用して、Stripe のアイコンの横にアプリのアイコンのグラフィック、サインインプロセスの簡単な説明、アクションボタンなどを表示します。アプリでユーザーがサインインする必要がある場合は、ユーザーが Stripe に接続していることを明確に把握するために、SignInView コンポーネントが必要です。

ドロワーに表示される SignInView の例。

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`

例

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

追加のコンテキスト

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:

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

注