# Wartebildschirme für Stripe Apps

So verwenden Sie den Wartebildschirm.

Halten Sie Ihre Nutzer/innen während des gesamten Onboarding-Ablaufs auf dem Laufenden und legen Sie mit Wartebildschirmen klare Erwartungen bezüglich der Wartezeiten und der nächsten Schritte fest.

## Before you begin

[App erstellen](https://docs.stripe.com/stripe-apps/create-app.md).

## Empfohlene Verwendung

- Halten Sie Nutzer/innen über alle Geschehnisse auf dem Laufenden, wenn diese während des Onboarding-Ablaufs zu Stripe zurückkehren. Zum Beispiel:
![Ein Bildschirm mit einem auszuführenden Schritt, unterstützendem Kontext, einer auszuführenden Aktion und der Möglichkeit, neu zu beginnen](https://b.stripecdn.com/docs-statics-srv/assets/waiting-screens-01.9722e1605d31c8f01f2045f1a5587f33.png)

- Fügen Sie eine Handlungsaufforderung nur dann hinzu, wenn sie zum nächsten Schritt des Onboarding-Ablaufs führt, oder um zusätzliche Informationen zum nächsten Schritt bereitzustellen.
- Achten Sie auf klare und präzise Angaben und geben Sie nur die nötigsten Inhalte an. Zum Beispiel:
![Ein Bildschirm, in dem Nutzer/innen aufgefordert werden, eine Anwendung abzuschließen oder neu zu beginnen](https://b.stripecdn.com/docs-statics-srv/assets/waiting-screens-02.1e3d5a7715a3911377a7c1b98575faef.png)

- Wenn Sie Nutzer/innen außerhalb von Stripe mit Ihrem Konto verbinden müssen (**nicht** empfohlen), verwenden Sie einen Wartebildschirm, der diesen Vorgang deutlich macht. Das kann so aussehen:
![Ein Bildschirm, in dem Nutzer/innen aufgefordert werden, das Onboarding abzuschließen oder neu zu beginnen](https://b.stripecdn.com/docs-statics-srv/assets/waiting-screens-03.d4038dfb4db72022ac2b627d863d9df8.png)

## Beispiel

Das folgende Beispiel zeigt einen Wartebildschirm, der in eine `ContextView`-Komponente integriert ist:

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