# Anmeldevorlage für Stripe Apps

So verwenden Sie die SignInView-Komponente mit Ihrer App.

Wenn sich Nutzer/innen bei Ihrer App anmelden müssen, ist die `SignInView`-Komponente erforderlich. Mit dieser machen Sie Nutzer/innen deutlich, dass sie sich mit Stripe verbinden.

## Before you begin

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

## Empfohlene Verwendung

- Damit die Passwörter von Nutzer/innen nicht gefährdet werden, bitten Sie diese niemals darum, ihre vollständigen Anmeldedaten mit Stripe zu teilen.
- Achten Sie auf einfache und zielgerichtete Inhalte. Vermeiden Sie Links, die Nutzer/innen vom Onboarding ablenken könnten. Das kann so aussehen:
![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-01.fea0b34449e5808d68c542be4a4301dc.png)
![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-02.65d673b4703531cf35dd1847941c7eff.png)

- Bieten Sie Nutzer/innen die Option, sich bei einem bestehenden Konto anzumelden oder sich für ein neues zu registrieren.
- Verwenden Sie Call-to-Action-Schaltflächen, die mit Ihrem Onboarding außerhalb von Stripe übereinstimmen. Zum Beispiel:
![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-03.b3bce56fcedbe430099ebe2155a86537.png)

## Beispiel

So fügen Sie die Komponente zu Ihrer App hinzu:

```jsx
import {SignInView} from '@stripe/ui-extension-sdk/ui';
```

Das folgende Beispiel zeigt eine `SignInView`-Komponente:

```jsx
<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}
/>
```