Accéder directement au contenu
Créez un compte
ou
connecter-vous
Logo de la documentation Stripe
/
Demander à l'assistant IA
Créez un compte
Connectez-vous
Démarrer
Paiements
Revenus
Plateformes et places de marché
Gestion de fonds
Ressources pour les développeurs
Aperçu
Démarrer avec Connect
Principes de base de l'intégration
Exemples d'intégration
Gestion de compte
Inscrire des comptes
Configurer les dashboards des comptes
    Démarrer avec les composants intégrés Connect
      Démarrage rapide
    Personnaliser les composants intégrés Connect
    Composants intégrés Connect pris en charge
    Personnalisation du Dashboard Stripe
    Contrôles de la plateforme pour les comptes du Dashboard Stripe
    Dashboard Express
Utiliser les types de comptes connectés
Traitement des paiements
Accepter des paiements
Effectuer des virements vers des comptes
Administration de plateforme
Gérer votre plateforme Connect
Formulaires fiscaux pour votre plateforme Connect
AccueilPlateformes et places de marchéConfigure account Dashboards

Premiers pas avec les composants intégrés Connect

Comment intégrer les fonctionnalités du Dashboard à votre site Web.

Utilisez les composants intégrés Connect pour ajouter des fonctionnalités de Dashboard de compte connecté à votre site Web. Ces bibliothèques et leur API associée vous permettent d’offrir à vos utilisateurs la possibilité d’accéder aux produits Stripe directement depuis votre Dashboard et vos applications mobiles.

Configurer StripeConnect
Côté client
Côté serveur

Stripe utilise une AccountSession pour exprimer votre intention de déléguer API accès à votre compte connecté.

L’API AccountSessions renvoie une clé secrète du client qui permet à un composant intégré d’accéder aux ressources d’un compte connecté comme si vous faisiez des appels à l’API pour ces derniers.

Créer une AccountSession Serveur

Votre application doit envoyer une demande à votre serveur pour obtenir la session de compte. Actuellement, seule l’inscription des comptes est prise en charge. Vous pouvez créer un endpoint sur votre serveur qui renvoie la clé secrète client à l’application :

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 Create Account Session

L’API Create Account Session détermine l’accès aux composants et aux fonctionnalités des composants intégrés Connect. Stripe applique ces paramètres à tous les composants correspondant à la session du compte. Si votre application prend en charge plusieurs rôles d’utilisateur, vérifiez que les composants et fonctionnalités activés pour cette session de compte correspondent au rôle de l’utilisateur actuel. Par exemple, vous pouvez activer la gestion des remboursements uniquement pour les administrateurs de votre site, mais pas pour les autres utilisateurs. Pour vérifier que les accès aux rôles d’utilisateur sont appliqués, vous devez mapper le rôle d’utilisateur de votre site aux composants de session de compte.

Installer le SDK StripeConnect Client

Le SDK Stripe Android est disponible en open source et fait l’objet d’une documentation complète.

Pour installer le SDK, ajoutez connect au bloc dependencies de votre fichier app/build.gradle :

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

Remarque

Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des versions sur GitHub. Pour savoir quand une nouvelle version est disponible, surveillez les versions du référentiel.

Initialiser EmbeddedComponentManager Client

Instanciez un EmbeddedComponentManager avec votre clé publiable et une fonction lambda qui récupère une clé secrète du client en appelant le nouveau endpoint que vous avez créé sur votre serveur. Pour gérer les modifications de configuration, conservez l’instance EmbeddedComponentManager dans un ViewModel d’activité ou de fragment.

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 } }

Pour créer un composant, appelez d’abord EmbeddedComponentManager.onActivityCreate() dans la méthode onCreate de votre activité. Ensuite, appelez la méthode create appropriée sur le EmbeddedComponentManager que vous avez instancié plus tôt. Cela renvoie un contrôleur que vous pouvez utiliser pour présenter le composant dans l’application.

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
Côté client

Voir la référence du code .

Personnaliser l’apparence des composants intégrés Connect

La boîte à outils de composants intégrés d’interface utilisateur Figma contient tous les composants, les modèles courants et un exemple d’application. Vous pouvez l’utiliser pour visualiser et concevoir des interfaces utilisateur intégrées sur votre site Web.

Nous proposons un ensemble d’options permettant de personnaliser l’apparence des composants intégrés Connect. Ces personnalisations affectent les boutons, les icônes et d’autres accents de notre système de conception.

Fenêtres contextuelles nécessaires

Certains comportements dans les composants intégrés, tels que l’authentification de l’utilisateur, doivent être présentés dans une vue web authentifiée. Vous ne pouvez pas personnaliser le composant intégré pour éliminer ces vues web.

Vous pouvez définir ces options à l’aide de Appearance lors de l’initialisation de EmbeddedComponentManager.

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, )

Lorsque vous spécifiez des tailles de police, utilisez la taille de police non mise à l’échelle qui s’affiche pour la classe de taille par défaut de l’appareil. Le composant intégré met automatiquement à l’échelle la taille de la police en fonction des paramètres d’accessibilité en matière de police de l’utilisateur.

Consultez la liste complète des options d’apparence sur Android.

Utiliser des polices personnalisées

Si vous utilisez des polices personnalisées dans votre application (par exemple, à partir de fichiers .otf ou .tff intégrés dans le fichier binaire de votre application), vous devez spécifier les fichiers de polices dans un CustomFontSource transmis à l’argument customFonts lors de l’initialisation de EmbeddedComponentManager. Cela permet aux composants intégrés Connect d’accéder aux fichiers de polices pour afficher correctement les polices.

