# Stripe Apps のデモ用のコンテンツ

アプリのデモを表示する際のヒントをご紹介します。

アプリのデモを構築する際は、コンテンツを簡潔にして、アプリが提供する主要機能のみを強調します。

## Before you begin

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

## 推奨される使用法

- アカウント登録フローに干渉しない専用のページビューを追加します。
- アプリの主要機能を伝えるのに「過不足のない」情報を提供します。以下に例を示します。
![](https://b.stripecdn.com/docs-statics-srv/assets/demo-content.019b1bd485c337fe7592b54ef729db53.png)

## 例

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

```jsx
import {SignInView, Banner, Button} 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="View demo"
    descriptionActionTitle="Todo lists"
    descriptionActionContents={
      <>
        <Box css={{marginBottom: 'small'}}>
          <Button type="primary" css={{width: 'fill', alignX: 'center'}}>
            Create list
          </Button>
        </Box>
        <Banner
          type="caution"
          title="You're viewing demo content"
          description="Your data will be visible once you sign in."
        />
        ...continued app demo content.
      </>
    }
    brandColor="#635bff"
    brandIcon={appIcon}
  />
);
```