# Demo-Inhalte für Stripe Apps

Wir geben Ihnen Tipps zum Anzeigen einer Demo Ihrer App.

Wenn Sie eine Demo Ihrer App erstellen, halten Sie die Inhalte kurz und heben nur die wichtigsten App-Funktionen hervor.

## Before you begin

[App erstellen](https://docs.stripe.com/stripe-apps/create-app.md).

## Empfohlene Verwendung

- Fügen Sie eine spezielle Seitenansicht hinzu, damit der Onboarding-Ablauf nicht beeinträchtigt wird.
- Geben Sie „gerade genug“ Informationen, um die Hauptfunktionen Ihrer App zu verdeutlichen. Das kann so aussehen:
![](https://b.stripecdn.com/docs-statics-srv/assets/demo-content.019b1bd485c337fe7592b54ef729db53.png)

## Beispiel

Im folgenden Beispiel sehen Sie Demo-Inhalte, die in einer `SignInView`-Komponente angezeigt werden:

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