Ir a contenido
Crea una cuenta
o
inicia sesión
Logotipo de la documentación de Stripe
/
Pregúntale a la IA
Crear cuenta
Iniciar sesión
Empezar
Pagos
Ingresos
Plataformas y marketplaces
Gestión del dinero
Developer resources
Resumen
Empieza a usar Connect
Fundamentos de la integración
Integraciones de ejemplo
Gestión de cuentas
Haz el onboarding de las cuentas
Configura los Dashboards de la cuenta
    Empieza a usar los componentes integrados de Connect
      Inicio rápido
    Personaliza los componentes integrados de Connect
    Componentes integrados de Connect compatibles
    Personalización del Dashboard de Stripe
    Controles de plataforma para cuentas de Stripe Dashboard
    Dashboard de cuentas Express
Trabaja con tipos de cuentas conectadas
Payment processing
Aceptar pagos
Transferir a cuentas
Platform administration
Gestiona tu plataforma Connect
Formularios fiscales para tu plataforma Connect
InicioPlataformas y marketplacesConfigure account Dashboards

Empieza a usar los componentes integrados de Connect

Descubre cómo integrar las funciones del Dashboard en tu sitio web.

Utiliza los componentes integrados de Connect para añadir las funciones del Dashboard de cuentas conectadas a tu sitio web. Estas bibliotecas y su API de soporte te permiten otorgar a tus usuarios acceso a los productos de Stripe directamente en tu Dashboard y aplicaciones móviles.

Configurar Stripe Connect
Lado del cliente
Lado del servidor

Stripe utiliza una AccountSession para expresar tu intención de delegar el acceso a la API a tu cuenta conectada.

La API de AccountSessions devuelve un secreto de cliente que permite que un componente integrado acceda a los recursos de una cuenta conectada como si estuvieras haciendo las llamadas a la API para ellos.

Crea una AccountSession Servidor

La aplicación debe iniciar una solicitud a tu servidor para obtener la sesión de la cuenta. Actualmente, solo se admite el onboarding de cuentas. Puedes crear un nuevo punto de conexión en tu servidor que devuelva el secreto de cliente a la aplicación:

main.rb
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 =
'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

Crear una API Account Session

La API Create Account Session determina el acceso a los componentes y funciones para los componentes integrados de Connect. Stripe aplica estos parámetros para cualquier componente que corresponda a la sesión de la cuenta. Si tu aplicación acepta varios roles de usuario, asegúrate de que los componentes y las funciones que están habilitados para esa sesión de cuenta correspondan al rol del usuario actual. Por ejemplo, puedes habilitar la gestión de reembolsos solo para los administradores de tu sitio, pero no para otros usuarios. Para asegurarse de que se aplica el acceso a la función de usuario, debes asignar la función de usuario de tu sitio a los componentes de la sesión de la cuenta.

Instala el SDK de StripeConnect Client

El SDK para Android de Stripe es de código abierto y está completamente documentado.

Para instalar el SDK, añade connect al bloque dependencies de tu archivo app/build.gradle:

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

Nota

Para conocer detalles de la última versión y de versiones anteriores del SDK, consulta la página Versiones de GitHub. Para recibir una notificación cuando se publique una nueva versión, mira las versiones del repositorio.

Inicializa EmbeddedComponentManager Client

Crea una instancia de un EmbeddedComponentManager con tu clave publicable y una expresión lambda que recupere un secreto de cliente llamando al nuevo punto de conexión que hayas creado en tu servidor. Para gestionar los cambios de configuración, mantén la instancia EmbeddedComponentManager en un ViewModel de actividad o fragmento.

MyActivityViewModel.kt
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 =
"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 } }

Para crear un componente, primero llama a EmbeddedComponentManager.onActivityCreate() en el método onCreate de tu actividad. A continuación, llama al método correspondiente en el EmbeddedComponentManager para el que has creado una instancia anteriormente. Esto devuelve un controlador que puedes usar para presentar el componente en la aplicación.

MyActivity.kt
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() } }

Configure the Embedded Component Manager
Lado del cliente

Consulta la referencia de código .

Personaliza el aspecto de los componentes integrados de Connect

El conjunto de herramientas de interfaz de usuario Figma para componentes incorporados contiene todos los componentes, patrones comunes y una aplicación de ejemplo. Puedes usarlo para visualizar y diseñar interfaces de usuario integradas en tu sitio web.

We offer a set of options to customize the look and feel of Connect embedded components. These customizations affect buttons, icons, and other accents in our design system.

Ventanas emergentes necesarias

Algunos comportamientos de los componentes integrados, como la autenticación de usuarios, deben presentarse en una vista web autenticada. No se puede personalizar el componente incrustado para eliminar dichas WebViews.

Puedes establecer estas opciones usando Appearance al inicializar EmbeddedComponentManager.

MyActivityViewModel.kt
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 =
"pk_test_TYooMQauvdEDq54NiTphI7jx"
, fetchClientSecret = ::fetchClientSecret, appearance = appearance, customFonts = customFonts, )

Al especificar los tamaños de fuente, usa el tamaño de fuente sin escalar que se muestra para la clase de tamaño predeterminada del dispositivo. El componente integrado escala automáticamente el tamaño de la fuente en función de la Configuración de fuentes de accesibilidad del usuario.

Consulta la lista completa de opciones de apariencia en Android.

Usar fuentes personalizadas

Si usas fuentes personalizadas en tu aplicación (por ejemplo, de archivos .otf o .tff integrados en el binario de tu aplicación), debes especificar los archivos de fuentes en un CustomFontSource pasado al argumento customFonts al inicializar EmbeddedComponentManager. Esto permite que los componentes integrados de Connect accedan a los archivos de fuentes para renderizarlas correctamente.

