Ir a contenido
Crea una cuenta
 o
Inicia sesión
Logotipo de Stripe Docs
/
Crear una cuenta
Iniciar sesión
Resumen
Control de versiones
Actualiza tu versión de API
Essentials
Herramientas
Stripe para Visual Studio Code
Funcionalidades
Alertas de estado de StripeCargas de archivos
Soluciones de IA
Model Context Protocol
Seguridad y privacidad
Amplía Stripe
Build Stripe apps
Socios
Certificación de socio

Demo content for Stripe Apps

Learn tips for displaying a demo of your app.

When building a demo of your app, keep the content brief and only highlight the top functionality that your app offers.

Antes de comenzar

Create an app.

Suggested use

  • Add a dedicated page view that doesn’t interfere with the onboarding flow.
  • Provide “just enough” information to communicate the main functionality of your app. For example:

Example

The following sample shows demo content displayed within a SignInView component:

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}
  />
);
¿Te fue útil esta página?
SíNo