Weiter zum Inhalt
Konto erstellen
oder
anmelden
Das Logo der Stripe-Dokumentation
/
KI fragen
Konto erstellen
Anmelden
Jetzt starten
Zahlungen
Umsatz
Plattformen und Marktplätze
Geldmanagement
Entwicklerressourcen
Übersicht
Mit Connect loslegen
Integrationsgrundlagen
Musterintegrationen
Kontoverwaltung
Onboarding von Konten
Konto-Dashboards konfigurieren
    Mit den in Connect eingebetteten Komponenten loslegen
      Quickstart
    In Connect eingebettete Komponenten anpassen
    Unterstützte in Connect eingebettete Komponenten
    Anpassung des Stripe-Dashboards
    Plattform-Steuerungen für Stripe-Dashboard-Konten
    Express-Dashboard
Mit verbundenen Kontotypen zusammenarbeiten
Zahlungsabwicklung
Zahlungen weltweit akzeptieren
Verbundene Konten auszahlen
Plattformverwaltung
Ihre Connect-Plattform verwalten
Steuerformulare für Ihre Connect-Plattform
StartseitePlattformen und MarktplätzeConfigure account Dashboards

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.

StripeConnect einrichten
Clientseitig
Serverseitig

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:

main.rb
Ruby
Python
PHP
Java
Node
Go
.NET
No results
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 =
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
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 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:

build.gradle.kts
Kotlin
Groovy
No results
plugins { id("com.android.application") } android { ... } dependencies { // ... // Connect Android SDK implementation("com.stripe:connect:21.24.1") }

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.

MyActivityViewModel.kt
Kotlin
Java
No results
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 =
"pk_test_TYooMQauvdEDq54NiTphI7jx"
, 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 zuerst EmbeddedComponentManager.onActivityCreate() in der onCreate-Methode Ihrer Aktivität auf. Rufen Sie dann die entsprechende Erstellungsmethode für den EmbeddedComponentManager auf, den Sie oben instanziiert haben. Dadurch wird ein Controller zurückgegeben, mit dem Sie die Komponente in der App darstellen können.

MyActivity.kt
Kotlin
Java
No results
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() } }

Configure the Embedded Component Manager
Clientseitig

Siehe Codereferenz .

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.

MyActivityViewModel.kt
Kotlin
Java
No results
// 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 =
"pk_test_TYooMQauvdEDq54NiTphI7jx"
, 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 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 .otf- oder .tff-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.

Siehe Referenzdokumentation .

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:

MyActivity.kt
Kotlin
Java
No results
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 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.

MyActivityViewModel.kt
Kotlin
Java
No results
val embeddedComponentManager: EmbeddedComponentManager = EmbeddedComponentManager( publishableKey =
"pk_test_TYooMQauvdEDq54NiTphI7jx"
, 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:

SpracheGebietsschema-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:

  • Konto-Onboarding

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.

MyActivity.kt
Kotlin
Java
No results
// 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}") } } }
War diese Seite hilfreich?
JaNein
  • Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
  • Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
  • Schauen Sie sich unser Änderungsprotokoll an.
  • Fragen? Sales-Team kontaktieren.
  • LLM? Lesen Sie llms.txt.
  • Unterstützt von Markdoc