Las fuentes especificadas en appearance deben usar un CustomFontSource especificado en EmbeddedComponentManager en la inicialización para renderizarse correctamente.

Consulta la documentación de referencia .

Actualiza los componentes integrados de Connect después de la inicialización

Llama al método update para cambiar la apariencia de los componentes integrados después de la inicialización:

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

Autenticación

Ofrecemos un conjunto de API para gestionar las sesiones de la cuenta y las credenciales de usuario en los componentes integrados de Connect.

Actualizar el secreto de cliente

En sesiones de larga duración, podría caducar la sesión del secreto de cliente que se proporcionó inicialmente. Cuando caduca, usamos automáticamente fetchClientSecret para recuperar un nuevo secreto de cliente y actualizar la sesión. No es necesario que especifiques ningún otro parámetro.

MyActivityViewModel.kt
Kotlin
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 }

Localización

Los componentes integrados de Connect aceptan las siguientes configuraciones regionales:

IdiomaCódigo de configuración regional
Búlgaro (Bulgaria)bg-BG
Chino (simplificado)zh-Hans
Chino (tradicional de Hong Kong)zh-Hant-HK
Chino (tradicional de Taiwán)zh-Hant-TW
Croata (Croacia)hr-HR
Checo (República Checa)cs-CZ
Danés (Dinamarca)da-DK
Neerlandés (Países Bajos)nl-NL
Inglés (Australia)en-AU
Inglés (India)en-IN
Inglés (Irlanda)en-IE
Inglés (Nueva Zelanda)en-NZ
Inglés (Singapur)en-SG
Inglés (Reino Unido)en-GB
Inglés (Estados Unidos)en-US
Estonio (Estonia)et-EE
Filipino (Filipinas)fil-PH
Finlandés (Finlandia)fi-FI
Francés (Canadá)fr-CA
Francés (Francia)fr-FR
Alemán (Alemania)de-DE
Griego (Grecia)el-GR
Húngaro (Hungría)hu-HU
Indonesio (Indonesia)id-ID
Italiano (Italia)it-IT
Japonés (Japón)ja-JP
Coreano (Corea del Sur)ko-KR
Letón (Letonia)lv-LV
Lituano (Lituania)lt-LT
Malayo (Malasia)ms-MY
Maltés (Malta)mt-MT
Noruego bokmål (Noruega)nb-NO
Polaco (Polonia)pl-PL
Portugués (Brasil)pt-BR
Portugués (Portugal)pt-PT
Rumano (Rumania)ro-RO
Eslovaco (Eslovaquia)sk-SK
Esloveno (Eslovenia)sl-SI
Español (Argentina)es-AR
Español (Brasil)es-BR
Español (Latinoamérica)es-419
Español (México)es-MX
Español (España)es-ES
Sueco (Suecia)sv-SE
Tailandés (Tailandia)th-TH
Turco (Turquía)tr-TR
Vietnamita (Vietnam)vi-VN

Autenticación de usuarios en los componentes integrados de Connect

Por lo general, los componentes integrados de Connect no necesitan la autenticación de usuario. En algunas situaciones, los componentes integrados de Connect requieren que la cuenta conectada inicie sesión con su cuenta de Stripe antes de acceder al componente para proporcionar las funciones necesarias (por ejemplo, escribir información a la entidad jurídica de la cuenta en el caso del componente account onboarding). Es posible que otros componentes requieran autenticación dentro del componente después de que se rendericen inicialmente.

La autenticación es obligatoria para las cuentas conectadas en las que Stripe es responsable de recopilar información actualizada cuando cambian los requisitos. Para las cuentas conectadas en las que eres responsable de recopilar información actualizada cuando los requisitos vencen o cambian, como las cuentas Custom, la autenticación de Stripe se controla mediante la función de sesión de cuenta de disable_stripe_user_authentication. Recomendamos implementar 2FA o medidas de seguridad equivalentes como una práctica recomendada. Para las configuraciones de cuenta que admiten esta función, como Custom, asumes la responsabilidad de las cuentas conectadas si no pueden devolver los saldos negativos.

Componentes que requieren autenticación

A las cuentas conectadas se les mostrará un WebView autenticado dentro de tu aplicación. La cuenta conectada debe autenticarse antes de poder continuar su flujo de trabajo dentro de WebView.

El flujo de autenticación alojado en Stripe muestra el nombre, el color y el icono de tu marca tal y como están establecidos en la configuración de Connect y no utiliza tu aspecto personalizado ni las fuentes del Administrador de componentes integrados hasta que se completa la autenticación.

Limitaciones de Android

Debido a una limitación dentro de las API de Android, los componentes integrados no pueden usar fuentes personalizadas dentro de la vista web autenticada, incluso después de que se complete la autenticación.

El siguiente componente requiere que las cuentas conectadas se autentiquen en determinadas situaciones:

  • Onboarding de la cuenta

Gestiona los errores de carga

Si un componente no se carga, puedes reaccionar ante el error implementando el método de escucha onLoadError del componente. Dependiendo de la causa del error, se puede llamar varias veces al método onLoadError. Cualquier lógica activada por un onLoadError debe ser idempotente.

MyActivity.kt
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}") } } }
¿Te ha sido útil la página?
SíNo
¿Necesitas ayuda? Ponte en contacto con el equipo de soporte.
Únete a nuestro programa de acceso anticipado.
Echa un vistazo a nuestro registro de cambios.
¿Tienes alguna pregunta? Ponte en contacto con el equipo de ventas.
¿LLM? Lee llms.txt.
Con tecnología de Markdoc