Einstellungen für die Anmeldung bei Stripe Apps
So führen Sie Onboarding Ihrer Nutzer/innen auf der Einstellungsseite durch.
Wenn Sie eine Connect-Erweiterung oder eine reine Back-End-App erstellen, führen Sie das Onboarding über eine Einstellungsseite durch.
Bevor Sie loslegen![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Empfohlene Verwendung![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
- Melden Sie Nutzer/innen über eine Einstellungsseite an.
- Wenden Sie dieses Entwurfsmuster genau wie eine Schublade an. Vermeiden Sie zusätzliche Inhalte, die Nutzer/innen beim Onboarding verwirren könnten. Zum Beispiel:
![](https://b.stripecdn.com/docs-statics-srv/assets/settings-sign-in-01.b57a79fdec455f0d7fe7ab5c4446cd2c.png)
- Wenn Sie Nutzer/innen zusätzliche Inhalte bereitstellen müssen, verwenden Sie eine FocusView-Komponente. Das kann so aussehen:
![](https://b.stripecdn.com/docs-statics-srv/assets/settings-sign-in-02.89b31ce0d8e7a8beea7594e323b6aec8.png)
Beispiel![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Um die SignInView
-Komponente zu Ihrer Einstellungsansicht hinzuzufügen, zeigen Sie diese bedingt mit der SettingsView
-Komponente basierend auf dem Anmeldestatus des/der Nutzer/in an:
import {SignInView, SettingsView} from '@stripe/ui-extension-sdk/ui'; import appIcon from './icon.svg'; const AppSettings = () => { // Set this variable based on your app's concept of sign in state const isUserSignedIn = ...; return isUserSignedIn ? ( <SettingsView> {/* Add your settings view content. */} </SettingsView> ) : ( <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> </> } brandColor="#635bff" brandIcon={appIcon} /> );