# Stripe Apps の追加のコンテキスト

アカウント登録の追加のコンテキストを使用して、ユーザーのアプリに対する理解を深める方法をご紹介します。

ユーザーがサインインする前に追加のコンテキストを表示する必要がある場合は、別の画面で専用のスペースを使用します。

## Before you begin

[アプリを作成します](https://docs.stripe.com/stripe-apps/create-app.md)。

## 推奨される使用法

- [FocusView](https://docs.stripe.com/stripe-apps/components/focusview.md) コンポーネントを使用して、追加のコンテキストを表示したり、アプリの動作の[デモ](https://docs.stripe.com/stripe-apps/patterns/demo.md)画面を表示したりします。
- サインイン画面にはアカウント登録のタスクを中心に表示します。追加のコンテキストは、簡単で短く、状況に応じたものにします。以下に例を示します。
![](https://b.stripecdn.com/docs-statics-srv/assets/contextview-wide.05a45f6c9e0e4af6a0e47d783badb9f6.png)

## 例

次の例は、`SignInView` コンポーネント内に表示される追加のコンテンツを示しています。

```jsx
import {SignInView, Img, Link} 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>
      </>
    }
    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.
      </>
    }
    brandColor="#635bff"
    brandIcon={appIcon}
  />
);
```