Les polices précisées dans appearance doivent utiliser un CustomFontSource transmis au EmbeddedComponentManager lors de l’initialisation pour obtenir un affichage correct.

Voir la documentation de référence .

Mise à jour des composants intégrés de Connect après l’initialisation

Appelez la méthode update pour modifier l’apparence des composants intégrés après l’initialisation :

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)

Authentification

Nous proposons un ensemble d’API pour gérer les sessions de compte et les informations d’identification des utilisateurs dans les composants Connect intégrés.

Actualiser la clé secrète du client

Sur les sessions de longue durée, la session du secret client peut expirer. Lorsqu’il expire, nous utilisons automatiquement fetchClientSecret pour récupérer une nouvelle clé secrète client et actualiser la session. Vous n’avez pas besoin de transmettre de paramètres supplémentaires.

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 }

Localisation

Les composants Connect Embedded prennent en charge les langues ou régions suivantes :

LangueCode de paramètres régionaux
Bulgare (Bulgarie)bg-BG
Chinois (simplifié)zh-Hans
Chinois (traditionnel - Hong Kong)zh-Hant-HK
Chinois (traditionnel - Taïwan)zh-Hant-TW
Croate (Croatie)hr-HR
Tchèque (Tchéquie)cs-CZ
Danois (Danemark)da-DK
Néerlandais (Pays-Bas)nl-NL
Anglais (Australie)en-AU
Anglais (Inde)en-IN
Anglais (Irlande)en-IE
Anglais (Nouvelle-Zélande)en-NZ
Anglais (Singapour)en-SG
Anglais (Royaume-Uni)en-GB
Anglais (États-Unis)en-US
Estonien (Estonie)et-EE
Philippin (Philippines)fil-PH
Finnois (Finlande)fi-FI
Français (Canada)fr-CA
Français (France)fr-FR
Allemand (Allemagne)de-DE
Grec (Grèce)el-GR
Hongrois (Hongrie)hu-HU
Indonésien (Indonésie)id-ID
Italien (Italie)it-IT
Japonais (Japon)ja-JP
Coréen (Corée du Sud)ko-KR
Letton (Lettonie)lv-LV
Lituanien (Lituanie)lt-LT
Malais (Malaisie)ms-MY
Maltais (Malte)mt-MT
Norvégien Bokmål (Norvège)nb-NO
Polonais (Pologne)pl-PL
Portugais (Brésil)pt-BR
Portugais (Portugal)pt-PT
Roumain (Roumanie)ro-RO
Slovaque (Slovaquie)sk-SK
Slovène (Slovénie)sl-SI
Espagnol (Argentine)es-AR
Espagnol (Brésil)es-BR
Espagnol (Amérique latine)es-419
Espagnol (Mexique)es-MX
Espagnol (Espagne)es-ES
Suédois (Suède)sv-SE
Thaï (Thaïlande)th-TH
Turc (Turquie)tr-TR
Vietnamien (Viêt Nam)vi-VN

Authentification de l’utilisateur dans les composants intégrés de Connect

Les composants intégrés Connect ne requièrent généralement pas l’authentification de l’utilisateur. Dans certains cas, les composants intégrés Connect nécessitent que le compte connecté s’identifie avec son compte Stripe avant d’accéder au composant afin de fournir les fonctionnalités requises (par exemple, saisir des informations sur le compte de l’entité juridique dans le cas du composant d’inscription des utilisateurs). D’autres composants peuvent nécessiter une authentification au sein du composant après l’affichage initial.

L’authentification est obligatoire pour les comptes connectés pour lesquels Stripe est responsable de la collecte des informations mises à jour lorsque les exigences évoluent. Pour les comptes connectés pour lesquels vous êtes responsable de la collecte des informations mises à jour lorsque les exigences arrivent à échéance ou évoluent, tels que les comptes Custom, l’authentification de Stripe est contrôlée par la fonctionnalité de session de compte disable_stripe_user_authentication. Nous vous recommandons de mettre en œuvre l’authentification à deux facteurs ou des mesures de sécurité équivalentes à titre de bonne pratique. Pour les configurations de compte qui prennent en charge cette fonctionnalité, comme les comptes Custom, vous assumez la responsabilité des comptes connectés s’ils ne sont pas en mesure de rembourser les soldes négatifs.

Composants nécessitant une authentification

Les comptes connectés verront s’afficher une vue web authentifiée dans votre application. Le compte connecté doit s’authentifier avant de pouvoir continuer son workflow dans la vue web.

Le flux d’authentification hébergé par Stripe affiche le nom, la couleur et l’icône de votre marque tels que définis dans vos paramètres Connect et n’utilise pas l’apparence et les polices personnalisées du gestionnaire de composants intégré tant que l’authentification n’est pas terminée.

Limitation d’Android

En raison d’une limitation au sein des API Android, les composants intégrés ne peuvent pas utiliser de polices personnalisées dans la vue web authentifiée, même une fois l’authentification terminée.

Dans certains cas, les comptes connectés doivent s’authentifier pour utiliser le composant suivant :

  • Inscription du compte

Traiter les erreurs de chargement

Si le chargement d’un composant échoue, vous pouvez réagir à l’échec en implémentant la méthode d’écoute onLoadError du composant. En fonction de la cause de l’échec, la méthode onLoadError peut être appelée plusieurs fois. Toute logique déclenchée par onLoadError doit être idempotente.

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}") } } }
Cette page vous a-t-elle été utile ?
OuiNon
  • Besoin d'aide ? Contactez le service Support.
  • Rejoignez notre programme d'accès anticipé.
  • Consultez notre log des modifications.
  • Des questions ? Contactez l'équipe commerciale.
  • LLM ? Lire llms.txt.
  • Propulsé par Markdoc