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.

Bevor Sie loslegen

App erstellen.

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

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

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

Beispiel

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

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