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.
Stripe verwendet eine AccountSession, um Ihre Absicht zum Ausdruck zu bringen, den API -Zugriff auf Ihr verbundenes Konto zu delegieren.
Die AccountSessions API gibt ein Client-Geheimnis 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 Kontositzung zu erhalten. Derzeit wird nur das Konto-Onboarding unterstützt. Sie können einen neuen Endpoint auf Ihrem Server erstellen, der das Client-Geheimnis an die App zurückgibt:
API-Kontositzung erstellen
Die API zum Erstellen von Kontositzungen legt den Zugriff auf Komponenten und Funktionen für in Connect eingebettete Komponenten fest. Stripe erzwingt diese Parameter für alle Komponenten, die der Kontositzung entsprechen. Wenn Ihre App mehrere Nutzerrollen unterstützt, stellen Sie sicher, dass die Komponenten und Funktionen, die für diese Kontositzung aktiviert sind, der Rolle des aktuellen Nutzers/der aktuellen Nutzerin entsprechen. Beispielsweise können Sie die Rückerstattungsverwaltung nur für Administratoren Ihrer Website, nicht aber für andere Nutzer/innen aktivieren. Um sicherzustellen, dass der Zugriff auf Nutzerrollen erzwungen wird, müssen Sie die Nutzerrolle Ihrer Website den Kontositzungskomponenten zuordnen.
StripeConnect SDK installieren Client
Das Stripe Android SDK ist Open Source und vollständig dokumentiert.
Um das SDK zu installieren, fügen Sie connect in den Block dependencies Ihrer app/build.gradle-Datei ein:
Notiz
Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite Releases auf GitHub. Um bei Veröffentlichung eines neuen Release eine Benachrichtigung zu erhalten, beobachten Sie Veröffentlichungen für das jeweilige Repository.
EmbeddedComponentManager initialisieren Client
Instanziieren Sie einen EmbeddedComponentManager 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.
Um eine Komponente zu erstellen, rufen Sie zunächst EmbeddedComponentManager. in der Methode onCreate Ihrer Activity auf. Rufen Sie dann die entsprechende Erstellungsmethode des EmbeddedComponentManager auf, den Sie oben instanziiert haben.
Konto-Onboarding gibt einen Controller zurück, der seine eigene Präsentation verwaltet. Andere Komponenten, wie z. B. Payments gibt eine Ansicht zurück, die Sie mit mehr Flexibilität in Ihrer App anzeigen können.
Rendering eines Controllers
Rendering einer Ansicht
Erscheinungsbild der in Connect eingebetteten Komponenten anpassen
Das Figma UI-Toolkit für eingebettete Komponenten 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, 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, 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 festlegen, wenn Sie EmbeddedComponentManager initialisieren.
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 der Nutzer/innen.
Siehe die vollständige Liste der Erscheinungsbildoptionen auf Android.
Nutzerdefinierte Schriftarten verwenden
Wenn Sie in Ihrer App nutzerdefinierte Schriftarten verwenden (z. B. aus .- oder .-Dateien, die in Ihre App-Binärdatei eingebettet sind), müssen Sie die Schriftartdateien in einer CustomFontSource 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 verwenden, die bei der Initialisierung an den EmbeddedComponentManager übergeben wird, damit sie ordnungsgemäß gerendert werden.
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:
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 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.
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. B. den juristischen Personen im Fall einer Komponente des Konto-Onboardings 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. B. Custom-Konten), wird die Stripe-Authentifizierung durch die disable_stripe_user_authentication-Kontositzungsfunktion gesteuert. Wir empfehlen die Implementierung von 2FA oder gleichwertigen Sicherheitsmaßnahmen als Best Practice. Bei Kontokonfigurationen, die diese Funktion unterstützen (wie z. B. Custom), übernehmen Sie die Haftung für verbundene Konten, wenn diese Negativsalden nicht zurückzahlen können.
Komponenten, die eine Authentifizierung erfordern
Verbundenen Konten wird eine authentifizierte WebView 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 festgelegt. Das individuelle Erscheinungsbild und die Schriftarten aus dem Embedded Component Manager 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:
Umgang mit Fehlern beim Laden
Wenn eine Komponente nicht geladen wird, können Sie auf den Fehler reagieren, indem Sie die Listener-Methode onLoadError der Komponente implementieren. Je nach Fehlerursache kann die Methode onLoadError mehrmals aufgerufen werden. Jede durch einen onLoadError ausgelöste Logik muss idempotent sein.