# É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.

## Before you begin

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

## 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](https://b.stripecdn.com/docs-statics-srv/assets/waiting-screens-01.9722e1605d31c8f01f2045f1a5587f33.png)

- 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](https://b.stripecdn.com/docs-statics-srv/assets/waiting-screens-02.1e3d5a7715a3911377a7c1b98575faef.png)

- 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](https://b.stripecdn.com/docs-statics-srv/assets/waiting-screens-03.d4038dfb4db72022ac2b627d863d9df8.png)

## Exemple

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

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