Stripe Apps の SignInView コンポーネント

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

SDK バージョン

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

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

設定ページで使用される SignInView。

SignInView プロパティ

プロパティ	型
`brandColor`	任意 `string \| undefined` `brandIcon` と対照的な CSS カラー。
`brandIcon`	任意 `string \| undefined` `brandColor` と対照的な、線の端が四角い単色の SVG。
`description`	任意 `string \| undefined` アプリとその機能についての説明。
`descriptionActionContents`	任意 `React.ReactNode` `FocusView` で開かれる説明アクションコンテンツ。
`descriptionActionLabel`	任意 `string \| undefined` 説明の下にあるアクションラベル (「もっと知る」や「デモを見る」など)。
`descriptionActionTitle`	任意 `string \| undefined` 説明アクションの `FocusView` 内のタイトル。
`footerContent`	任意 `React.ReactNode` フッターのプライマリーアクションの下にある React ノード。
`primaryAction`	任意 `(SignInActionWithHref \| SignInActionWithOnPress) \| undefined` 関連型: SignInActionWithHref、SignInActionWithOnPress。
`secondaryAction`	任意 `(SignInActionWithHref \| SignInActionWithOnPress) \| undefined` 関連型: SignInActionWithHref、SignInActionWithOnPress。

SignInActionWithHref

プロパティ	型
`href`	必須 `string`
`label`	必須 `string`
`onPress`	任意 `((event: PressEvent) => void) \| undefined`
`target`	任意 `string \| undefined`

SignInActionWithOnPress

プロパティ	型
`label`	必須 `string`
`onPress`	必須 `(event: PressEvent) => void`
`href`	任意 `string \| undefined`
`target`	任意 `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}
  />
);

追加のコンテキスト

ユーザーがサインインする前に、デモ、アプリの詳細な説明、またはスクリーンショットを表示することもできます。この時点でユーザーはすでにアプリをインストールしているため、すぐにサインインしようとしますが、追加のコンテキストを表示したい場合は、descriptionActionLabel、descriptionActionTitle、descriptionActionContents の各プロパティを使用してフォーカスビューで表示することができます。以下に例を挙げます。

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