Écrans d'attente pour Stripe Apps

Découvrez comment utiliser l'écran d'attente.

Informez vos utilisateurs tout au long du processus d’inscription et fournissez des indications précises sur les temps d’attente et les prochaines étapes à l’aide d’écrans d’attente.

Avant de commencer

Créer une application

Utilisation suggérée

Si les utilisateurs reviennent sur Stripe pendant le flux d’inscription, tenez-les informés des la situation. Par exemple :

Écran avec une étape à réaliser, un contexte de prise en charge, une action à effectuer et la possibilité de recommencer une opération

N’ajoutez d’appel à l’action que pour diriger les utilisateurs vers l’étape suivante du processus d’inscription ou pour fournir des informations dont ils auront besoin lors de l’étape suivante.
Rédigez des phrases claires et courtes. Évitez de fournir plus de contexte que ce dont les utilisateurs ont besoin. Par exemple :

Écran invitant les utilisateurs à finaliser une inscription ou à recommencer une opération

Si vous devez rediriger les utilisateurs hors de Stripe pour se connecter à votre compte (non recommandé), utilisez un écran d’attente qui indique clairement cette transition. Par exemple :

Écran invitant les utilisateurs à finaliser leur inscription ou à recommencer l'opération

Exemple

L’exemple suivant montre un écran d’attente intégré à un composant ContextView :

import {
  Box,
  Button,
  ContextView,
  Icon,
  Inline,
  Link,
} from "@stripe/ui-extension-sdk/ui";
const WaitingScreen = () => {
  return (
    <ContextView
      title="Finish onboarding"
      footerContent={
        <Box>
          <Button type="primary" css={{ width: "fill" }}>
            Finish onboarding
          </Button>
          <Box
            css={{
              marginTop: "small",
              textAlign: "center",
              stack: "x",
              alignX: "center",
              gap: "small",
            }}
          >
            <Box>Want to go back?</Box>
            <Link>Start over.</Link>
          </Box>
        </Box>
      }
    >
      <Box css={{ marginBottom: "xlarge" }}>
        <Inline
          css={{
            backgroundColor: "container",
            keyline: "neutral",
            borderRadius: "small",
            paddingX: "small",
            paddingTop: "small",
            paddingBottom: "xsmall",
          }}
        >
          <Icon name="clock" css={{ fill: "secondary" }} />
        </Inline>
      </Box>
      <Box>Please finish onboarding to SuperTodo.</Box>
    </ContextView>
  );
};