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.

Avant de commencer

Créer une application

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 :

Exemple

L’exemple suivant illustre l’affichage de contenu de démonstration dans un composant SignInView :

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