# Mit den in Connect eingebetteten Komponenten loslegen

Erfahren Sie, wie Sie Dashboard-Funktionen in Ihre Website einbetten.

Verwenden Sie in Connect eingebettete Komponenten, um Ihrer Website Dashboard-Funktionen für verbundene Konten hinzuzufügen. Mit diesen Bibliotheken und der unterstützenden API können Sie Ihren Nutzerinnen und Nutzern direkt in Ihrem Dashboard und Ihren mobilen Anwendungen Zugriff auf Stripe-Produkte gewähren.

Eine umfassende Version dieses Handbuchs finden Sie im [Schnellstart zur Integration eingebetteter Connect-Komponenten](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md). Dort können Sie auch eine Beispielintegration herunterladen. Um das Erscheinungsbild der in Connect eingebetteten Komponenten anzupassen, verwenden Sie die Option `appearance` bei der Initialisierung von `StripeConnectInstance`. Siehe die [vollständige Liste der Darstellungsparameter](https://docs.stripe.com/connect/customize-connect-embedded-components.md).

## Connect.js initialisieren [Clientseitig] [Serverseitig]

Stripe verwendet eine [AccountSession](https://docs.stripe.com/api/account_sessions.md), um Ihre Absicht zum Ausdruck zu bringen, den API -Zugriff auf Ihr verbundenes Konto zu delegieren.

Die AccountSessions API gibt ein *Client-Geheimnis* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) zurück, das es einer eingebetteten Komponente ermöglicht, so auf die Ressourcen eines verbundenen Kontos zuzugreifen. Dies geschieht so, als würden Sie die API-Aufrufe selbst ausführen.

### AccountSession erstellen (Server)

In einer einseitigen Anwendung initiiert Ihr Client eine Anfrage an Ihren Server, um die Kontositzung zu erhalten. Sie können einen neuen Endpoint auf Ihrem Server erstellen, der das Client-Geheimnis an den Browser zurückgibt:

#### Ruby

```ruby
require 'sinatra'
require 'stripe'
# This is a placeholder - it should be replaced with your secret API key.
# Sign in to see your own test API key embedded in code samples.
# Don’t submit any personally identifiable information in requests made with this key.
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = Stripe::AccountSession.create({
      account: {{CONNECTED_ACCOUNT_ID}},
      components: {
        payments: {
          enabled: true,
          features: {
            refund_management: true,
            dispute_management: true,
            capture_payments: true
          }
        }
      }
    })

    {
      client_secret: account_session[:client_secret]
    }.to_json
  rescue => error
    puts "An error occurred when calling the Stripe API to create an account session: #{error.message}";
    return [500, { error: error.message }.to_json]
  end
end
```

### API-Kontositzung erstellen

Die [Create Account Session API](https://docs.stripe.com/api/account_sessions/create.md) bestimmt den Zugriff auf Komponenten und Funktionen für eingebettete Connect-Komponenten. Stripe erzwingt diese Parameter für alle Komponenten, die der Konto-Sitzung entsprechen.  Sie können beispielsweise die [Verwaltung von Rückerstattungen](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) nur für Administrator/innen Ihrer Website aktivieren, nicht aber für andere Nutzer/innen. Um sicherzustellen, dass der Nutzerrollenzugriff erzwungen wird, müssen Sie die Nutzerrolle Ihrer Website den Komponenten der Konto-Sitzung zuordnen.

### Connect.js einrichten (Client)

Wir empfehlen, Connect.js mit npm einzurichten, wie im folgenden Beispiel gezeigt, aber es ist auch [ohne npm](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#without-npm) möglich.

#### HTML + JS

Installieren Sie das [npm-Paket](https://github.com/stripe/connect-js), um Connect.js als Modul zu verwenden.

```bash
npm install --save @stripe/connect-js
```

#### React

Installieren Sie Bibliotheken von Connect.js und die React Connect.js aus der [öffentlichen Registry von npm](https://www.npmjs.com/package/@stripe/react-connect-js).

```bash
npm install --save @stripe/connect-js @stripe/react-connect-js
```

### Connect.js laden und intialisieren (Client)

Rufen Sie `loadConnectAndInitialize` mit Ihrem veröffentlichbaren Schlüssel und einer Funktionalität auf, die ein Client-Geheimnis durch Aufrufen des neuen Endpoints abruft, den Sie auf Ihrem Server erstellt haben. Verwenden Sie die zurückgegebene `StripeConnectInstance`, um eingebettete Komponenten zu erstellen. Nachdem Sie Connect.js initialisiert haben, können Sie jederzeit Komponenten im DOM bereitstellen oder ihre Bereitstellung aufheben. Dies umfasst alle Elemente, die in React- oder Vue-Portalen gerendert werden.

#### HTML + JS

Um eine component zu erstellen, rufen Sie `create` in der oben erstellen `StripeConnectInstance` auf, und übergeben Sie dann den Komponentennamen. Dadurch wird ein [nutzerdefiniertes Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) zurückgegeben, das Connect.js registriert und verwendet, um Ihr DOM automatisch mit Stripe zu verbinden. Sie können dieses Element dann an Ihr DOM `append`.

Rufen Sie `create` mit `payments` auf und fügen Sie das Ergebnis dann Ihrem DOM hinzu, um eine Nutzeroberfläche für Zahlungen zu rendern.

#### React

Um die in Connect eingebetteten Komponenten mit React-Wrappern zu verwenden, schließen Sie Ihre Anwendung in einen `ConnectComponentsProvider` ein und übergeben Sie die zuvor erstellte `StripeConnectInstance`.

Verwenden Sie `ConnectPayments` auf Ihrer Seite, um eine Nutzeroberfläche für Zahlungen zu rendern.

#### HTML + JS

```html
<head>
  <script type="module" src="index.js" defer></script>
</head>
<body>
  <h1>Payments</h1>
  <div id="container"></div>
  <div id="error" hidden>Something went wrong!</div>
</body>
```

```javascript
import {loadConnectAndInitialize} from '@stripe/connect-js';

const fetchClientSecret = async () => {
  // Fetch the AccountSession client secret
  const response = await fetch('/account_session', { method: "POST" });
  if (!response.ok) {
    // Handle errors on the client side here
    const {error} = await response.json();
    console.error('An error occurred: ', error);
    document.querySelector('#error').removeAttribute('hidden');
    return undefined;
  } else {
    const {client_secret: clientSecret} = await response.json();
    document.querySelector('#error').setAttribute('hidden', '');
    return clientSecret;
  }
}

const stripeConnectInstance = loadConnectAndInitialize({
    // This is a placeholder - it should be replaced with your publishable API key.
    // Sign in to see your own test API key embedded in code samples.
    // Don’t submit any personally identifiable information in requests made with this key.
    publishableKey: "<<YOUR_PUBLISHABLE_KEY>>",
    fetchClientSecret: fetchClientSecret,
  });
const paymentComponent = stripeConnectInstance.create("payments");
const container = document.getElementById("container");
container.appendChild(paymentComponent);
```

[Eine vollständige Liste der unterstützten eingebetteten Komponenten anzeigen →](https://docs.stripe.com/connect/supported-embedded-components.md)

## Configure Connect.js [Clientseitig]

Die Methode `loadConnectAndInitialize` auf dem Client benötigt mehrere Optionen, um Connect.js zu konfigurieren.

| Option              | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |              |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `publishableKey`    | Der [veröffentlichbare Schlüssel](https://docs.stripe.com/keys.md) für Ihre Integration.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | erforderlich |
| `fetchClientSecret` | Die Funktion, die das von `/v1/account_sessions` zurückgegebene *Client-Geheimnis* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) abruft. Dadurch wird `StripeConnectInstance` mitgeteilt, an welches Konto der Zugriff delegiert werden soll. Diese Funktion wird auch verwendet, um eine Client-Geheimnis-Funktion abzurufen, um die Sitzung zu aktualisieren, wenn sie abläuft. `fetchClientSecret` sollte immer eine neue Kontositzung erstellen und ein neues `client_secret` zurückgeben. | erforderlich |
| `appearance`        | Ein Objekt zum Anpassen des Erscheinungsbilds der in Connect eingebetteten Komponenten.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | optional     |
| `locale`            | Ein Parameter zum Angeben des [Gebietsschemas](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#localization), das von eingebetteten Connect-Komponenten verwendet wird. Das Gebietsschema ist standardmäßig auf die Browsersprache eingestellt. Wenn das angegebene Gebietsschema nicht direkt unterstützt wird, verwenden wir eine passende Alternative (zum Beispiel könnte `fr-be` auf `fr-fr` zurückgreifen). Eine Liste der unterstützten Gebietsschemata finden Sie unter [Lokalisierung](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#localization).                     | optional     |
| `fonts`             | Ein Array mit nutzerdefinierten Schriftarten, die von allen eingebetteten Komponenten verwendet werden können, die aus einer `StripeConnectInstance` erstellt werden. Sie können Schriftarten als [CssFontSource](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#css-font-source)- oder [CustomFontSource](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#custom-font-source)-Objekte angeben.                                                                                                                                                                                   | optional     |

### Erscheinungsbild der in Connect eingebetteten Komponenten anpassen

Das [Figma UI-Toolkit für eingebettete Komponenten](https://www.figma.com/community/file/1438614134095442934) enthält alle Komponenten, gängige Muster und eine Beispielanwendung. Sie können es verwenden, um eingebettete Nutzeroberflächen auf Ihrer Website zu visualisieren und zu gestalten.

Wir bieten eine [Reihe von Optionen](https://docs.stripe.com/connect/embedded-appearance-options.md), um das Erscheinungsbild von in Connect eingebetteten Komponenten anzupassen. Diese Anpassungen betreffen Schaltflächen, Symbole und andere Akzentuierungen in unserem Designsystem.

> #### Notwendige Popups
> 
> Einige Verhaltensweisen in eingebetteten Komponenten, wie z. B. die [Nutzerauthentifizierung](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), müssen in einem Popup dargestellt werden. Sie können die eingebettete Komponente nicht so anpassen, dass solche Popups vermieden werden.

Sie können diese Optionen bei der Initialisierung von `StripeConnectInstance` festlegen, indem Sie ein Erscheinungsbild an das `appearance`-Objekt übergeben. Sie können nur die [Connect.js-Optionen](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) verwenden, um die Formate in den in Connect eingebetteten Komponenten zu ändern. Die Schriftfamilie und die Hintergrundfarbe der in Connect eingebetteten Komponenten werden vom übergeordneten HTML-Container übernommen. Alle anderen Optionen müssen Sie explizit festlegen.

```javascript
const stripeConnectInstance = loadConnectAndInitialize({
  publishableKey: "<<YOUR_PUBLISHABLE_KEY>>",
  fetchClientSecret: fetchClientSecret,
  fonts: [
    {
      cssSrc: "https://myfonts.example.com/mycssfile.css",
    },
    {
      src: `url(https://my-domain.com/assets/my-font-2.woff)`,
      family: 'My Font'
    }
  ],
  appearance: {
    // See all possible variables below
    overlays: "dialog",
    variables: {
      fontFamily: 'My Font',
      colorPrimary: "#FF0000",
    },
  },
});
```

Siehe die [vollständige Liste der Darstellungsvariablen](https://docs.stripe.com/connect/embedded-appearance-options.md).

### Das Schriftarten-Objekt

Das `fonts`-Objekt in `stripeConnect.initialize` akzeptiert ein Array von [CssFontSource](https://docs.stripe.com/js/appendix/css_font_source_object)- oder [CustomFontSource](https://docs.stripe.com/js/appendix/custom_font_source_object)-Objekten.

Wenn Sie auf Ihrer Seite nutzerdefinierte Schriftarten verwenden (z. B. `.woff` or `.tff`-Dateien), müssen Sie die Schriftartdateien bei der Initialisierung der in Connect eingebetteten Komponenten angeben. Auf diese Weise können die in Connect eingebetteten Komponenten die Schriftarten ordnungsgemäß rendern. Sie können die Dateien wie folgt angeben:

#### CssFontSource

Verwenden Sie dieses Objekt, um eine Stylesheet-URL zu übergeben, die Ihre nutzerdefinierten Schriftarten beim Erstellen einer `StripeConnectInstance` definiert. Bei einem `CssFontSource`-Objekt muss Ihre [CSP-Konfiguration](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#csp-and-http-header-requirements) das Abrufen der Domains, die mit den als CssFontSource angegebenen CSS-Datei-URLs verknüpft sind, gestatten.

| Name     | Typ                     | Beispielwert                                        |
| -------- | ----------------------- | --------------------------------------------------- |
| `cssSrc` | Zeichenfolge `required` | `https://fonts.googleapis.com/css?family=Open+Sans` | Eine relative oder absolute URL, die auf eine CSS-Datei mit [@font-face](https://developer.mozilla.org/en/docs/Web/CSS/@font-face)-Definitionen verweist. Die Datei muss unter https gehostet werden. Wenn Sie eine [Inhaltssicherheitsrichtlinie (Content Security Policy –&nbsp;CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) verwenden, sind für die Datei möglicherweise [zusätzliche Richtlinien](https://docs.stripe.com/security/guide.md#content-security-policy) erforderlich. |

#### CustomFontSource

Verwenden Sie dieses Objekt, um Ihre nutzerdefinierten Schriftarten beim Erstellen einer `StripeConnectInstance` zu übergeben.

| Name           | Typ                     | Beispielwert                                    |
| -------------- | ----------------------- | ----------------------------------------------- |
| `family`       | Zeichenfolge `required` | `Avenir`                                        | Der Name, der der Schriftart gegeben werden soll.                                                                                                                                                                                                                                                                               |
| `src`          | Zeichenfolge `required` | `url(https://my-domain.com/assets/avenir.woff)` | Ein gültiger [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src)-Wert, der auf Ihre benutzerdefinierte Schriftartdatei verweist. In der Regel (jedoch nicht immer) handelt es sich dabei um einen Link zu einer Datei mit der Endung `.woff`, `.otf` oder `.svg`. Die Datei muss über https gehostet werden. |
| `display`      | Zeichenfolge `optional` | `auto`                                          | Ein gültiger [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)-Wert.                                                                                                                                                                                                                     |
| `style`        | Zeichenfolge `optional` | `normal`                                        | `normal` , `italic` oder `oblique` .                                                                                                                                                                                                                                                                                            |
| `unicodeRange` | Zeichenfolge `optional` | `U+0-7F`                                        | Ein gültiger [unicode-range](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range)-Wert.                                                                                                                                                                                                                   |
| `weight`       | Zeichenfolge `optional` | `400`                                           | Eine gültige [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). Dies ist eine Zeichenfolge, keine Zahl.                                                                                                                                                                                             |

### In Connect eingebettete Komponenten nach der Initialisierung aktualisieren

Die Methode `update` unterstützt die Aktualisierung von in Connect eingebetteten Komponenten nach der Initialisierung. Sie können sie verwenden, um die Darstellungsoptionen zur Laufzeit zu wechseln (ohne die Seite zu aktualisieren). Verwenden Sie dazu dasselbe `stripeConnectInstance`-Objekt, das Sie mit `initialize` erstellt haben, und rufen Sie dafür die `update`-Methode auf.

```javascript
stripeConnectInstance.update({
  appearance: {
    variables: {
      colorPrimary: "#FF0000",
    },
  },
  locale: 'en-US',
});
```

> Nicht alle Optionen (zum Beispiel `fonts`) lassen sich aktualisieren. Die unterstützten Optionen für diese Methode sind eine Teilmenge der in `initialize` angebotenen Optionen. Dadurch wird die Aktualisierung von `appearance` und `locale` unterstützt.

### Breite und Höhe

Die in Connect eingebetteten Komponenten verhalten sich wie normale `block`-HTML-Elemente. Standardmäßig nehmen sie 100&nbsp;% der `width` ihres übergeordneten HTML-Elements ein und wachsen entsprechend dem darin gerenderten Inhalt in die Höhe. Sie können die `width` der in Connect eingebetteten Komponenten steuern, indem Sie die `width` des übergeordneten HTML-Objekts angeben. Sie können die `height` nicht direkt steuern, da diese vom gerenderten Inhalt abhängt. Sie können die Höhe jedoch mit `maxHeight` und `overflow: scroll` begrenzen, genauso wie Sie es mit anderen HTML-`block`-Elementen tun können.

## Authentifizierung

Wir bieten eine Reihe von APIs zur Verwaltung von Kontositzungen und Nutzeranmeldedaten in den in Connect eingebetteten Komponenten.

### Client-Geheimnis aktualisieren

Bei Sitzungen mit langer Laufzeit kann die Sitzung aus dem ursprünglich angegebenen *Client-Geheimnis* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) ablaufen. Wenn sie abläuft, verwenden wir automatisch `fetchClientSecret`, um ein neues Client-Geheimnis abzurufen und die Sitzung zu aktualisieren. Sie müssen keine zusätzlichen Parameter übergeben.

```javascript
import { loadConnectAndInitialize } from "@stripe/connect-js";
// Example method to retrieve the client secret from your server
const fetchClientSecret = async () => {
  const response = await fetch('/account_session', { method: "POST" });
  const {client_secret: clientSecret} = await response.json();
  return clientSecret;
}

const stripeConnectInstance = loadConnectAndInitialize({
  publishableKey: "{{PUBLISHABLE_KEY}}",
  fetchClientSecret: fetchClientSecret,
});
```

### Abmelden

Wir empfehlen, dass Sie `logout` für die `stripeConnectInstance` aufrufen, um das zugehörige Kontositzungsobjekt zu löschen, nachdem sich eine Nutzerin/ein Nutzer von Ihrer App abgemeldet hat. Dadurch werden alle in Connect eingebetteten Komponenten deaktiviert, die mit dieser `stripeConnectInstance` verknüpft sind.

> #### Notwendige Popups
> 
> Rufen Sie `logout` nur auf, wenn sich Ihr/e Nutzer/in von Ihrer App abmeldet. Rufen Sie die Abmelden nicht auf, wenn eine Komponente getrennt wird (beim Navigieren zu einer anderen Seite oder Schließen der Seite) oder wenn andere Komponenten geladen werden, da diese Methode die aktuelle Kontositzung und die [Stripe-Nutzersitzung](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#user-authentication-in-connect-embedded-components) vollständig ungültig macht. Nach dem Aufruf von `logout` werden keine Komponenten mehr für die zugehörige `stripeConnectInstance` gerendert.

```javascript
// Call this when your user logs out
stripeConnectInstance.logout();
```

## CSP- und HTTP-Header-Anforderungen

Wenn Ihre Website eine *Sicherheitsrichtlinie für Inhalte* (Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks) implementiert, müssen Sie die Richtlinie aktualisieren, indem Sie die folgenden Regeln hinzufügen:

- `frame-src` `https://connect-js.stripe.com` `https://js.stripe.com`
- `img-src` `https://*.stripe.com`
- `script-src` `https://connect-js.stripe.com` `https://js.stripe.com`
- `style-src` `sha256-0hAheEzaMe6uXIKV4EehS9pu1am1lj/KnnzrOYqckXk=` (SHA eines leeren Style-Elements)

Wenn Sie eine CSS-Datei zum Laden von [Web-Fonts](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#fonts-object) zur Nutzung mit in Connect eingebetteten Komponenten verwenden, muss die entsprechende URL durch Ihre CSP-Direktive [connect-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) zugelassen sein.

Durch Festlegen bestimmter [HTTP-Antwort-Header](https://developer.mozilla.org/en-US/docs/Glossary/Response_header) wird die volle Funktionalität der in Connect eingebetteten Komponenten aktiviert:

- [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy), `unsafe-none`. Dies (`unsafe-none`) ist der Standardwert des Headers, daher funktioniert es, diesen Header nicht festzulegen. Andere Werte wie `same-origin` unterbrechen die [Nutzerauthentifizierung](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components) in den in Connect eingebetteten Komponenten.

## Unterstützte Browser

Wir unterstützen dieselben Browser, die derzeit vom [Stripe-Dashboard](https://docs.stripe.com/dashboard/basics.md) unterstützt werden:

- Die letzten 20 Hauptversionen von Chrome und Firefox
- Die letzten beiden Hauptversionen von Safari und Edge
- Die letzten beiden Hauptversionen von Safari für iOS

Sie können eingebettete Connect-Komponenten nicht in eingebetteten Webansichten in mobilen oder Desktop-Anwendungen verwenden. Um eingebettete Connect-Komponenten in einer mobilen Anwendung zu verwenden, verwenden Sie die [iOS](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=ios)-, [Android](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=android)-, oder [React Native](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=react-native)-SDK.

Wenn eine eingebettete Komponente von unseren mobilen SDKs noch nicht unterstützt wird, empfehlen wir, einen Link zu einem Webbrowser zu erstellen, in dem Sie die eingebetteten Komponenten rendern können.

## Lokalisierung

Bei der Initialisierung von [Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions) können Sie den Parameter `locale` übergeben. Um das Gebietsschema einer eingebetteten Komponente an das Gebietsschema Ihrer Website anzupassen, übergeben Sie den Parameter `locale` mit dem Gebietsschema der Nutzeroberfläche, die Ihre Website rendert.

Der Standardwert des Parameters `locale` wird durch das im Browser konfigurierte Gebietsschema bestimmt. Wenn das angegebene Gebietsschema nicht direkt unterstützt wird, wird eine sinnvolle Alternative verwendet (zum Beispiel könnte `fr-be` auf `fr-fr` zurückgreifen).

Eingebettete Connect-Komponenten unterstützen die folgenden Gebietsschemen:

| Sprache                              | Gebietsschema-Code |
| ------------------------------------ | ------------------ |
| Bulgarisch (Bulgarien)               | `bg-BG`            |
| Chinesisch (Vereinfacht)             | `zh-Hans`          |
| Chinesisch (Traditionell – Hongkong) | `zh-Hant-HK`       |
| Chinesisch (Traditionell – Taiwan)   | `zh-Hant-TW`       |
| Kroatisch (Kroatien)                 | `hr-HR`            |
| Tschechisch (Tschechien)             | `cs-CZ`            |
| Dänisch (Dänemark)                   | `da-DK`            |
| Niederländisch (Niederlande)         | `nl-NL`            |
| Englisch (Australien)                | `en-AU`            |
| Englisch (Indien)                    | `en-IN`            |
| Englisch (Irland)                    | `en-IE`            |
| Englisch (Neuseeland)                | `en-NZ`            |
| Englisch (Singapur)                  | `en-SG`            |
| Englisch (Vereinigtes Königreich)    | `en-GB`            |
| Englisch (USA)                       | `en-US`            |
| Estnisch (Estland)                   | `et-EE`            |
| Philippinisch (Philippinen)          | `fil-PH`           |
| Finnisch (Finnland)                  | `fi-FI`            |
| Französisch (Kanada)                 | `fr-CA`            |
| Französisch (Frankreich)             | `fr-FR`            |
| Deutsch (Deutschland)                | `de-DE`            |
| Griechisch (Griechenland)            | `el-GR`            |
| Ungarisch (Ungarn)                   | `hu-HU`            |
| Indonesisch (Indonesien)             | `id-ID`            |
| Italienisch (Italien)                | `it-IT`            |
| Japanisch (Japan)                    | `ja-JP`            |
| Koreanisch (Südkorea)                | `ko-KR`            |
| Lettisch (Lettland)                  | `lv-LV`            |
| Litauisch (Litauen)                  | `lt-LT`            |
| Malay (Malaysia)                     | `ms-MY`            |
| Maltesisch (Malta)                   | `mt-MT`            |
| Norwegisch, Bokmål (Norwegen)        | `nb-NO`            |
| Polnisch (Polen)                     | `pl-PL`            |
| Portugiesisch (Brasilien)            | `pt-BR`            |
| Portugiesisch (Portugal)             | `pt-PT`            |
| Rumänisch (Rumänien)                 | `ro-RO`            |
| Slowakisch (Slowakei)                | `sk-SK`            |
| Slowenisch (Slowenien)               | `sl-SI`            |
| Spanisch (Argentinien)               | `es-AR`            |
| Spanisch (Brasilien)                 | `es-BR`            |
| Spanisch (Lateinamerika)             | `es-419`           |
| Spanisch (Mexiko)                    | `es-MX`            |
| Spanisch (Spanien)                   | `es-ES`            |
| Schwedisch (Schweden)                | `sv-SE`            |
| Thai (Thailand)                      | `th-TH`            |
| Türkisch (Türkiye)                   | `tr-TR`            |
| Vietnamesisch (Vietnam)              | `vi-VN`            |

## Umgang mit Fehlern beim Laden

Wenn eine Komponente nicht geladen werden kann, können Sie auf den Fehler reagieren, indem Sie einer eingebetteten Komponente einen Load Error Handler zur Verfügung stellen. Je nach Fehlerursache kann der Load Error Handler mehrfach aufgerufen werden. Jede Logik, die durch einen Load Error Handler ausgelöst wird, muss idempotent sein.

#### HTML + JS

```js
// Load errors are emitted by all components. We use Balances as an example here.
const balances = stripeConnectInstance.create('balances');
balances.setOnLoadError((loadError) => {
  const componentName = loadError.elementTagName
  const error = loadError.error

  console.log(componentName + " failed to load")
  console.log(`${error.type}: ${error.message}`);
});

container.appendChild(balances);

```

#### HTML + JS

| Methode          | Beschreibung                                                                    | Variablen                                                                                                                                                                                                                                                       |
| ---------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setOnLoadError` | Die Komponente führt diese Callback-Funktion aus, wenn ein Ladefehler auftritt. | - `loadError.error`: Siehe [das Ladefehler-Objekt](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)
  - `loadError.elementTagName`: Der Name des HTML-Tags, das zum Rendern der Komponente im Browser verwendet wird |

#### React

| React-Eigenschaft | Beschreibung                                                                    | Variablen                                                                                                                                                                                                                                                       |
| ----------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onLoadError`     | Die Komponente führt diese Callback-Funktion aus, wenn ein Ladefehler auftritt. | - `loadError.error`: Siehe [das Ladefehler-Objekt](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)
  - `loadError.elementTagName`: Der Name des HTML-Tags, das zum Rendern der Komponente im Browser verwendet wird |

#### Das Lade-`error`-Objekt

Jedes Mal, wenn ein Ladefehler auftritt, wird ein `error`-Objekt mit den folgenden Eigenschaften an den Ladefehler-Handler übergeben.

| Name      | Typ                                                                                                                       | Beispielwert                      |
| --------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `type`    | Siehe [Arten von Ladefehlern](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object) | `authentication_error`            | Art des Fehlers                  |
| `message` | Zeichenfolge | undefiniert                                                                                                | `Failed to fetch account session` | Weitere Erläuterungen zum Fehler |

#### Arten von Ladefehlern

Wenn eine Komponente nicht geladen werden kann, erkennen wir den Fehlertyp und ordnen ihn einem der folgenden Typen zu. Wenn der Fehlertyp nicht ermittelt werden kann, wird er als `api_error` markiert.

| Typ                            | Beschreibung                                                                                                                          |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| `api_connection_error`         | Verbindung zur API von Stripe fehlgeschlagen                                                                                          |
| `authentication_error`         | Fehler beim Ausführen des Authentifizierungsablaufs in den in Connect eingebetteten Komponenten                                       |
| `account_session_create_error` | Erstellung der Kontositzung fehlgeschlagen                                                                                            |
| `invalid_request_error`        | Anfrage fehlgeschlagen mit Statuscode 4xx, in der Regel verursacht durch Probleme mit der Plattformkonfiguration                      |
| `rate_limit_error`             | Anfrage fehlgeschlagen, da eine anormale Anfragerate festgestellt wurde                                                               |
| `render_error`                 | Das Problem, dass die Komponente nicht gerendert wird, wird in der Regel durch Browsererweiterungen oder Netzwerkprobleme verursacht. |
| `api_error`                    | API-Fehler, die alle anderen Arten von Problemen abdecken, z.&nbsp;B. ein vorübergehendes Problem mit den Stripe-Servern              |

#### Nutzeroberfläche für Ladefehler

In den meisten Fällen geben eingebettete Komponenten eine Fehlermeldung aus, wenn sie nicht geladen werden können, so dass Sie dies nicht tun müssen. Sie können einen Ladefehler-Handler für Analytics oder für andere Elemente Ihrer Website verwenden, die von einem Ladefehler betroffen sein könnten.

Eingebettete Komponenten geben jedoch keine Meldungen für Fehler aus, die vor dem Rückruf von [onLoaderStart](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#reacting-to-component-display) auftreten, da sie zu diesem Zeitpunkt noch keine Nutzeroberfläche angezeigt haben. In diesem Fall sollte Ihr Code die Fehler-Nutzeroberfläche anzeigen.

## Anzeige eingebetteter Komponenten erkennen

Nachdem eine Komponente erstellt wurde, wird auf Nutzerseite erst dann eine Nutzeroberfläche angezeigt, wenn das Javascript für die Komponente geladen und im Browser analysiert wurde. Dies kann dazu führen, dass Komponenten nach Abschluss des Ladevorgangs angezeigt werden. Um dies zu vermeiden, zeigen Sie Ihre eigene Ladenutzeroberfläche an, bevor die Komponente erstellt wird, und blenden die Nutzeroberfläche aus, nachdem die Komponente angezeigt wurde. Alle eingebetteten Komponenten können eine Rückruf-Funktion akzeptieren, die unmittelbar vor der Anzeige einer Nutzeroberfläche (einschließlich Ladeindikatoren) aufgerufen wird.

#### HTML + JS

```html

<span id="spinner"></span>
<div id="balances-container"></div>

```

```js
// Loader start events are emitted by all components. We use Balances as an example here.
const container = document.getElementById('balances-container');
const balances = stripeConnectInstance.create('balances');

balances.setOnLoaderStart((event) => {
  container.getElementById("spinner").style.display = "none";
  console.log(`${event.elementTagName} is visible to users`)
});

container.appendChild(balances);
```

#### HTML + JS

| Methode            | Beschreibung                                                                                                                                                    | Variablen                                                                                                  |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `setOnLoaderStart` | Die Komponente führt diese Callback-Funktion aus, wenn dem Nutzer/der Nutzerin eine beliebige Nutzeroberfläche (einschließlich Ladeindikatoren) angezeigt wird. | - `event.elementTagName`: Der Name des HTML-Tags, das zum Rendern der Komponente im Browser verwendet wird |

#### React

| React-Eigenschaft | Beschreibung                                                                                                                                                    | Variablen                                                                                                  |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `onLoaderStart`   | Die Komponente führt diese Callback-Funktion aus, wenn dem Nutzer/der Nutzerin eine beliebige Nutzeroberfläche (einschließlich Ladeindikatoren) angezeigt wird. | - `event.elementTagName`: Der Name des HTML-Tags, das zum Rendern der Komponente im Browser verwendet wird |

## Connect.js ohne npm verwenden

Wir empfehlen die Integration mit unseren [Javascript](https://github.com/stripe/connect-js)- und [React-Komponenten-Wrappern](https://github.com/stripe/react-connect-js), die das Laden der in Connect eingebetteten Komponenten vereinfachen und TypeScript-Definitionen für unsere unterstützten Schnittstellen bereitstellen. Wenn Ihr Build-System derzeit keine Abhängigkeiten von Paketen unterstützt, können Sie die Integration auch ohne diese Pakete durchführen.

Fügen Sie das Connect.js-Skript-Tag manuell zum `<head>` jeder Seite Ihrer Website hinzu.

```html
<!-- Somewhere in your site's <head> -->
<script src="https://connect-js.stripe.com/v1.0/connect.js" async></script>
```

After Connect.js completes loading, it initializes the global window variable `StripeConnect` and calls `StripeConnect.onLoad`, if defined. You can safely initialize Connect.js by setting up an `onload` function and calling `StripeConnect.init` with the same [Connect.js options](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) as `loadConnectAndInitialize`. You can use the Connect instance returned by `init` in the same way you use the instance returned by `loadConnectAndInitialize` to create embedded components in an [HTML + JS integration](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?client=js&platform=web#load-and-initialize-connectjs).

```javascript
window.StripeConnect = window.StripeConnect || {};
StripeConnect.onLoad = () => {
  const stripeConnectInstance = StripeConnect.init({
      // This is a placeholder - it should be replaced with your publishable API key.
      // Sign in to see your own test API key embedded in code samples.
      // Don't submit any personally identifiable information in requests made with this key.
      publishableKey: "<<YOUR_PUBLISHABLE_KEY>>",
      fetchClientSecret: fetchClientSecret,
    });

  const payments = stripeConnectInstance.create('payments');
  document.body.appendChild(payments);
};
```

## Nutzerauthentifizierung in eingebetteten Connect-Komponenten

Für eingebettete Connect-Komponenten ist in der Regel keine Nutzerauthentifizierung erforderlich. In einigen Fällen müssen sich die verbundenen Konten im Rahmen der eingebetteten Connect-Komponenten vor dem Zugriff auf die Komponente mit ihrem Stripe-Konto anmelden, um die erforderlichen Funktionen bereitzustellen (so müssen z.&nbsp;B. den juristischen Personen im Fall einer Komponente des [Konto-Onboardings](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) Informationen zugeschrieben werden). Andere Komponenten erfordern möglicherweise nach der ersten Anzeige eine Authentifizierung innerhalb der Komponente.

Eine Authentifizierung ist für verbundene Konten erforderlich, bei denen Stripe dafür verantwortlich ist, aktualisierte Informationen zu erfassen, wenn sich die Anforderungen ändern. Bei verbundenen Konten, bei denen Sie dafür verantwortlich sind, aktualisierte Informationen zu erfassen, wenn Anforderungen fällig sind oder sich ändern (wie z.&nbsp;B. Custom-Konten), wird die Stripe-Authentifizierung durch die [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication)-Kontositzungsfunktion gesteuert. Wir empfehlen die Implementierung von 2FA oder gleichwertigen Sicherheitsmaßnahmen als [Best Practice](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Bei Kontokonfigurationen, die diese Funktion unterstützen (wie z.&nbsp;B. Custom), übernehmen Sie die Haftung für verbundene Konten, wenn diese [Negativsalden](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability) nicht zurückzahlen können.

### Komponenten, die eine Authentifizierung erfordern

Bei der Authentifizierung wird ein Pop-up-Fenster in einem Stripe-Fenster angezeigt. Das verbundene Konto muss sich authentifizieren, bevor es seinen Workflow fortsetzen kann.

Die folgenden Komponenten erfordern die Authentifizierung verbundener Konten in bestimmten Szenarien:

- [Konto-Onboarding](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Kontoverwaltung](https://docs.stripe.com/connect/supported-embedded-components/account-management.md)
- [Salden](https://docs.stripe.com/connect/supported-embedded-components/balances.md)
- [Auszahlungen](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)
- [Benachrichtigungsbanner](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md)
- [Finanzkonto](https://docs.stripe.com/connect/supported-embedded-components/financial-account.md)
- [Liste von Issuing-Karten](https://docs.stripe.com/connect/supported-embedded-components/issuing-cards-list.md)

## Best Practices für die Leistung

Um die Ladezeit der in Connect eingebetteten Komponenten so gering wie möglich zu halten, befolgen Sie diese Empfehlungen:

- **Rufen Sie `loadConnectAndInitialize` so früh wie möglich in Ihrem Ablauf auf**.
- **Eine einzelne Connect-Instanz erstellen**: Erstellen Sie eine einzelne Connect-Instanz, indem Sie nur einmal pro Sitzung `loadConnectAndInitialize` aufrufen. Verwenden Sie diese Instanz dann wieder, um mehrere Komponenten zu erstellen und zu verwalten. Ein häufiger Fehler besteht darin, eine Connect-Instanz pro Komponente oder mehrere Connect-Instanzen pro Sitzung zu erstellen. Dies führt zu zusätzlichem Ressourcenverbrauch und API-Anfragen. Wenn Sie React verwenden, können Sie eine State Management Library oder einen React-Kontext verwenden, um diese Instanz zu verwalten.
- **Verwenden Sie die neueste Version der entsprechenden SDKs**: Verwenden Sie die neueste Version der [connect-js](https://www.npmjs.com/package/@stripe/connect-js) or [react-connect-js](https://www.npmjs.com/package/@stripe/react-connect-js) npm-Paket-SDKs. Diese SDKs initialisieren eingebettete Komponenten auf eine Weise, die die Leistung maximiert. Die SDKs wurden um Leistungsverbesserungen erweitert. Wir empfehlen daher ein Upgrade, wenn Sie eine ältere Version verwenden.
- **Laden Sie das `connect.js`-Skript so bald wie möglich in Ihren Ablauf**: Der frühestmögliche Zeitpunkt, an dem Sie das Skript laden können, besteht darin, dieses Skript in Ihren HTML-`head` einzubinden. Sie können auch das Standardverhalten unserer npm-Paket-SDKs verwenden, die es laden, wenn Ihre Seite zum ersten Mal mit Javascript geladen wird.

## StripeConnect einrichten [Clientseitig] [Serverseitig]

Stripe verwendet eine [AccountSession](https://docs.stripe.com/api/account_sessions.md), um Ihre Absicht zum Ausdruck zu bringen, den API -Zugriff auf Ihr verbundenes Konto zu delegieren.

Die AccountSessions API gibt ein *Client-Geheimnis* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) zurück, das es einer eingebetteten Komponente ermöglicht, so auf die Ressourcen eines verbundenen Kontos zuzugreifen. Dies geschieht so, als würden Sie die API-Aufrufe selbst ausführen.

### AccountSession erstellen (Server)

Ihre App muss eine Anfrage an Ihren Server initiieren, um die Konto-Sitzung zu erhalten. Sie können einen neuen Endpoint auf Ihrem Server erstellen, der das Client-Geheimnis an die App zurückgibt:

#### Ruby

```ruby
require 'sinatra'
require 'stripe'
# This is a placeholder - it should be replaced with your secret API key.
# Sign in to see your own test API key embedded in code samples.
# Don’t submit any personally identifiable information in requests made with this key.
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = Stripe::AccountSession.create({
      account: {{CONNECTED_ACCOUNT_ID}},
      components: {
        account_onboarding: {
          enabled: true,
          features: {
            # We recommend disabling authentication for a better user experience when possible
            disable_stripe_user_authentication: true,
          }
        }
      }
    })

    {
      client_secret: account_session[:client_secret]
    }.to_json
  rescue => error
    puts "An error occurred when calling the Stripe API to create an account session: #{error.message}";
    return [500, { error: error.message }.to_json]
  end
end
```

### API-Kontositzung erstellen

Die [Create Account Session API](https://docs.stripe.com/api/account_sessions/create.md) bestimmt den Zugriff auf Komponenten und Funktionen für eingebettete Connect-Komponenten. Stripe erzwingt diese Parameter für alle Komponenten, die der Konto-Sitzung entsprechen. Wenn Ihre App mehrere Nutzerrollen unterstützt, stellen Sie sicher, dass Komponenten und Funktionen, die für diese Konto-Sitzung aktiviert sind, der aktuellen Nutzerrolle entsprechen. Sie können beispielsweise die [Verwaltung von Rückerstattungen](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) nur für Administrator/innen Ihrer Website aktivieren, nicht aber für andere Nutzer/innen. Um sicherzustellen, dass der Nutzerrollenzugriff erzwungen wird, müssen Sie die Nutzerrolle Ihrer Website den Komponenten der Konto-Sitzung zuordnen.

### StripeConnect SDK installieren (Client)

Das [Stripe iOS SDK](https://github.com/stripe/stripe-ios) ist Open Source, [vollständig dokumentiert](https://stripe.dev/stripe-ios/index.html) und kompatibel mit Apps, die iOS 15 oder höher unterstützen.

#### Swift Package Manager

Führen Sie zur Installation des SDK die folgenden Schritte aus:

1. Wählen Sie in Xcode **Datei** > **Add Package Dependencies** (Paketabhängigkeiten hinzufügen) aus und geben Sie als Repository-URL `https://github.com/stripe/stripe-ios-spm` ein.
1. Wählen auf unserer [Veröffentlichungsseite](https://github.com/stripe/stripe-ios/releases) die neueste Version aus.
1. Fügen Sie das Produkt **StripeConnect** zum [Ziel Ihrer App](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app) hinzu.

#### CocoaPods

1. Falls noch nicht geschehen, installieren Sie bitte die aktuellste Version von [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Wenn Sie keine bestehende [Podfile](https://guides.cocoapods.org/syntax/podfile.html) haben, führen Sie folgenden Befehl aus, um eine zu erstellen:
   ```bash
   pod init
   ```
1. Fügen Sie folgende Zeile in Ihre `Podfile` ein:
   ```podfile
   pod 'StripeConnect'
   ```
1. Führen Sie folgenden Befehl aus:
   ```bash
   pod install
   ```
1. Vergessen Sie nicht, ab jetzt in Zukunft anstelle der Datei `.xcodeproj` die Datei `.xcworkspace` zum Öffnen Ihres Projekts in Xcode zu verwenden.
1. Führen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK Folgendes aus:
   ```bash
   pod update StripeConnect
   ```

#### Carthage

1. Falls noch nicht geschehen, installieren Sie bitte die aktuelle Version von [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Fügen Sie folgende Zeile in Ihre `Cartfile` ein:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Befolgen Sie die [Carthage-Installationsanweisungen](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Vergewissern Sie sich, dass Sie alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripeConnect#manual-linking) aufgeführten erforderlichen Frameworks einbetten.
1. Führen Sie für zukünftige Updates auf die aktuelle Version unseres SDK einfach folgenden Befehl aus:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Manuelles Framework

1. Gehen Sie auf unsere [GitHub-Release-Seite](https://github.com/stripe/stripe-ios/releases/latest), laden Sie **Stripe.xcframework.zip** herunter und entpacken Sie die Datei.
1. Ziehen Sie **StripeConnect.xcframework** in den Abschnitt **Embedded Binaries** (Eingebettete Binärdateien) der Einstellungen unter **General** (Allgemeines) Ihres Xcode-Projekts. Aktivieren Sie dabei die Option **Copy items if needed** (Elemente kopieren, falls nötig).
1. Wiederholen Sie Schritt 2 für alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripeConnect#manual-linking) aufgeführten erforderlichen Frameworks.
1. Wiederholen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK die Schritte 1–3.

> Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-ios/releases) auf GitHub. Um bei Veröffentlichung einer neuen Version eine Benachrichtigung zu erhalten, [achten Sie auf die Releases zum jeweiligen Repository](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository).

### Kamerazugriff einrichten (Client-side)

Das Stripe-Connect iOS-SDK erfordert Zugriff auf die Kamera des Geräts, um Identitätsdokumente zu erfassen. So aktivieren Sie Ihre App, um Zugriffsberechtigungen für die Kamera anzufordern:

1. Öffnen Sie die Datei **Info.plist** Ihres Projekts in Xcode.
1. Fügen Sie den Schlüssel `NSCameraUsageDescription` hinzu.
1. Fügen Sie einen Zeichenfolgenwert hinzu, der Ihren Nutzern/Nutzerinnen den Grund für den erforderlichen Kamerazugriff erläutert. Beispiel:

> Diese App verwendet Ihre Kamera, um ein Foto von Ihren Identitätsnachweisen zu machen.

Weitere Informationen zum Anfordern des Kamerazugriffs finden Sie in der [Dokumentation von Apple](https://developer.apple.com/documentation/avfoundation/cameras_and_media_capture/requesting_authorization_for_media_capture_on_ios).

### EmbeddedComponentManager initialisieren (Client)

Legen Sie Ihren veröffentlichbaren Schlüssel mit `StripeAPI.shared` fest und instanziieren Sie einen [EmbeddedComponentManager](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager) mit einer Schließung, die ein Client-Geheimnis durch Aufrufen des auf Ihrem Server erstellten neuen Endpoints abruft. Um eine Komponente zu erstellen, rufen Sie die entsprechende Create-Methode des `EmbeddedComponentManager` auf, den Sie oben instanziiert haben.

[Konto-Onboarding](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) gibt einen Controller zurück, der seine eigene Präsentation verwaltet. Andere Komponenten, wie z.&nbsp;B. [Payments](https://docs.stripe.com/connect/supported-embedded-components/payments.md) gibt einen [UIViewController](https://developer.apple.com/documentation/uikit/uiviewcontroller) zurück, den Sie mit mehr Flexibilität in Ihrer App anzeigen können.

#### UIKit

```swift
import StripeConnect
import UIKit

class MyViewController: UIViewController {
    let errorView: UIView

    func fetchClientSecret() async -> String? {
        let url = URL(string: "https://{{YOUR_SERVER}}/account_session")!

        var request = URLRequest(url: url)
        request.httpMethod = "POST"

        do {
            // Fetch the AccountSession client secret
            let (data, _) = try await URLSession.shared.data(for: request)
            let json = try JSONSerialization.jsonObject(with: data) as? [String : Any]

            errorView.isHidden = true

            return json?["client_secret"] as? String
        } catch let error {
            // Handle errors on the client side here
            print("An error occurred: \(error)")
            errorView.isHidden = false
            return nil
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // This is your test publishable API key.
        STPAPIClient.shared.publishableKey =  "{{PUBLISHABLE_KEY}}",
        let embeddedComponentManager = EmbeddedComponentManager(
            fetchClientSecret: fetchClientSecret
        )

        // Account onboarding presents modally and fullscreen 
        let controller = embeddedComponentManager.createAccountOnboardingController()
        controller.title = "Onboard with Stripe"
        controller.present(from: self)

        // All other components can be flexibly presented
        let paymentsViewController = embeddedComponentManager.createPaymentsViewController()
        present(paymentsViewController)
    }
}
```

## Configure the Embedded Component Manager [Clientseitig]

[Siehe die Referenzdokumentation :external:](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/init\(apiClient:appearance:fonts:fetchClientSecret:\)).

### Erscheinungsbild der in Connect eingebetteten Komponenten anpassen

Das [Figma UI-Toolkit für eingebettete Komponenten](https://www.figma.com/community/file/1438614134095442934) enthält alle Komponenten, gängige Muster und eine Beispielanwendung. Sie können es verwenden, um eingebettete Nutzeroberflächen auf Ihrer Website zu visualisieren und zu gestalten.

Wir bieten eine [Reihe von Optionen](https://docs.stripe.com/connect/embedded-appearance-options.md), um das Erscheinungsbild von in Connect eingebetteten Komponenten anzupassen. Diese Anpassungen betreffen Schaltflächen, Symbole und andere Akzentuierungen in unserem Designsystem.

> #### Notwendige Popups
> 
> Einige Verhaltensweisen in eingebetteten Komponenten, wie z.&nbsp;B. die [Nutzerauthentifizierung](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), müssen in einer authentifizierten WebView dargestellt werden. Sie können die eingebettete Komponente nicht anpassen, um solche Webansichten zu eliminieren.

Sie können diese Optionen mit[EmbeddedComponentManager.Appearance](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/appearance) bei der Initialisierung `EmbeddedComponentManager` festlegen.

```swift
func fetchClientSecret() async -> String? {
    let url = URL(string: "https://{{YOUR_SERVER}}/account_session")!

    var request = URLRequest(url: url)
    request.httpMethod = "POST"

    do {
        let (data, _) = try await URLSession.shared.data(for: request)
        let json = try JSONSerialization.jsonObject(with: data) as? [String : Any]

        return json?["client_secret"] as? String
    } catch {
        return nil
    }
}

// Specify custom fonts
var customFonts: [CustomFontSource] = []
let myFont = UIFont(name: "My Font", size: 16)!
let fontUrl = Bundle.main.url(forResource: "my-font-2", withExtension: "woff")!
do {
    let customFontSource = try CustomFontSource(font: myFont, fileUrl: fontUrl)
    customFonts.append(customFontSource)
} catch {
    print("Error loading custom font: \(error)")
}

// Customize appearance
var appearance = EmbeddedComponentManager.Appearance()
appearance.typography.font.base = myFont
appearance.typography.fontSizeBase = 16 // Unscaled font size
appearance.colors.primary = UIColor { traitCollection in
    if traitCollection.userInterfaceStyle == .dark {
        return UIColor(red: 0.455, green: 0.424, blue: 1.000, alpha: 1.0)
    } else {
        return UIColor(red: 0.404, green: 0.365, blue: 1.000, alpha: 1.0)
    }
}

STPAPIClient.shared.publishableKey =  "{{PUBLISHABLE_KEY}}",
let embeddedComponentManager = EmbeddedComponentManager(
    appearance: appearance,
    fonts: customFonts,
    fetchClientSecret: fetchClientSecret
)
```

Darstellungsfarben, die [dynamische Anbieter](https://developer.apple.com/documentation/uikit/uicolor/3238041-init) verwenden, werden automatisch auf die in Connect eingebettete Komponente angewendet, wenn deren [UITraitCollection](https://developer.apple.com/documentation/uikit/uitraitcollection) aktualisiert wird, einschließlich [Dunkelmodus](https://developer.apple.com/design/human-interface-guidelines/dark-mode) und [Kontrast für Barrierefreiheit](https://developer.apple.com/documentation/uikit/uiaccessibilitycontrast). Das Standarderscheinungsbild enthält keine Farben im Dunkelmodus, daher müssen Sie im `EmbeddedComponentManager` ein Erscheinungsbild mit dynamischen Farben angeben, um den Dunkelmodus in Ihrer App zu unterstützen.

Verwenden Sie beim Angeben von Schriftgrößen die nicht skalierte Schriftgröße, die für die Standardgrößenklasse des Geräts angezeigt wird. Die eingebettete Komponente skaliert die Schriftgröße automatisch basierend auf ihrer [UITraitCollection](https://developer.apple.com/documentation/uikit/uitraitcollection).

 Sehen Sie sich die [vollständige Liste der Darstellungsoptionen](https://docs.stripe.com/connect/embedded-appearance-options.md) unter iOS an.

### Nutzerdefinierte Schriftarten verwenden

Wenn Sie nutzerdefinierte Schriftarten in Ihrer App verwenden (zum Beispiel von `.otf`- oder `.tff`-Dateien, die in Ihre App eingebettet sind), müssen Sie die Schriftartdateien in einer [CustomFontSource](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource) spezifizieren, die an das Argument `fonts` übergeben wird, wenn `EmbeddedComponentManager` initialisiert wird. Dadurch erhalten die in Connect eingebetteten Komponenten Zugriff auf die Schriftartdateien, um die Schriftarten korrekt darzustellen.

Schriftarten, die unter `Erscheinungsbild` angegeben werden, müssen entweder eine [unterstützte Systemschriftart](https://developer.apple.com/fonts/system-fonts/) oder eine [CustomFontSource](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource) verwenden, die bei der Initialisierung an den `EmbeddedComponentManager` übergeben wird, um ordnungsgemäß dargestellt zu werden.

[Siehe die Referenzdokumentation :external:](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource).

### In Connect eingebettete Komponenten nach der Initialisierung aktualisieren

Rufen Sie die `update`-Methode auf, um das Erscheinungsbild der eingebetteten Komponenten nach der Initialisierung zu ändern:

```swift
var appearance = EmbeddedComponentManager.Appearance()
appearance.colors.primary = UIColor.red

manager.update(appearance: appearance)
```

## Authentifizierung

Wir bieten eine Reihe von APIs zur Verwaltung von Kontositzungen und Nutzeranmeldedaten in den in Connect eingebetteten Komponenten.

### Client-Geheimnis aktualisieren

Bei Sitzungen mit langer Laufzeit kann die Sitzung aus dem ursprünglich angegebenen *Client-Geheimnis* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) ablaufen. Wenn sie abläuft, verwenden wir automatisch `fetchClientSecret`, um ein neues Client-Geheimnis abzurufen und die Sitzung zu aktualisieren. Sie müssen keine zusätzlichen Parameter übergeben.

```swift
func fetchClientSecret() async -> String? {
    var request = URLRequest(url: URL(string: "https://{{YOUR_SERVER}}/account_session")!)
    request.httpMethod = "POST"

    do {
        let (data, _) = try await URLSession.shared.data(for: request)
        let json = try JSONSerialization.jsonObject(with: data) as? [String : Any]
        return json?["client_secret"] as? String
    } catch let error {
        return nil
    }
}

STPAPIClient.shared.publishableKey =  "{{PUBLISHABLE_KEY}}",
let embeddedComponentManager = EmbeddedComponentManager(
    fetchClientSecret: fetchClientSecret
)
```

## Lokalisierung

Eingebettete Connect-Komponenten unterstützen die folgenden Gebietsschemen:

| Sprache                              | Gebietsschema-Code |
| ------------------------------------ | ------------------ |
| Bulgarisch (Bulgarien)               | `bg-BG`            |
| Chinesisch (Vereinfacht)             | `zh-Hans`          |
| Chinesisch (Traditionell – Hongkong) | `zh-Hant-HK`       |
| Chinesisch (Traditionell – Taiwan)   | `zh-Hant-TW`       |
| Kroatisch (Kroatien)                 | `hr-HR`            |
| Tschechisch (Tschechien)             | `cs-CZ`            |
| Dänisch (Dänemark)                   | `da-DK`            |
| Niederländisch (Niederlande)         | `nl-NL`            |
| Englisch (Australien)                | `en-AU`            |
| Englisch (Indien)                    | `en-IN`            |
| Englisch (Irland)                    | `en-IE`            |
| Englisch (Neuseeland)                | `en-NZ`            |
| Englisch (Singapur)                  | `en-SG`            |
| Englisch (Vereinigtes Königreich)    | `en-GB`            |
| Englisch (USA)                       | `en-US`            |
| Estnisch (Estland)                   | `et-EE`            |
| Philippinisch (Philippinen)          | `fil-PH`           |
| Finnisch (Finnland)                  | `fi-FI`            |
| Französisch (Kanada)                 | `fr-CA`            |
| Französisch (Frankreich)             | `fr-FR`            |
| Deutsch (Deutschland)                | `de-DE`            |
| Griechisch (Griechenland)            | `el-GR`            |
| Ungarisch (Ungarn)                   | `hu-HU`            |
| Indonesisch (Indonesien)             | `id-ID`            |
| Italienisch (Italien)                | `it-IT`            |
| Japanisch (Japan)                    | `ja-JP`            |
| Koreanisch (Südkorea)                | `ko-KR`            |
| Lettisch (Lettland)                  | `lv-LV`            |
| Litauisch (Litauen)                  | `lt-LT`            |
| Malay (Malaysia)                     | `ms-MY`            |
| Maltesisch (Malta)                   | `mt-MT`            |
| Norwegisch, Bokmål (Norwegen)        | `nb-NO`            |
| Polnisch (Polen)                     | `pl-PL`            |
| Portugiesisch (Brasilien)            | `pt-BR`            |
| Portugiesisch (Portugal)             | `pt-PT`            |
| Rumänisch (Rumänien)                 | `ro-RO`            |
| Slowakisch (Slowakei)                | `sk-SK`            |
| Slowenisch (Slowenien)               | `sl-SI`            |
| Spanisch (Argentinien)               | `es-AR`            |
| Spanisch (Brasilien)                 | `es-BR`            |
| Spanisch (Lateinamerika)             | `es-419`           |
| Spanisch (Mexiko)                    | `es-MX`            |
| Spanisch (Spanien)                   | `es-ES`            |
| Schwedisch (Schweden)                | `sv-SE`            |
| Thai (Thailand)                      | `th-TH`            |
| Türkisch (Türkiye)                   | `tr-TR`            |
| Vietnamesisch (Vietnam)              | `vi-VN`            |

## Nutzerauthentifizierung in eingebetteten Connect-Komponenten

Für eingebettete Connect-Komponenten ist in der Regel keine Nutzerauthentifizierung erforderlich. In einigen Fällen müssen sich die verbundenen Konten im Rahmen der eingebetteten Connect-Komponenten vor dem Zugriff auf die Komponente mit ihrem Stripe-Konto anmelden, um die erforderlichen Funktionen bereitzustellen (so müssen z.&nbsp;B. den juristischen Personen im Fall einer Komponente des [Konto-Onboardings](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) Informationen zugeschrieben werden). Andere Komponenten erfordern möglicherweise nach der ersten Anzeige eine Authentifizierung innerhalb der Komponente.

Eine Authentifizierung ist für verbundene Konten erforderlich, bei denen Stripe dafür verantwortlich ist, aktualisierte Informationen zu erfassen, wenn sich die Anforderungen ändern. Bei verbundenen Konten, bei denen Sie dafür verantwortlich sind, aktualisierte Informationen zu erfassen, wenn Anforderungen fällig sind oder sich ändern (wie z.&nbsp;B. Custom-Konten), wird die Stripe-Authentifizierung durch die [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication)-Kontositzungsfunktion gesteuert. Wir empfehlen die Implementierung von 2FA oder gleichwertigen Sicherheitsmaßnahmen als [Best Practice](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Bei Kontokonfigurationen, die diese Funktion unterstützen (wie z.&nbsp;B. Custom), übernehmen Sie die Haftung für verbundene Konten, wenn diese [Negativsalden](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability) nicht zurückzahlen können.

### Komponenten, die eine Authentifizierung erfordern

Verbundenen Konten wird eine authentifizierte [WebView](https://developer.apple.com/documentation/authenticationservices/aswebauthenticationsession) innerhalb Ihrer Anwendung angezeigt. Das verbundene Konto muss authentifiziert werden, bevor der/die Nutzer seinen/ihren Workflow innerhalb der WebView fortsetzen kann.

Der von Stripe gehostete Authentifizierungsablauf zeigt den Namen, die Farbe und das Symbol Ihrer Marke an, wie in Ihren [Connect-Einstellungen](https://dashboard.stripe.com/account/applications/settings) festgelegt. Das individuelle Erscheinungsbild und die Schriftarten aus dem [Embedded Component Manager](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) werden erst nach Abschluss der Authentifizierung verwendet.

Die folgende Komponente erfordert die Authentifizierung verbundener Konten in bestimmten Szenarien:

- [Konto-Onboarding](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Auszahlungen](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Umgang mit Fehlern beim Laden [Clientseitig]

Reagieren Sie auf Fehler beim Laden der Komponente, indem Sie die Listener-Methode `onLoadError` der Komponente implementieren.

Verschiedene Fehlerursachen können die `onLoadError`-Methode mehrmals aufrufen, daher muss jede durch den `onLoadError` ausgelöste Logik idempotent sein.

#### Swift

```swift
// All components emit load errors. This example uses AccountOnboarding.
// All components support didFailLoadWithError.
class MyViewController: UIViewController, AccountOnboardingControllerDelegate {
    func openAccountOnboarding() {
        let accountOnboardingController = embeddedComponentManager.createAccountOnboardingController();
        accountOnboardingController.delegate = self
        accountOnboardingController.present(from: self)
    }

    // MARK: - AccountOnboardingControllerDelegate
    func accountOnboarding(_ accountOnboarding: AccountOnboardingController, didFailLoadWithError error: Error) {
        print("Account onboarding failed to load with error '\(error)'")
    }
}
```

## StripeConnect einrichten [Clientseitig] [Serverseitig]

Stripe verwendet eine [AccountSession](https://docs.stripe.com/api/account_sessions.md), um Ihre Absicht zum Ausdruck zu bringen, den API -Zugriff auf Ihr verbundenes Konto zu delegieren.

Die AccountSessions API gibt ein *Client-Geheimnis* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) zurück, das es einer eingebetteten Komponente ermöglicht, so auf die Ressourcen eines verbundenen Kontos zuzugreifen. Dies geschieht so, als würden Sie die API-Aufrufe selbst ausführen.

### AccountSession erstellen (Server)

Ihre App muss eine Anfrage an Ihren Server initiieren, um die Konto-Sitzung zu erhalten. Sie können einen neuen Endpoint auf Ihrem Server erstellen, der das Client-Geheimnis an die App zurückgibt:

#### Ruby

```ruby
require 'sinatra'
require 'stripe'
# This is a placeholder - it should be replaced with your secret API key.
# Sign in to see your own test API key embedded in code samples.
# Don’t submit any personally identifiable information in requests made with this key.
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = Stripe::AccountSession.create({
      account: {{CONNECTED_ACCOUNT_ID}},
      components: {
        account_onboarding: {
          enabled: true,
          features: {
            # We recommend disabling authentication for a better user experience when possible
            disable_stripe_user_authentication: true,
          }
        }
      }
    })

    {
      client_secret: account_session[:client_secret]
    }.to_json
  rescue => error
    puts "An error occurred when calling the Stripe API to create an account session: #{error.message}";
    return [500, { error: error.message }.to_json]
  end
end
```

### API-Kontositzung erstellen

Die [Create Account Session API](https://docs.stripe.com/api/account_sessions/create.md) bestimmt den Zugriff auf Komponenten und Funktionen für eingebettete Connect-Komponenten. Stripe erzwingt diese Parameter für alle Komponenten, die der Konto-Sitzung entsprechen. Wenn Ihre App mehrere Nutzerrollen unterstützt, stellen Sie sicher, dass Komponenten und Funktionen, die für diese Konto-Sitzung aktiviert sind, der aktuellen Nutzerrolle entsprechen. Sie können beispielsweise die [Verwaltung von Rückerstattungen](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) nur für Administrator/innen Ihrer Website aktivieren, nicht aber für andere Nutzer/innen. Um sicherzustellen, dass der Nutzerrollenzugriff erzwungen wird, müssen Sie die Nutzerrolle Ihrer Website den Komponenten der Konto-Sitzung zuordnen.

### StripeConnect SDK installieren (Client)

Das [Stripe Android SDK](https://github.com/stripe/stripe-android) ist Open Source und [vollständig dokumentiert](https://stripe.dev/stripe-android/).

Um das SDK zu installieren, fügen Sie `connect` in den Block `dependencies` Ihrer [app/build.gradle](https://developer.android.com/studio/build/dependencies)-Datei ein:

#### Kotlin

```kotlin
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Connect Android SDK
  implementation("com.stripe:connect:23.0.2")
}
```

> Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-android/releases) auf GitHub. Um bei Veröffentlichung eines neuen Release eine Benachrichtigung zu erhalten, [beobachten Sie Veröffentlichungen für das jeweilige Repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

### EmbeddedComponentManager initialisieren (Client)

Instanziieren Sie einen [EmbeddedComponentManager](https://stripe.dev/stripe-android/connect/com.stripe.android.connect/-embedded-component-manager/index.html) mit Ihrem veröffentlichbaren Schlüssel und einem Lambda, der ein Client-Geheimnis durch Aufrufen des neuen Endpoints abruft, den Sie auf Ihrem Server erstellt haben. Um Konfigurationsänderungen zu verarbeiten, behalten Sie die `EmbeddedComponentManager`-Instanz in einer Aktivität oder einem Fragment `ViewModel`.

#### Kotlin

```kotlin
class MyActivityViewModel : ViewModel() {
    val embeddedComponentManager: EmbeddedComponentManager =
        EmbeddedComponentManager(
            // This is a placeholder - it should be replaced with your publishable API key.
            // Sign in to see your own test API key embedded in code samples.
            // Don't submit any personally identifiable information in requests made with this key.
            publishableKey = "<<YOUR_PUBLISHABLE_KEY>>",
            fetchClientSecret = ::fetchClientSecret,
        )

    private suspend fun fetchClientSecret(): String? =
        try {
            // Fetch the AccountSession client secret
            Fuel.post("https://{{YOUR_SERVER_BASE_URL}}/account_session")
                .awaitString()
                .let { JSONObject(it).getString("client_secret") }
        } catch (error: CancellationException) {
            throw error
        } catch (error: Exception) {
            // Handle errors on the client side here
            println("Error fetching client secret: ${error.message}")
            null
        }
}
```

Um eine Komponente zu erstellen, rufen Sie zunächst `EmbeddedComponentManager.onActivityCreate()` in der Methode `onCreate` Ihrer Activity auf. Rufen Sie dann die entsprechende Erstellungsmethode des `EmbeddedComponentManager` auf, den Sie oben instanziiert haben.

[Konto-Onboarding](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) gibt einen Controller zurück, der seine eigene Präsentation verwaltet. Andere Komponenten, wie z.&nbsp;B. [Payments](https://docs.stripe.com/connect/supported-embedded-components/payments.md) gibt eine [Ansicht](https://developer.android.com/reference/android/view/View) zurück, die Sie mit mehr Flexibilität in Ihrer App anzeigen können.

#### Rendering eines Controllers

#### Kotlin

```kotlin
class MyActivity : FragmentActivity() {
    private val viewModel: MyActivityViewModel by viewModels()
    private lateinit var accountOnboardingController: AccountOnboardingController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        EmbeddedComponentManager.onActivityCreate(this)
        setContentView(R.layout.my_activity)

        accountOnboardingController =
            viewModel.embeddedComponentManager.createAccountOnboardingController(this)
    }

    private fun openAccountOnboarding() {
        accountOnboardingController.show()
    }
}
```

#### Rendering eines `View`

#### Kotlin

```kotlin
class MyActivity : FragmentActivity() {
    private val viewModel: MyActivityViewModel by viewModels()
    private lateinit var paymentsView: View

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        EmbeddedComponentManager.onActivityCreate(this)
        setContentView(R.layout.my_activity)

        paymentsView = viewModel.embeddedComponentManager.createPaymentsView(this)

        // Add the view to your layout
        val container = findViewById<ViewGroup>(R.id.payments_container)
        container.addView(paymentsView)
    }
}
```

## Configure the Embedded Component Manager [Clientseitig]

[Siehe die Referenzdokumentation :external:](https://stripe.dev/stripe-android/connect/com.stripe.android.connect/-embedded-component-manager/index.html).

### Erscheinungsbild der in Connect eingebetteten Komponenten anpassen

Das [Figma UI-Toolkit für eingebettete Komponenten](https://www.figma.com/community/file/1438614134095442934) enthält alle Komponenten, gängige Muster und eine Beispielanwendung. Sie können es verwenden, um eingebettete Nutzeroberflächen auf Ihrer Website zu visualisieren und zu gestalten.

Wir bieten eine [Reihe von Optionen](https://docs.stripe.com/connect/embedded-appearance-options.md), um das Erscheinungsbild von in Connect eingebetteten Komponenten anzupassen. Diese Anpassungen betreffen Schaltflächen, Symbole und andere Akzentuierungen in unserem Designsystem.

> #### Notwendige Popups
> 
> Einige Verhaltensweisen in eingebetteten Komponenten, wie z.&nbsp;B. die [Nutzerauthentifizierung](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), müssen in einer authentifizierten WebView dargestellt werden. Sie können die eingebettete Komponente nicht anpassen, um solche Webansichten zu eliminieren.

Sie können diese Optionen mithilfe von [Appearance](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance/-appearance/index.html) festlegen, wenn Sie `EmbeddedComponentManager` initialisieren.

#### Kotlin

```kotlin
// Specify custom fonts
val customFonts = listOf(
    CustomFontSource(
        // Font file located in `assets/` folder
        assetsFilePath = "fonts/myCustomFont.ttf",
        name = "myCustomFont",
        weight = 1000,
    )
)

// Customize appearance
val appearance = Appearance.Builder()
    .typography(
        Typography.Builder()
            .fontFamily("myCustomFont") // Same name as the custom font above
            .fontSizeBase(16f) // Unscaled font size
            .build()
    )
    .colors(
        Colors.Builder()
            .primary(Color.RED)
            .build()
    )
    .build()

val embeddedComponentManager = EmbeddedComponentManager(
    publishableKey = "<<YOUR_PUBLISHABLE_KEY>>",
    fetchClientSecret = ::fetchClientSecret,
    appearance = appearance,
    customFonts = customFonts,
)
```

Verwenden Sie beim Angeben von Schriftgrößen die nicht skalierte Schriftgröße, die für die Standardgrößenklasse des Geräts angezeigt wird. Die eingebettete Komponente skaliert die Schriftgröße automatisch basierend auf den [Einstellungen für Barrierefreiheit](https://support.google.com/accessibility/android/answer/11183305?sjid=3094445894544346025-NA#fontsize) der Nutzer/innen.

 Siehe die [vollständige Liste der Erscheinungsbildoptionen](https://docs.stripe.com/connect/embedded-appearance-options.md?platform=android) auf Android.

### Nutzerdefinierte Schriftarten verwenden

Wenn Sie in Ihrer App nutzerdefinierte Schriftarten verwenden (z. B. aus `.otf`- oder `.tff`-Dateien, die in Ihre App-Binärdatei eingebettet sind), müssen Sie die Schriftartdateien in einer [CustomFontSource](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html) angeben, die bei der Initialisierung von `EmbeddedComponentManager` an das Argument `customFonts` übergeben wird. Dadurch erhalten die in Connect eingebetteten Komponenten Zugriff auf die Schriftdateien, um die Schriftarten ordnungsgemäß zu rendern.

Die in `appearance` angegebenen Schriftarten müssen eine [CustomFontSource](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html) verwenden, die bei der Initialisierung an den `EmbeddedComponentManager` übergeben wird, damit sie ordnungsgemäß gerendert werden.

[Siehe Referenzdokumentation :external:](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html).

### In Connect eingebettete Komponenten nach der Initialisierung aktualisieren

Rufen Sie die `update`-Methode auf, um das Erscheinungsbild der eingebetteten Komponenten nach der Initialisierung zu ändern:

#### Kotlin

```kotlin
val appearance = Appearance.Builder()
    .colors(
        Colors.Builder()
            .primary(ContextCompat.getColor(context, R.color.primary))
            .build()
    )
    .build()
embeddedComponentManager.update(appearance = appearance)
```

## Authentifizierung

Wir bieten eine Reihe von APIs zur Verwaltung von Kontositzungen und Nutzeranmeldedaten in den in Connect eingebetteten Komponenten.

### Client-Geheimnis aktualisieren

Bei Sitzungen mit langer Laufzeit kann die Sitzung aus dem ursprünglich angegebenen *Client-Geheimnis* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) ablaufen. Wenn sie abläuft, verwenden wir automatisch `fetchClientSecret`, um ein neues Client-Geheimnis abzurufen und die Sitzung zu aktualisieren. Sie müssen keine zusätzlichen Parameter übergeben.

#### Kotlin

```kotlin
val embeddedComponentManager: EmbeddedComponentManager =
    EmbeddedComponentManager(
        publishableKey = "<<YOUR_PUBLISHABLE_KEY>>",
        fetchClientSecret = ::fetchClientSecret,
    )

private suspend fun fetchClientSecret(): String? =
    try {
        Fuel.post("https://{{YOUR_SERVER_BASE_URL}}/account_session")
            .awaitString()
            .let { JSONObject(it).getString("client_secret") }
    } catch (error: CancellationException) {
        throw error
    } catch (error: Exception) {
        null
    }
```

## Lokalisierung

Eingebettete Connect-Komponenten unterstützen die folgenden Gebietsschemen:

| Sprache                              | Gebietsschema-Code |
| ------------------------------------ | ------------------ |
| Bulgarisch (Bulgarien)               | `bg-BG`            |
| Chinesisch (Vereinfacht)             | `zh-Hans`          |
| Chinesisch (Traditionell – Hongkong) | `zh-Hant-HK`       |
| Chinesisch (Traditionell – Taiwan)   | `zh-Hant-TW`       |
| Kroatisch (Kroatien)                 | `hr-HR`            |
| Tschechisch (Tschechien)             | `cs-CZ`            |
| Dänisch (Dänemark)                   | `da-DK`            |
| Niederländisch (Niederlande)         | `nl-NL`            |
| Englisch (Australien)                | `en-AU`            |
| Englisch (Indien)                    | `en-IN`            |
| Englisch (Irland)                    | `en-IE`            |
| Englisch (Neuseeland)                | `en-NZ`            |
| Englisch (Singapur)                  | `en-SG`            |
| Englisch (Vereinigtes Königreich)    | `en-GB`            |
| Englisch (USA)                       | `en-US`            |
| Estnisch (Estland)                   | `et-EE`            |
| Philippinisch (Philippinen)          | `fil-PH`           |
| Finnisch (Finnland)                  | `fi-FI`            |
| Französisch (Kanada)                 | `fr-CA`            |
| Französisch (Frankreich)             | `fr-FR`            |
| Deutsch (Deutschland)                | `de-DE`            |
| Griechisch (Griechenland)            | `el-GR`            |
| Ungarisch (Ungarn)                   | `hu-HU`            |
| Indonesisch (Indonesien)             | `id-ID`            |
| Italienisch (Italien)                | `it-IT`            |
| Japanisch (Japan)                    | `ja-JP`            |
| Koreanisch (Südkorea)                | `ko-KR`            |
| Lettisch (Lettland)                  | `lv-LV`            |
| Litauisch (Litauen)                  | `lt-LT`            |
| Malay (Malaysia)                     | `ms-MY`            |
| Maltesisch (Malta)                   | `mt-MT`            |
| Norwegisch, Bokmål (Norwegen)        | `nb-NO`            |
| Polnisch (Polen)                     | `pl-PL`            |
| Portugiesisch (Brasilien)            | `pt-BR`            |
| Portugiesisch (Portugal)             | `pt-PT`            |
| Rumänisch (Rumänien)                 | `ro-RO`            |
| Slowakisch (Slowakei)                | `sk-SK`            |
| Slowenisch (Slowenien)               | `sl-SI`            |
| Spanisch (Argentinien)               | `es-AR`            |
| Spanisch (Brasilien)                 | `es-BR`            |
| Spanisch (Lateinamerika)             | `es-419`           |
| Spanisch (Mexiko)                    | `es-MX`            |
| Spanisch (Spanien)                   | `es-ES`            |
| Schwedisch (Schweden)                | `sv-SE`            |
| Thai (Thailand)                      | `th-TH`            |
| Türkisch (Türkiye)                   | `tr-TR`            |
| Vietnamesisch (Vietnam)              | `vi-VN`            |

## Nutzerauthentifizierung in eingebetteten Connect-Komponenten

Für eingebettete Connect-Komponenten ist in der Regel keine Nutzerauthentifizierung erforderlich. In einigen Fällen müssen sich die verbundenen Konten im Rahmen der eingebetteten Connect-Komponenten vor dem Zugriff auf die Komponente mit ihrem Stripe-Konto anmelden, um die erforderlichen Funktionen bereitzustellen (so müssen z.&nbsp;B. den juristischen Personen im Fall einer Komponente des [Konto-Onboardings](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) Informationen zugeschrieben werden). Andere Komponenten erfordern möglicherweise nach der ersten Anzeige eine Authentifizierung innerhalb der Komponente.

Eine Authentifizierung ist für verbundene Konten erforderlich, bei denen Stripe dafür verantwortlich ist, aktualisierte Informationen zu erfassen, wenn sich die Anforderungen ändern. Bei verbundenen Konten, bei denen Sie dafür verantwortlich sind, aktualisierte Informationen zu erfassen, wenn Anforderungen fällig sind oder sich ändern (wie z.&nbsp;B. Custom-Konten), wird die Stripe-Authentifizierung durch die [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication)-Kontositzungsfunktion gesteuert. Wir empfehlen die Implementierung von 2FA oder gleichwertigen Sicherheitsmaßnahmen als [Best Practice](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Bei Kontokonfigurationen, die diese Funktion unterstützen (wie z.&nbsp;B. Custom), übernehmen Sie die Haftung für verbundene Konten, wenn diese [Negativsalden](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability) nicht zurückzahlen können.

### Komponenten, die eine Authentifizierung erfordern

Verbundenen Konten wird eine authentifizierte [WebView](https://developer.chrome.com/docs/android/custom-tabs) innerhalb Ihrer Anwendung angezeigt. Das verbundene Konto muss authentifiziert werden, bevor der/die Nutzer seinen/ihren Workflow innerhalb der WebView fortsetzen kann.

Der von Stripe gehostete Authentifizierungsablauf zeigt den Namen, die Farbe und das Symbol Ihrer Marke an, wie in Ihren [Connect-Einstellungen](https://dashboard.stripe.com/account/applications/settings) festgelegt. Das individuelle Erscheinungsbild und die Schriftarten aus dem [Embedded Component Manager](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) werden erst nach Abschluss der Authentifizierung verwendet.

> #### Android-Einschränkung
> 
> Aufgrund einer Einschränkung innerhalb der Android-APIs können eingebettete Komponenten auch nach Abschluss der Authentifizierung keine nutzerdefinierten Schriftarten in der authentifizierten Webansicht verwenden.

Die folgende Komponente erfordert die Authentifizierung verbundener Konten in bestimmten Szenarien:

- [Konto-Onboarding](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Auszahlungen](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Umgang mit Fehlern beim Laden [Clientseitig]

Reagieren Sie auf Fehler beim Laden der Komponente, indem Sie die Listener-Methode `onLoadError` der Komponente implementieren.

Verschiedene Fehlerursachen können die `onLoadError`-Methode mehrmals aufrufen, daher muss jede durch den `onLoadError` ausgelöste Logik idempotent sein.

#### Kotlin

```kotlin
// All components emit load errors. This example uses AccountOnboarding.
// All components support onLoadError.
class MyActivity : FragmentActivity() {
    private lateinit var accountOnboardingController: AccountOnboardingController

    override fun onCreate(savedInstanceState: Bundle?) {
        accountOnboardingController =
            embeddedComponentManager.createAccountOnboardingController(this)
        accountOnboardingController.listener = MyAccountOnboardingListener()
    }

    private fun openAccountOnboarding() {
        accountOnboardingController.show()
    }

    private inner class MyAccountOnboardingListener : AccountOnboardingListener {
        override fun onLoadError(error: Throwable) {
            println("Error loading account onboarding: ${error.message}")
        }
    }
}
```

## StripeConnect einrichten [Clientseitig] [Serverseitig]

Stripe verwendet eine [AccountSession](https://docs.stripe.com/api/account_sessions.md), um Ihre Absicht zum Ausdruck zu bringen, den API -Zugriff auf Ihr verbundenes Konto zu delegieren.

Die AccountSessions API gibt ein *Client-Geheimnis* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) zurück, das es einer eingebetteten Komponente ermöglicht, so auf die Ressourcen eines verbundenen Kontos zuzugreifen. Dies geschieht so, als würden Sie die API-Aufrufe selbst ausführen.

### AccountSession erstellen (Server)

Ihre App muss eine Anfrage an Ihren Server initiieren, um die Konto-Sitzung zu erhalten. Sie können einen neuen Endpoint auf Ihrem Server erstellen, der das Client-Geheimnis an die App zurückgibt:

#### Ruby

```ruby
require 'sinatra'
require 'stripe'
# This is a placeholder - it should be replaced with your secret API key.
# Sign in to see your own test API key embedded in code samples.
# Don’t submit any personally identifiable information in requests made with this key.
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = Stripe::AccountSession.create({
      account: {{CONNECTED_ACCOUNT_ID}},
      components: {
        account_onboarding: {
          enabled: true,
          features: {
            # We recommend disabling authentication for a better user experience when possible
            disable_stripe_user_authentication: true,
          }
        }
      }
    })

    {
      client_secret: account_session[:client_secret]
    }.to_json
  rescue => error
    puts "An error occurred when calling the Stripe API to create an account session: #{error.message}";
    return [500, { error: error.message }.to_json]
  end
end
```

### API-Kontositzung erstellen

Die [Create Account Session API](https://docs.stripe.com/api/account_sessions/create.md) bestimmt den Zugriff auf Komponenten und Funktionen für eingebettete Connect-Komponenten. Stripe erzwingt diese Parameter für alle Komponenten, die der Konto-Sitzung entsprechen. Wenn Ihre App mehrere Nutzerrollen unterstützt, stellen Sie sicher, dass Komponenten und Funktionen, die für diese Konto-Sitzung aktiviert sind, der aktuellen Nutzerrolle entsprechen. Sie können beispielsweise die [Verwaltung von Rückerstattungen](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) nur für Administrator/innen Ihrer Website aktivieren, nicht aber für andere Nutzer/innen. Um sicherzustellen, dass der Nutzerrollenzugriff erzwungen wird, müssen Sie die Nutzerrolle Ihrer Website den Komponenten der Konto-Sitzung zuordnen.

### Installieren Sie das Stripe React Native-SDK (Client)

Installieren Sie das Stripe React Native-SDK mit npm oder yarn:

```bash
npm install @stripe/stripe-react-native react-native-webview
# or
yarn add @stripe/stripe-react-native react-native-webview
```

### Initialisieren Sie StripeConnectProvider (Client)

Schließen Sie Ihren Antrag mit `ConnectComponentsProvider` ab und stellen Sie Ihren veröffentlichbaren Schlüssel zusammen mit einer Funktion bereit, die ein Client-Geheimnis abruft, indem Sie den neuen Endpoint aufruft, den Sie auf Ihrem Server erstellt haben.

```javascript
import { useState } from 'react';
import { ConnectComponentsProvider } from '@stripe/stripe-react-native';

const fetchClientSecret = async (): Promise<string> => {
  const response = await fetch('https://{{YOUR_SERVER}}/account_session', {
    method: 'POST',
  });
  const { client_secret: clientSecret } = await response.json();
  return clientSecret;
};

export default function App() {
  const [stripeConnectInstance] = useState(() => {
    return loadConnectAndInitialize({
      // This is a placeholder - it should be replaced with your publishable API key.
      // Sign in to see your own test API key embedded in code samples.
      // Don't submit any personally identifiable information in requests made with this key.
      publishableKey: "<<YOUR_PUBLISHABLE_KEY>>",
      fetchClientSecret: fetchClientSecret,
    })
  });

  return (
    <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
      <YourApp />
    </ConnectComponentsProvider>
  );
}
```

Um eine eingebettete Komponente zu verwenden, importieren Sie sie und rendern Sie sie im `ConnectComponentsProvider`:

```javascript
import { ConnectAccountOnboarding } from '@stripe/stripe-react-native';
import { useState } from 'react';
import { View } from 'react-native';
import Button from '../components/Button';

export default function AccountOnboardingScreen() {
  const [visible, setVisible] = useState(false);

  return (
    <View>
      <Button
        variant="primary"
        title="Show Onboarding"
        onPress={() => setVisible(true)}
      />

      {visible ? (
        <ConnectAccountOnboarding
          onExit={() => {
            setVisible(false);
            console.log('User exited onboarding');
          }}
        />
      ) : null}
    </View>
  );
}
```

## Configure the ConnectComponentsProvider [Clientseitig]

[Siehe die Referenzdokumentation :external:](https://stripe.dev/stripe-react-native/api-reference/types/StripeConnectInitParams.html).

### Erscheinungsbild der in Connect eingebetteten Komponenten anpassen

Das [Figma UI-Toolkit für eingebettete Komponenten](https://www.figma.com/community/file/1438614134095442934) enthält alle Komponenten, gängige Muster und eine Beispielanwendung. Sie können es verwenden, um eingebettete Nutzeroberflächen auf Ihrer Website zu visualisieren und zu gestalten.

Wir bieten eine [Reihe von Optionen](https://docs.stripe.com/connect/embedded-appearance-options.md), um das Erscheinungsbild von in Connect eingebetteten Komponenten anzupassen. Diese Anpassungen betreffen Schaltflächen, Symbole und andere Akzentuierungen in unserem Designsystem.

> #### Notwendige Popups
> 
> Einige Verhaltensweisen in eingebetteten Komponenten, wie z.&nbsp;B. die [Nutzerauthentifizierung](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), müssen in einer authentifizierten WebView dargestellt werden. Sie können die eingebettete Komponente nicht anpassen, um solche Webansichten zu eliminieren.

Sie können das Erscheinungsbild von eingebetteten Connect-Komponenten anpassen, indem Sie eine `Erscheinungsbild`-Option an `loadConnectAndInitialize` übergeben.

```javascript
import { ConnectComponentsProvider, loadConnectAndInitialize } from '@stripe/stripe-react-native';
import { useState } from 'react';

const appearance = {
  variables: {
    colorPrimary: '#537D5D',
  },
};

export default function App() {
  const [stripeConnectInstance] = useState(() => {
    const fetchClientSecret = async () => {
      const response = await fetch('/account_session', { method: "POST" });
      const { client_secret: clientSecret } = await response.json();
      return clientSecret;
    };

    return loadConnectAndInitialize({
      publishableKey: "<<YOUR_PUBLISHABLE_KEY>>",
      fetchClientSecret: fetchClientSecret,
      appearance,
    });
  });

  return (
    <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
      {/* Add embedded components and the rest of the UI here */}
    </ConnectComponentsProvider>
  );
}
```

Siehe die [Vollständige Liste der Erscheinungsbild-Optionen](https://docs.stripe.com/connect/embedded-appearance-options.md?platform=react-native) für React Native.

### Nutzerdefinierte Schriftarten verwenden

Wenn Sie benutzerdefinierte Schriftarten in Ihrer App verwenden (zum Beispiel von `.otf`- oder `.ttf`-Dateien, die in Ihre App eingebettet sind), müssen Sie die Schriftartdateien in einer `CustomFontSource` spezifizieren, die an die Option `customFonts` übergeben wird, wenn `loadConnectAndInitialize` aufgerufen wird. Dadurch erhalten die eingebetteten Connect-Komponenten Zugriff auf die Schriftartdateien, um die Schriftarten korrekt darzustellen.

Schriftarten, die in `Erscheinungsbild` spezifiziert sind, müssen eine `CustomFontSource` verwenden, die beim Start an `loadConnectAndInitialize` übergeben wird, um die richtige Darstellung zu gewährleisten.

### In Connect eingebettete Komponenten nach der Initialisierung aktualisieren

Die Methode zur `Aktualisierung` unterstützt das Aktualisieren von eingebetteten Connect-Komponenten nach dem Start. Sie können damit während der Betriebszeit die Optionen des Erscheinungsbilds wechseln. Dazu verwenden Sie dasselbe `stripeConnectInstance`-Objekt, das Sie mit `loadConnectAndInitialize` erstellt haben und rufen darauf die Methode zur `Aktualisierung` auf:

```javascript
stripeConnectInstance.update({
  appearance: {
    variables: {
      colorPrimary: "#FF0000",
    },
  },
});
```

## Authentifizierung

Wir bieten eine Reihe von APIs zur Verwaltung von Kontositzungen und Nutzeranmeldedaten in den in Connect eingebetteten Komponenten.

### Client-Geheimnis aktualisieren

Bei Sitzungen mit langer Laufzeit kann die Sitzung aus dem ursprünglich angegebenen *Client-Geheimnis* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) ablaufen. Wenn sie abläuft, verwenden wir automatisch `fetchClientSecret`, um ein neues Client-Geheimnis abzurufen und die Sitzung zu aktualisieren. Sie müssen keine zusätzlichen Parameter übergeben.

```javascript
import { useState } from 'react';
import { ConnectComponentsProvider } from '@stripe/stripe-react-native';

const fetchClientSecret = async (): Promise<string> => {
  const response = await fetch('https://{{YOUR_SERVER}}/account_session', {
    method: 'POST',
  });
  const { client_secret: clientSecret } = await response.json();
  return clientSecret;
};

export default function App() {
  const [stripeConnectInstance] = useState(() => {
    return loadConnectAndInitialize({
      publishableKey: "{{PUBLISHABLE_KEY}}",
      fetchClientSecret: fetchClientSecret,
    })
  });

  return (
    <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
      <YourApp />
    </ConnectComponentsProvider>
  );
}
```

## Lokalisierung

Eingebettete Connect-Komponenten unterstützen die folgenden Gebietsschemen:

| Sprache                              | Gebietsschema-Code |
| ------------------------------------ | ------------------ |
| Bulgarisch (Bulgarien)               | `bg-BG`            |
| Chinesisch (Vereinfacht)             | `zh-Hans`          |
| Chinesisch (Traditionell – Hongkong) | `zh-Hant-HK`       |
| Chinesisch (Traditionell – Taiwan)   | `zh-Hant-TW`       |
| Kroatisch (Kroatien)                 | `hr-HR`            |
| Tschechisch (Tschechien)             | `cs-CZ`            |
| Dänisch (Dänemark)                   | `da-DK`            |
| Niederländisch (Niederlande)         | `nl-NL`            |
| Englisch (Australien)                | `en-AU`            |
| Englisch (Indien)                    | `en-IN`            |
| Englisch (Irland)                    | `en-IE`            |
| Englisch (Neuseeland)                | `en-NZ`            |
| Englisch (Singapur)                  | `en-SG`            |
| Englisch (Vereinigtes Königreich)    | `en-GB`            |
| Englisch (USA)                       | `en-US`            |
| Estnisch (Estland)                   | `et-EE`            |
| Philippinisch (Philippinen)          | `fil-PH`           |
| Finnisch (Finnland)                  | `fi-FI`            |
| Französisch (Kanada)                 | `fr-CA`            |
| Französisch (Frankreich)             | `fr-FR`            |
| Deutsch (Deutschland)                | `de-DE`            |
| Griechisch (Griechenland)            | `el-GR`            |
| Ungarisch (Ungarn)                   | `hu-HU`            |
| Indonesisch (Indonesien)             | `id-ID`            |
| Italienisch (Italien)                | `it-IT`            |
| Japanisch (Japan)                    | `ja-JP`            |
| Koreanisch (Südkorea)                | `ko-KR`            |
| Lettisch (Lettland)                  | `lv-LV`            |
| Litauisch (Litauen)                  | `lt-LT`            |
| Malay (Malaysia)                     | `ms-MY`            |
| Maltesisch (Malta)                   | `mt-MT`            |
| Norwegisch, Bokmål (Norwegen)        | `nb-NO`            |
| Polnisch (Polen)                     | `pl-PL`            |
| Portugiesisch (Brasilien)            | `pt-BR`            |
| Portugiesisch (Portugal)             | `pt-PT`            |
| Rumänisch (Rumänien)                 | `ro-RO`            |
| Slowakisch (Slowakei)                | `sk-SK`            |
| Slowenisch (Slowenien)               | `sl-SI`            |
| Spanisch (Argentinien)               | `es-AR`            |
| Spanisch (Brasilien)                 | `es-BR`            |
| Spanisch (Lateinamerika)             | `es-419`           |
| Spanisch (Mexiko)                    | `es-MX`            |
| Spanisch (Spanien)                   | `es-ES`            |
| Schwedisch (Schweden)                | `sv-SE`            |
| Thai (Thailand)                      | `th-TH`            |
| Türkisch (Türkiye)                   | `tr-TR`            |
| Vietnamesisch (Vietnam)              | `vi-VN`            |

## Nutzerauthentifizierung in eingebetteten Connect-Komponenten

Für eingebettete Connect-Komponenten ist in der Regel keine Nutzerauthentifizierung erforderlich. In einigen Fällen müssen sich die verbundenen Konten im Rahmen der eingebetteten Connect-Komponenten vor dem Zugriff auf die Komponente mit ihrem Stripe-Konto anmelden, um die erforderlichen Funktionen bereitzustellen (so müssen z.&nbsp;B. den juristischen Personen im Fall einer Komponente des [Konto-Onboardings](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) Informationen zugeschrieben werden). Andere Komponenten erfordern möglicherweise nach der ersten Anzeige eine Authentifizierung innerhalb der Komponente.

Eine Authentifizierung ist für verbundene Konten erforderlich, bei denen Stripe dafür verantwortlich ist, aktualisierte Informationen zu erfassen, wenn sich die Anforderungen ändern. Bei verbundenen Konten, bei denen Sie dafür verantwortlich sind, aktualisierte Informationen zu erfassen, wenn Anforderungen fällig sind oder sich ändern (wie z.&nbsp;B. Custom-Konten), wird die Stripe-Authentifizierung durch die [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication)-Kontositzungsfunktion gesteuert. Wir empfehlen die Implementierung von 2FA oder gleichwertigen Sicherheitsmaßnahmen als [Best Practice](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Bei Kontokonfigurationen, die diese Funktion unterstützen (wie z.&nbsp;B. Custom), übernehmen Sie die Haftung für verbundene Konten, wenn diese [Negativsalden](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability) nicht zurückzahlen können.

### Komponenten, die eine Authentifizierung erfordern

Verbundenen Konten wird eine authentifizierte  innerhalb Ihrer Anwendung angezeigt. Das verbundene Konto muss authentifiziert werden, bevor der/die Nutzer seinen/ihren Workflow innerhalb der WebView fortsetzen kann.

Der von Stripe gehostete Authentifizierungsablauf zeigt den Namen, die Farbe und das Symbol Ihrer Marke an, wie in Ihren [Connect-Einstellungen](https://dashboard.stripe.com/account/applications/settings) festgelegt. Das individuelle Erscheinungsbild und die Schriftarten aus dem [Embedded Component Manager](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) werden erst nach Abschluss der Authentifizierung verwendet.

Die folgende Komponente erfordert die Authentifizierung verbundener Konten in bestimmten Szenarien:

- [Konto-Onboarding](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Auszahlungen](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Umgang mit Fehlern beim Laden [Clientseitig]

Reagieren Sie auf Fehler beim Laden der Komponente, indem Sie die Listener-Methode `onLoadError` der Komponente implementieren.

Verschiedene Fehlerursachen können die `onLoadError`-Methode mehrmals aufrufen, daher muss jede durch den `onLoadError` ausgelöste Logik idempotent sein.

#### TypeScript

```javascript
// All components emit load errors. This example uses AccountOnboarding.
// All components support onLoadError.
import { ConnectPayouts } from '@stripe/stripe-react-native';

export default function MyComponent() {
  const handleLoadError = (error: Error) => {
    console.log(`Error loading payouts: ${error.message}`);
  };

  return <ConnectPayouts onLoadError={handleLoadError} />;
}
```

## Zugriff anfordern (Private Vorschau)

Melden Sie sich an , um Zugriff auf die eingebetteten Komponenten von Connect für React Native in der privaten Vorschau zu beantragen. Falls Sie noch kein Stripe-Konto besitzen, können Sie sich [jetzt registrieren](https://dashboard.stripe.com/register).