SignInView
SignInView を使用すると、アプリでサインイン画面を表示することができます。
SignInView
コンポーネントを使用して、Stripe のアイコンの横にアプリのアイコンのグラフィック、サインインプロセスの簡単な説明、アクションボタンなどを表示します。アプリでユーザーがサインインする必要がある場合は、ユーザーが Stripe に接続していることを明確に把握するために、SignInView
コンポーネントが必要です。
ドロワーに表示される SignInView の例。
設定ページで使用されている 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. |
例
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} />
追加のコンテキスト
ユーザーがサインインする前に、デモ、アプリの詳細な説明、機能のスクリーンショットを表示することもできます。この時点でユーザーはすでにアプリをインストールしているため、すぐにサインインしようとしますが、追加のコンテキストを表示したい場合は、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 href="https://example.com/screenshot.png" /> To import existing data from SuperTodo, you will need to connect your SuperTodo account to Stripe. </> } /> );