# Contenu de démonstration pour Stripe Apps

Découvrez comment afficher une démonstration de votre application.

Lorsque vous créez une démonstration du fonctionnement de votre application, veillez à ce que le contenu soit bref et mettez uniquement en évidence les principales fonctionnalités de votre application.

## Before you begin

[Créer une application](https://docs.stripe.com/stripe-apps/create-app.md)

## Utilisation suggérée

- Ajoutez une vue de page dédiée qui n’interfère pas avec le flux d’inscription.
- Décrivez les principales fonctionnalités de votre application, en évitant de fournir trop ou trop peu d’informations. Par exemple :
![](https://b.stripecdn.com/docs-statics-srv/assets/demo-content.019b1bd485c337fe7592b54ef729db53.png)

## Exemple

L’exemple suivant illustre l’affichage de contenu de démonstration dans un composant `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}
  />
);
```