# 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.

Para obtener una versión inmersiva de esta guía, consulta la [guía de inicio rápido de la integración de componentes integrados de Connect](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md). También puedes descargar una integración de muestra desde allí. Para personalizar la apariencia de los componentes integrados de Connect, utiliza las opciones de `appearance` cuando inicialices `StripeConnectInstance`. Consulta la [lista completa de parámetros de apariencia](https://docs.stripe.com/connect/customize-connect-embedded-components.md).

## Inicia Connect.js [Lado del cliente] [Lado del servidor]

Stripe utiliza una [AccountSession](https://docs.stripe.com/api/account_sessions.md) 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* (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) 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)

En una aplicación de una sola página, tu cliente inicia una solicitud para obtener la sesión de la cuenta en tu servidor. Puedes crear un nuevo punto de conexión en tu servidor que devuelva el secreto de cliente al navegador:

#### 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
```

### Crear una API Account Session

La [API para Crear sesión de cuenta](https://docs.stripe.com/api/account_sessions/create.md) determina el acceso a componentes y funciones para los componentes incrustados de Connect. Stripe aplica estos parámetros para todos los componentes que correspondan a la sesión de la cuenta. Si tu sitio admite varias funciones de usuario, asegúrate de que los componentes y funciones que estén habilitados para esa sesión de cuenta correspondan a la función del usuario actual.  Por ejemplo, puedes habilitar la [gestión de reembolsos](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) solo para los administradores de tu sitio, pero no para otros usuarios. Para garantizar que se apliquen los accesos de las funciones de usuario, debes asignar la función de usuario de tu sitio a los componentes de sesión de la cuenta.

### Configura Connect.js (Client)

Recomendamos configurar Connect.js con npm como se muestra en el siguiente ejemplo, aunque también es posible [sin npm](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#without-npm).

#### HTML + JS

Instala el [paquete de npm](https://github.com/stripe/connect-js) para usar Connect.js como módulo.

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

#### React

Instala Connect.js y las bibliotecas de React Connect.js desde el [registro público de npm](https://www.npmjs.com/package/@stripe/react-connect-js).

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

### Carga e inicializa Connect.js (Client)

Llama a `loadConnectAndInitialize` con tu clave publicable y una función que recupera un secreto de cliente llamando al nuevo punto de conexión que creaste en tu servidor. Utiliza la `StripeConnectInstance` devuelta para crear componentes integrados. Después de inicializar Connect.js, puedes montar o desmontar componentes del DOM en cualquier momento. Eso incluye cualquier elemento renderizado dentro de los portales de React o Vue.

#### HTML + JS

Para crear un componente, llama a `create` en el `StripeConnectInstance` que creaste anteriormente y después pasa el nombre del componente. Esto devuelve un [elemento personalizado](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) que Connect.js registra y utiliza para conectar automáticamente tu DOM a Stripe. A continuación, puedes utilizar `append` para adjuntar este elemento a tu DOM.

Llama a `create` con `payments` y después añade el resultado a tu DOM para renderizar una interfaz de usuario de usuario de pagos.

#### React

Para usar los componentes integrados de Connect con los contenedores de React, envuelve tu aplicación en un `ConnectComponentsProvider`ConnectComponentsProvider’ y pasa la `StripeConnectInstance` que creaste anteriormente.

Usa `ConnectPayments` en tu página para renderizar una interfaz de usuario de pagos.

#### 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);
```

[Consulta la lista completa de los componentes integrados compatibles →](https://docs.stripe.com/connect/supported-embedded-components.md)

## Configure Connect.js [Lado del cliente]

El método `loadConnectAndInitialize` del cliente utiliza varias opciones diferentes para configurar Connect.js.

| Opción              | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |             |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `publishableKey`    | La [clave publicable](https://docs.stripe.com/keys.md) de tu integración.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | obligatorio |
| `fetchClientSecret` | La función que recupera el *secreto de cliente* (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) devuelto por `/v1/account_sessions`. Esto le indica a `StripeConnectInstance` a qué cuenta delegar el acceso. Esta función también se utiliza para recuperar una función del secreto de cliente con el fin de actualizar la sesión cuando caduca. `fetchClientSecret` siempre debe crear una nueva sesión de cuenta y devolver un `client_secret` nuevo.                    | obligatorio |
| `appearance`        | Objeto para personalizar el aspecto de los componentes integrados de Connect.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | opcional    |
| `locale`            | Parámetro para especificar la [configuración regional](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#localization) que utilizan los componentes integrados de Connect. La configuración regional predeterminada es el idioma del navegador. Si la configuración regional especificada no es compatible directamente, utilizamos una alternativa razonable (por ejemplo, `fr-be` podría cambiar a `fr-fr`). Consulta [localización](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#localization) para ver la lista de configuraciones regionales aceptadas. | opcional    |
| `fonts`             | Una matriz de fuentes personalizadas disponibles para utilizar con cualquier componente integrado creado a partir de una `StripeConnectInstance`. Puedes especificar fuentes como objetos [CssFontSource](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#css-font-source) o [CustomFontSource](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#custom-font-source).                                                                                                                                                                                          | opcional    |

### Personaliza el aspecto de los componentes integrados de Connect

El [conjunto de herramientas de interfaz de usuario Figma para componentes incorporados](https://www.figma.com/community/file/1438614134095442934) 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.

Ofrecemos un [conjunto de opciones](https://docs.stripe.com/connect/embedded-appearance-options.md) para personalizar el aspecto de los componentes integrados de Connect. Estas personalizaciones afectan los botones, los iconos y otros acentos de nuestro sistema de diseño.

> #### Ventanas emergentes necesarias
> 
> Algunos comportamientos de los componentes integrados, como la [autenticación de usuarios](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), se deben presentar en una ventana emergente. No se puede personalizar el componente integrado para eliminar estas ventanas emergentes.

Puedes configurar estas opciones al inicializar `StripeConnectInstance` pasando una apariencia al objeto `appearance`. Solo puedes usar las [opciones Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) para modificar estilos en los componentes integrados de Connect. La familia tipográfica y el color de fondo de los componentes integrados de Connect se heredan del contenedor de HTML principal. Debes establecer explícitamente todas las demás opciones.

```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",
    },
  },
});
```

Consulta la [lista completa de variables de apariencia](https://docs.stripe.com/connect/embedded-appearance-options.md).

### El objeto Fonts

El objeto `fonts` en `stripeConnect.initialize` toma una matriz de objetos [CssFontSource](https://docs.stripe.com/js/appendix/css_font_source_object) o [CustomFontSource](https://docs.stripe.com/js/appendix/custom_font_source_object).

Si utilizas fuentes personalizadas en tu página (por ejemplo, archivos `.woff` o `.tff`), debes especificar los archivos de fuentes cuando inicialices los componentes integrados de Connect. Si lo haces, permitirás que los componentes integrados de Connect rendericen correctamente las fuentes. Puede especificar los archivos de la siguiente manera:

#### CssFontSource

Utiliza este objeto para pasar una URL de hoja de estilo que defina tus fuentes personalizadas al crear un `StripeConnectInstance`. Con un objeto `CssFontSource`, tu [configuración CSP](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#csp-and-http-header-requirements) debe permitir obtener los dominios asociados a las URL del archivo CSS especificadas como CssFontSource.

| Nombre   | Tipo              | Valor de ejemplo                                    |
| -------- | ----------------- | --------------------------------------------------- |
| `cssSrc` | cadena `required` | `https://fonts.googleapis.com/css?family=Open+Sans` | Una URL relativa o absoluta que señala a un archivo CSS con definiciones de [@font-face](https://developer.mozilla.org/en/docs/Web/CSS/@font-face). El archivo debe estar alojado en https. Si usas una [directiva de seguridad de contenido (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), es posible que el archivo requiera [más directivas](https://docs.stripe.com/security/guide.md#content-security-policy). |

#### CustomFontSource

Utiliza este objeto para pasar fuentes personalizadas al crear un `StripeConnectInstance`.

| Nombre         | Tipo              | Valor de ejemplo                                |
| -------------- | ----------------- | ----------------------------------------------- |
| `family`       | cadena `required` | `Avenir`                                        | El nombre que se dará a la fuente.                                                                                                                                                                                                                                              |
| `src`          | cadena `required` | `url(https://my-domain.com/assets/avenir.woff)` | Un valor válido de [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) que apunta a tu archivo de fuente personalizada. Suele ser (aunque no siempre) un enlace a un archivo con un sufijo `.woff`, `.otf` o `.svg`. El archivo debe estar alojado en https. |
| `display`      | cadena `optional` | `auto`                                          | Un valor válido de [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display).                                                                                                                                                                    |
| `style`        | cadena `optional` | `normal`                                        | Uno de los siguientes: `normal`, `italic` u `oblique`.                                                                                                                                                                                                                          |
| `unicodeRange` | cadena `optional` | `U+0-7F`                                        | Un valor válido de [unicode-range](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range).                                                                                                                                                                  |
| `weight`       | cadena `optional` | `400`                                           | Un [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) válido. Se trata de una cadena, no de un número.                                                                                                                                                 |

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

El método `update` acepta la actualización de los componentes integrados de Connect después de la inicialización. Puede usarlo para cambiar las opciones de apariencia en tiempo de ejecución (sin actualizar la página). Para hacerlo, usa el mismo objeto `stripeConnectInstance` que creaste con `initialize` y llama al método `update`:

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

> No todas las opciones son actualizables (por ejemplo, `fonts`). Las opciones aceptadas para este método son un subconjunto de las opciones ofrecidas en `initialize`. Esto permite actualizar `appearance` y `locale`.

### Ancho y altura

Los componentes integrados de Connect se comportan como elementos HTML `block` normales. De forma predeterminada, toman el 100&nbsp;% de `width` de su elemento HTML principal y crecen en altura de acuerdo con el contenido renderizado en su interior. Puedes controlar el `width` de los componentes integrados de Connect especificando el `width` del HTML principal. No puedes controlar directamente el `height`, ya que depende del contenido renderizado; sin embargo, puedes limitar la altura con `maxHeight` y `overflow: scroll`, de la misma manera que puedes hacerlo con otros elementos HTML `block`.

## 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* (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) 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.

```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,
});
```

### Salir de la sesión

Te recomendamos que llames a `logout` en `stripeConnectInstance` para destruir el objeto de sesión de la cuenta asociada después de que un usuario salga de la sesión de tu aplicación. Esto deshabilita todos los componentes integrados de Connect que se vinculan a esa `stripeConnectInstance`.

> #### Ventanas emergentes necesarias
> 
> Solo llama al `cierre de sesión` cuando el usuario cierre sesión en tu aplicación. No llames al cierre de sesión cuando un componente se desmonte (al navegar a otra página o cerrar la página) o al cargar otros componentes, ya que este método invalida por completo la sesión de la cuenta actual y la [sesión de usuario de Stripe](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#user-authentication-in-connect-embedded-components). Después de llamar al `cierre de sesión`, los componentes ya no se renderizan para la `stripeConnectInstance` asociada.

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

## Requisitos de encabezado CSP y HTTP

Si tu sitio web implementa una *Política de seguridad de contenidos* (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), debes actualizarla añadiendo las siguientes reglas:

- `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 del elemento de estilo vacío)

Si utilizas un archivo CSS para cargar [fuentes web](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#fonts-object) con el fin de utilizarlas con componentes integrados de Connect, tu directiva CSP [connect-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) debe autorizar su URL.

La configuración de ciertos [encabezados de respuesta HTTP](https://developer.mozilla.org/en-US/docs/Glossary/Response_header) permite utilizar todas las funciones de los componentes integrados de Connect:

- [Política de apertura de origen cruzado](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy), `unsafe-none`. Este (`unsafe-none`) es el valor predeterminado del encabezado, por lo que funciona no configurar este encabezado. Otros valores como `same-origin` rompen la [autenticación de usuario](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components) en los componentes integrados de Connect.

## Navegadores compatibles

Aceptamos el mismo conjunto de navegadores que el [Dashboard de Stripe actualmente](https://docs.stripe.com/dashboard/basics.md):

- Las 20 versiones más recientes de Chrome y Firefox
- Las dos versiones principales más recientes de Safari y Edge
- Las dos versiones principales más recientes de Safari para dispositivos móviles en iOS

No puedes usar componentes incrustados de Connect en vistas web integradas dentro de aplicaciones móviles o de escritorio. Para utilizar componentes incrustados de Connect en una aplicación móvil, utiliza el SDK de [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), o[React Native](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=react-native).

Si un componente integrado aún no es compatible con nuestros SDK para móviles, te recomendamos que lo vincules a un navegador web en el que puedas procesar los componentes integrados.

## Localización

Al inicializar [Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), puedes pasar un parámetro `locale`. Para que la configuración regional de un componente integrado coincida con la configuración regional de tu sitio web, pasa el parámetro `locale` con la configuración regional de la interfaz de usuario que representa tu sitio web.

El valor predeterminado del parámetro `locale` está determinado por la configuración regional configurada por el navegador. Si la configuración regional especificada no es compatible directamente, se utiliza una alternativa razonable (por ejemplo, `fr-be` podría cambiar a `fr-fr`).

Los componentes integrados de Connect aceptan las siguientes configuraciones regionales:

| Idioma                           | Có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`                          |

## Gestiona los errores de carga

Si un componente no se carga, puedes reaccionar al error proporcionando un controlador de errores de carga a cualquier componente integrado. En función de la causa del fallo, se puede llamar varias veces al controlador de errores de carga. Cualquier lógica activada por un controlador de errores de carga debe ser idempotente.

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

| Método           | Descripción                                                                                      | Variables                                                                                                                                                                                                                                                                 |
| ---------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setOnLoadError` | El componente ejecuta esta función de devolución de llamada cuando se produce un error de carga. | - `loadError.error`: Ver [el objeto de error de carga](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)
  - `loadError.elementTagName`: El nombre de la etiqueta HTML utilizada para representar el componente en el navegador |

#### React

| Propiedad de React | Descripción                                                                                      | Variables                                                                                                                                                                                                                                                                 |
| ------------------ | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onLoadError`      | El componente ejecuta esta función de devolución de llamada cuando se produce un error de carga. | - `loadError.error`: Ver [el objeto de error de carga](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)
  - `loadError.elementTagName`: El nombre de la etiqueta HTML utilizada para representar el componente en el navegador |

#### El objeto de carga `error`

Cada vez que hay un error en la carga, se pasa un objeto `error` al controlador de errores de carga con las siguientes propiedades.

| Nombre    | Tipo                                                                                                                             | Valor de ejemplo                  |
| --------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `type`    | Consulta [tipos de errores de carga](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object) | `authentication_error`            | El tipo de error               |
| `message` | cadena | indefinido                                                                                                              | `Failed to fetch account session` | Más información sobre el error |

#### Tipos de fallos de carga

Cuando un componente no se carga, detectamos el tipo de fallo y lo asignamos a uno de los tipos que se indican a continuación. Si no se puede determinar el tipo de error de carga, se marca como `api_error`.

| Tipo                           | Descripción                                                                                                            |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| `api_connection_error`         | Error al establecer la conexión con la API de Stripe                                                                   |
| `authentication_error`         | Error al realizar el flujo de autenticación dentro de los componentes integrados de Connect                            |
| `account_session_create_error` | Error al crear la sesión de la cuenta                                                                                  |
| `invalid_request_error`        | La solicitud ha fallado con un código de estado 4xx, generalmente debido a problemas de configuración de la plataforma |
| `rate_limit_error`             | La petición ha fallado porque se ha detectado una tasa de peticiones anormal                                           |
| `render_error`                 | Error al renderizar el componente, generalmente causado por extensiones de navegador o problemas de red                |
| `api_error`                    | Errores de API que abarcan cualquier otro tipo de problema, como un problema temporal en los servidores de Stripe.     |

#### Interfaz de usuario para errores de carga

En la mayoría de los casos, los componentes incrustados muestran un mensaje de error cuando no se cargan, por lo que no es necesario hacer esto. Puedes usar un controlador de errores de carga para análisis o para otros elementos de tu sitio a los que podría afectar un error de carga.

Sin embargo, los componentes incrustados no procesan ningún mensaje para los errores que se producen antes de invocar la devolución de llamada [onLoaderStart](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#reacting-to-component-display), porque eso significa que no han procesado ninguna interfaz de usuario en absoluto. En ese caso, el código debe representar la interfaz de usuario de error.

## Detecta la visualización de los componentes integrados

Después de crear un componente, no se muestra ninguna interfaz de usuario a los usuarios hasta que el javascript del componente se carga y analiza en el navegador. Esto puede hacer que los componentes aparezcan después de completar la carga. Para evitarlo, muestra tu propia interfaz de usuario de carga antes de crear el componente y ocúltala después de que se muestre el componente. Todos los componentes integrados pueden aceptar una función de devolución de llamada a la que se llama inmediatamente cuando se muestra al usuario cualquier interfaz de usuario (incluidos los indicadores de carga).

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

| Método             | Descripción                                                                                                                                                  | Variables                                                                                                        |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| `setOnLoaderStart` | El componente ejecuta esta función de devolución de llamada cuando se muestra al usuario cualquier interfaz de usuario (incluidos los indicadores de carga). | - `event.elementTagName`: El nombre de la etiqueta HTML utilizada para representar el componente en el navegador |

#### React

| Propiedad de React | Descripción                                                                                                                                                  | Variables                                                                                                        |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| `onLoaderStart`    | El componente ejecuta esta función de devolución de llamada cuando se muestra al usuario cualquier interfaz de usuario (incluidos los indicadores de carga). | - `event.elementTagName`: El nombre de la etiqueta HTML utilizada para representar el componente en el navegador |

## Utiliza Connect.js sin npm

Recomendamos la integración con nuestros [contenedores de componentes de javascript](https://github.com/stripe/connect-js) y [de React](https://github.com/stripe/react-connect-js), que simplifican la carga de los componentes integrados de Connect y proporcionan definiciones de TypeScript para nuestras interfaces compatibles. Si tu sistema de compilación actualmente no admite la dependencia de paquetes, puedes realizar la integración sin estos paquetes.

Añade manualmente la etiqueta de script Connect.js al `<head>` de cada página de tu sitio.

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

Después de que Connect.js termine de cargarse, inicializa la ventana global variable `StripeConnect` y llama a `StripeConnect.onLoad`, si está definida. Puedes inicializar Connect.js de forma segura configurando una función `onload` y llamando a `StripeConnect.init` con las mismas[ opciones de Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) que `loadConnectAndInitialize`. Puedes usar la instancia de Connect devuelta por `init` de la misma manera que usas la instancia devuelta por `loadConnectAndInitialize` para crear componentes embebidos en una [integración de HTML + JS.](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);
};
```

## 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](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)). 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](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Recomendamos implementar 2FA o medidas de seguridad equivalentes como una [práctica recomendada](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). 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](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Componentes que requieren autenticación

La autenticación incluye una ventana emergente propiedad de Stripe. La cuenta conectada debe autenticarse antes de poder continuar con su flujo de trabajo.

Los siguientes componentes requieren que las cuentas conectadas se autentiquen en determinadas situaciones:

- [Onboarding de la cuenta](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Gestión de cuentas](https://docs.stripe.com/connect/supported-embedded-components/account-management.md)
- [Saldos](https://docs.stripe.com/connect/supported-embedded-components/balances.md)
- [Transferencias](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)
- [Banner de notificaciones](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md)
- [Cuenta financiera](https://docs.stripe.com/connect/supported-embedded-components/financial-account.md)
- [Lista de tarjetas de Issuing](https://docs.stripe.com/connect/supported-embedded-components/issuing-cards-list.md)

## Prácticas recomendadas de rendimiento

Para asegurarte de que el tiempo de carga de los componentes integrados de Connect sea lo más corto posible, sigue estas recomendaciones:

- **Llama a `loadConnectAndInitialize` lo antes posible en tu flujo**.
- **Crear una única instancia de conexión**: crea una única instancia de conexión llamando únicamente`loadConnectAndInitialize` una vez por sesión. Luego vuelve a usar esa instancia para crear y gestionar varios componentes. Un error común es crear una instancia de conexión por componente o varias instancias de conexión por sesión. Esto provoca un consumo adicional de recursos y solicitudes de API. Si usas React, puedes usar una biblioteca de gestión de estados o un contexto de React para gestionar esta instancia.
- **Usa la última versión de los SDK adecuados**: Utiliza la última versión de los SDK de los paquetes de npm [connect-js](https://www.npmjs.com/package/@stripe/connect-js) o [react-connect-js](https://www.npmjs.com/package/@stripe/react-connect-js). Estos SDK inician los componentes integrados de una manera que maximiza el rendimiento. Se han añadido mejoras de rendimiento a los SDK, por lo que te recomendamos que actualices si estás usando una versión antigua.
- **Carga el script `connect.js` lo antes posible en tu flujo**: El primer lugar posible para cargar el script es con la inclusión de este script en tu `head` HTML. También puedes usar el comportamiento predeterminado de nuestros SDK de paquetes de npm, que lo cargan cuando el JavaScript de tu página se carga por primera vez.

## Configurar Stripe Connect [Lado del cliente] [Lado del servidor]

Stripe utiliza una [AccountSession](https://docs.stripe.com/api/account_sessions.md) 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* (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) 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)

Tu aplicación debe iniciar una solicitud a tu servidor para obtener la sesión de la cuenta. Puedes crear un nuevo punto de conexión en tu servidor que devuelva el secreto de cliente a la aplicación:

#### 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
```

### Crear una API Account Session

La [API para Crear sesión de cuenta](https://docs.stripe.com/api/account_sessions/create.md) determina el acceso a componentes y funciones para los componentes incrustados de Connect. Stripe aplica estos parámetros para todos los componentes que correspondan a la sesión de la cuenta. Si tu aplicación admite varias funciones de usuario, asegúrate de que los componentes y funciones que estén habilitados para esa sesión de cuenta correspondan a la función del usuario actual. Por ejemplo, puedes habilitar la [gestión de reembolsos](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) solo para los administradores de tu sitio, pero no para otros usuarios. Para garantizar que se apliquen los accesos de las funciones de usuario, debes asignar la función de usuario de tu sitio a los componentes de sesión de la cuenta.

### Instala el SDK de StripeConnect (Client)

El [SDK para iOS de Stripe](https://github.com/stripe/stripe-ios) es de código abierto, está [plenamente documentado](https://stripe.dev/stripe-ios/index.html) y es compatible con aplicaciones que admiten iOS 15 o posterior.

#### Administrador de paquetes Swift

Para instalar el SDK, sigue estos pasos:

1. En Xcode, elige **Archivo** > **Añadir dependencias de paquetes…** e introduce `https://github.com/stripe/stripe-ios-spm` como la URL del repositorio.
1. Selecciona el número de versión más reciente en nuestra [página de versiones](https://github.com/stripe/stripe-ios/releases).
1. Añade el producto **StripeConnect** al [objetivo de tu aplicación](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app).

#### CocoaPods

1. Si aún no lo has hecho, instala la última versión de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Si no tienes un [Podfile](https://guides.cocoapods.org/syntax/podfile.html), ejecuta el siguiente comando para crear uno:
   ```bash
   pod init
   ```
1. Añade esta línea a tu `Podfile`:
   ```podfile
   pod 'StripeConnect'
   ```
1. Ejecuta el siguiente comando:
   ```bash
   pod install
   ```
1. De ahora en adelante, no olvides usar el archivo `.xcworkspace` en lugar del archivo `.xcodeproj` para abrir tu proyecto en Xcode.
1. En el futuro, para actualizar a la última versión del SDK, ejecuta lo siguiente:
   ```bash
   pod update StripeConnect
   ```

#### Carthage

1. Si aún no lo has hecho, instala la última versión de [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Añade esta línea a tu `Cartfile`:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Sigue las [instrucciones de instalación de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Asegúrate de incrustar todos los frameworks obligatorios enumerados [aquí](https://github.com/stripe/stripe-ios/tree/master/StripeConnect#manual-linking).
1. En el futuro, para actualizar a la última versión del SDK, ejecuta el siguiente comando:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Plataforma manual

1. Ve a nuestra [página de versiones de GitHub](https://github.com/stripe/stripe-ios/releases/latest) y descarga y descomprime **Stripe.xcframework.zip**.
1. Arrastra **StripeConnect.xcframework** a la sección **Binarios incrustados** de la configuración **General** de tu proyecto en Xcode. Asegúrate de seleccionar **Copiar elementos si es necesario**.
1. Repite el paso 2 para todos los frameworks obligatorios enumerados [here](https://github.com/stripe/stripe-ios/tree/master/StripeConnect#manual-linking).
1. En el futuro, para actualizar a la última versión de nuestro SDK, repite los pasos 1 a 3.

> Para obtener más información sobre la versión más reciente y sobre versiones anteriores del SDK, consulta la página [Versiones](https://github.com/stripe/stripe-ios/releases) en GitHub. Para recibir notificaciones cuando se publica una nueva versión, [consulta las versiones](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) del repositorio.

### Configurar la autorización de la cámara (Client-side)

El SDK para iOS de Stripe Connect necesita acceso a la cámara del dispositivo para capturar documentos de identidad. Para permitir que tu aplicación solicite permisos de cámara, haz lo siguiente:

1. Abre la **Info.plist** de tu proyecto en Xcode.
1. Añade la clave `NSCameraUsageDescription`.
1. Añade un valor de cadena que explique a los usuarios por qué la aplicación requiere permisos de cámara, por ejemplo:

> Esta aplicación utiliza la cámara para hacer una foto de tus documentos de identidad.

Consulta la [documentación de Apple](https://developer.apple.com/documentation/avfoundation/cameras_and_media_capture/requesting_authorization_for_media_capture_on_ios) para obtener más información sobre cómo solicitar la autorización de la cámara.

### Inicializa EmbeddedComponentManager (Client)

Selecciona tu clave publicable usando `StripeAPI.shared` y crea una instancia de un[EmbeddedComponentManager](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager) con un cierre que recupera el secreto de cliente llamando al nuevo punto de conexión que has creado en tu servidor. Para crear un componente, solicita el método de creación adecuado en el `EmbeddedComponentManager` que has puesto antes como ejemplo.

La [activación de cuentas](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) devuelve un controlador que gestiona su propia presentación. Otros componentes, como[Payments](https://docs.stripe.com/connect/supported-embedded-components/payments.md) devuelve un[UIViewController](https://developer.apple.com/documentation/uikit/uiviewcontroller) que puedes mostrar en tu aplicación con más flexibilidad.

#### 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 [Lado del cliente]

[Consulta la documentación de referencia :external:](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/init\(apiClient:appearance:fonts:fetchClientSecret:\)).

### Personaliza el aspecto de los componentes integrados de Connect

El [conjunto de herramientas de interfaz de usuario Figma para componentes incorporados](https://www.figma.com/community/file/1438614134095442934) 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.

Ofrecemos un [conjunto de opciones](https://docs.stripe.com/connect/embedded-appearance-options.md) para personalizar el aspecto de los componentes integrados de Connect. Estas personalizaciones afectan los botones, los iconos y otros acentos de nuestro sistema de diseño.

> #### Ventanas emergentes necesarias
> 
> Algunos comportamientos de los componentes integrados, como la [autenticación de usuarios](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), deben presentarse en una vista web autenticada. No se puede personalizar el componente incrustado para eliminar dichas WebViews.

Puedes establecer estas opciones con [EmbeddedComponentManager.Appearance](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/appearance) al inicializar `EmbeddedComponentManager`.

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

Los colores de apariencia que utilizan [proveedores dinámicos](https://developer.apple.com/documentation/uikit/uicolor/3238041-init) se aplican automáticamente al componente integrado de Connect cuando se actualiza su [UITraitCollection](https://developer.apple.com/documentation/uikit/uitraitcollection), incluyendo el [modo oscuro](https://developer.apple.com/design/human-interface-guidelines/dark-mode) y el [contraste de accesibilidad](https://developer.apple.com/documentation/uikit/uiaccessibilitycontrast). La apariencia predeterminada no incluye colores en modo oscuro; por lo tanto, debes especificar una apariencia con colores dinámicos en `EmbeddedComponentManager` para aceptar el modo oscuro en tu aplicación.

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 su [UITraitCollection](https://developer.apple.com/documentation/uikit/uitraitcollection).

 Consulta la [lista completa de opciones de apariencia](https://docs.stripe.com/connect/embedded-appearance-options.md) en iOS.

### Usar fuentes personalizadas

Si usas fuentes personalizadas en tu aplicación (por ejemplo, de archivos `.otf` o `.tff` incrustados en el binario de tu aplicación), debes especificar los archivos de fuente en un [CustomFontSource](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource) pasado al argumento `fonts` al inicializar `EmbeddedComponentManager`. Esto da a los componentes incrustados de Connect acceso a los archivos de fuentes para reproducir correctamente las fuentes.

Las fuentes especificadas en `appearance` deben usar una [fuente de sistema compatible](https://developer.apple.com/fonts/system-fonts/) o una [CustomFontSource](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource) que se haya pasado al `EmbeddedComponentManager` en el momento de la inicialización para que se represente correctamente.

[Consulta la documentación de referencia :external:](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource).

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

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

manager.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* (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) 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.

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

## Localización

Los componentes integrados de Connect aceptan las siguientes configuraciones regionales:

| Idioma                           | Có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](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)). 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](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Recomendamos implementar 2FA o medidas de seguridad equivalentes como una [práctica recomendada](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). 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](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Componentes que requieren autenticación

A las cuentas conectadas se les mostrará un [WebView](https://developer.apple.com/documentation/authenticationservices/aswebauthenticationsession) 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](https://dashboard.stripe.com/account/applications/settings) y no utiliza tu aspecto personalizado ni las fuentes del [Administrador de componentes integrados](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) hasta que se completa la autenticación.

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

- [Onboarding de la cuenta](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Transferencias](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Gestionar los errores de carga [Lado del cliente]

Responde a los fallos de cargar del componente implementando el método de escucha `onLoadError` del componente.

Es posible que distintas causas de error llamen al método `onLoadError` varias veces, por lo que cualquier lógica activada por el `onLoadError` debe ser idempotente.

#### 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)'")
    }
}
```

## Configurar Stripe Connect [Lado del cliente] [Lado del servidor]

Stripe utiliza una [AccountSession](https://docs.stripe.com/api/account_sessions.md) 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* (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) 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)

Tu aplicación debe iniciar una solicitud a tu servidor para obtener la sesión de la cuenta. Puedes crear un nuevo punto de conexión en tu servidor que devuelva el secreto de cliente a la aplicación:

#### 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
```

### Crear una API Account Session

La [API para Crear sesión de cuenta](https://docs.stripe.com/api/account_sessions/create.md) determina el acceso a componentes y funciones para los componentes incrustados de Connect. Stripe aplica estos parámetros para todos los componentes que correspondan a la sesión de la cuenta. Si tu aplicación admite varias funciones de usuario, asegúrate de que los componentes y funciones que estén habilitados para esa sesión de cuenta correspondan a la función del usuario actual. Por ejemplo, puedes habilitar la [gestión de reembolsos](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) solo para los administradores de tu sitio, pero no para otros usuarios. Para garantizar que se apliquen los accesos de las funciones de usuario, debes asignar la función de usuario de tu sitio a los componentes de sesión de la cuenta.

### Instala el SDK de StripeConnect (Client)

El [SDK para Android de Stripe](https://github.com/stripe/stripe-android) es de código abierto y está [completamente documentado](https://stripe.dev/stripe-android/).

Para instalar el SDK, añade `connect` al bloque `dependencies` de tu archivo [app/build.gradle](https://developer.android.com/studio/build/dependencies):

#### Kotlin

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

android { ... }

dependencies {
  // ...

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

> Para conocer detalles de la última versión y de versiones anteriores del SDK, consulta la página [Versiones](https://github.com/stripe/stripe-android/releases) de GitHub. Para recibir una notificación cuando se publique una nueva versión, [mira las versiones del repositorio](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

### Inicializa EmbeddedComponentManager (Client)

Crea una instancia de un [EmbeddedComponentManager](https://stripe.dev/stripe-android/connect/com.stripe.android.connect/-embedded-component-manager/index.html) 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.

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

Para crear un componente, primero solicita el `EmbeddedComponentManager.onActivityCreate()` en el método de tu actividad `onCreate`. Luego, solicita el método de creación adecuado en el`EmbeddedComponentManager` que has puesto antes como ejemplo.

La[activación de cuentas](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) devuelve un controlador que gestiona su propia presentación. Otros componentes, como[Payments](https://docs.stripe.com/connect/supported-embedded-components/payments.md) devuelve una [vista](https://developer.android.com/reference/android/view/View) que puedes mostrar en tu aplicación con más flexibilidad.

#### Reproducción de un controlador

#### 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()
    }
}
```

#### Reproducción de `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 [Lado del cliente]

[Consulta la documentación de referencia :external:](https://stripe.dev/stripe-android/connect/com.stripe.android.connect/-embedded-component-manager/index.html).

### Personaliza el aspecto de los componentes integrados de Connect

El [conjunto de herramientas de interfaz de usuario Figma para componentes incorporados](https://www.figma.com/community/file/1438614134095442934) 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.

Ofrecemos un [conjunto de opciones](https://docs.stripe.com/connect/embedded-appearance-options.md) para personalizar el aspecto de los componentes integrados de Connect. Estas personalizaciones afectan los botones, los iconos y otros acentos de nuestro sistema de diseño.

> #### Ventanas emergentes necesarias
> 
> Algunos comportamientos de los componentes integrados, como la [autenticación de usuarios](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), deben presentarse en una vista web autenticada. No se puede personalizar el componente incrustado para eliminar dichas WebViews.

Puedes establecer estas opciones usando [Appearance](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance/-appearance/index.html) al inicializar `EmbeddedComponentManager`.

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

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](https://support.google.com/accessibility/android/answer/11183305?sjid=3094445894544346025-NA#fontsize) del usuario.

 Consulta la [lista completa de opciones de apariencia](https://docs.stripe.com/connect/embedded-appearance-options.md?platform=android) 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](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html) 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](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html) especificado en `EmbeddedComponentManager` en la inicialización para renderizarse correctamente.

[Consulta la documentación de referencia :external:](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html).

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

#### Kotlin

```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* (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) 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.

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

## Localización

Los componentes integrados de Connect aceptan las siguientes configuraciones regionales:

| Idioma                           | Có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](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)). 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](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Recomendamos implementar 2FA o medidas de seguridad equivalentes como una [práctica recomendada](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). 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](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Componentes que requieren autenticación

A las cuentas conectadas se les mostrará un [WebView](https://developer.chrome.com/docs/android/custom-tabs) 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](https://dashboard.stripe.com/account/applications/settings) y no utiliza tu aspecto personalizado ni las fuentes del [Administrador de componentes integrados](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) 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](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Transferencias](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Gestionar los errores de carga [Lado del cliente]

Responde a los fallos de cargar del componente implementando el método de escucha `onLoadError` del componente.

Es posible que distintas causas de error llamen al método `onLoadError` varias veces, por lo que cualquier lógica activada por el `onLoadError` debe ser idempotente.

#### 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}")
        }
    }
}
```

## Configurar Stripe Connect [Lado del cliente] [Lado del servidor]

Stripe utiliza una [AccountSession](https://docs.stripe.com/api/account_sessions.md) 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* (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) 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)

Tu aplicación debe iniciar una solicitud a tu servidor para obtener la sesión de la cuenta. Puedes crear un nuevo punto de conexión en tu servidor que devuelva el secreto de cliente a la aplicación:

#### 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
```

### Crear una API Account Session

La [API para Crear sesión de cuenta](https://docs.stripe.com/api/account_sessions/create.md) determina el acceso a componentes y funciones para los componentes incrustados de Connect. Stripe aplica estos parámetros para todos los componentes que correspondan a la sesión de la cuenta. Si tu aplicación admite varias funciones de usuario, asegúrate de que los componentes y funciones que estén habilitados para esa sesión de cuenta correspondan a la función del usuario actual. Por ejemplo, puedes habilitar la [gestión de reembolsos](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) solo para los administradores de tu sitio, pero no para otros usuarios. Para garantizar que se apliquen los accesos de las funciones de usuario, debes asignar la función de usuario de tu sitio a los componentes de sesión de la cuenta.

### Instala el Stripe React Native SDK (Client)

Instala el SDK Stripe React Native con npm o hilo:

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

### Inicializa StripeConnectProvider (Client)

Concluye tu solicitud de acceso con `ConnectComponentsProvider` y proporciona tu clave publicable junto con una función que recupere un secreto de cliente llamando al nuevo punto de conexión que creaste en tu servidor.

```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>
  );
}
```

Para usar un componente incrustado, impórtalo y preséntalo dentro del `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 [Lado del cliente]

[Consulta la documentación de referencia :external:](https://stripe.dev/stripe-react-native/api-reference/types/StripeConnectInitParams.html).

### Personaliza el aspecto de los componentes integrados de Connect

El [conjunto de herramientas de interfaz de usuario Figma para componentes incorporados](https://www.figma.com/community/file/1438614134095442934) 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.

Ofrecemos un [conjunto de opciones](https://docs.stripe.com/connect/embedded-appearance-options.md) para personalizar el aspecto de los componentes integrados de Connect. Estas personalizaciones afectan los botones, los iconos y otros acentos de nuestro sistema de diseño.

> #### Ventanas emergentes necesarias
> 
> Algunos comportamientos de los componentes integrados, como la [autenticación de usuarios](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), deben presentarse en una vista web autenticada. No se puede personalizar el componente incrustado para eliminar dichas WebViews.

Puedes personalizar la apariencia de los componentes incrustados de Connect pasando una opción de `apariencia` para`loadConnectAndInitialize`.

```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>
  );
}
```

Véase la [ lista completa de opciones de apariencia](https://docs.stripe.com/connect/embedded-appearance-options.md?platform=react-native) para React Native.

### Usar fuentes personalizadas

Si usas fuentes personalizadas en tu app (por ejemplo, de `.otf` o`.ttf` incrustadas en tu app), debes especificar los archivos de fuente en un`CustomFontSource` pasados a la opción `customFonts` al llamar a `loadConnectAndInitialize`. Esto da a los componentes incrustados de Connect acceso a los archivos de fuentes para reproducir correctamente las fuentes.

Las fuentes especificadas en `apariencia` deben usar un `CustomFontSource` pasado a`loadConnectAndInitialize` al inicializarse para que se reproduzcan correctamente.

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

El método `actualizado` soporta la actualización de los componentes incrustados de Connect tras la inicialización. Puedes usarlo para cambiar las opciones de apariencia durante el tiempo de ejecución. Para ello, usa el mismo objeto `stripeConnectInstance` con el que creaste `loadConnectAndInitialize` y llama al método de `update` actualización eb él:

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

## 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* (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) 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.

```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>
  );
}
```

## Localización

Los componentes integrados de Connect aceptan las siguientes configuraciones regionales:

| Idioma                           | Có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](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)). 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](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Recomendamos implementar 2FA o medidas de seguridad equivalentes como una [práctica recomendada](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). 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](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Componentes que requieren autenticación

A las cuentas conectadas se les mostrará un  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](https://dashboard.stripe.com/account/applications/settings) y no utiliza tu aspecto personalizado ni las fuentes del [Administrador de componentes integrados](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) hasta que se completa la autenticación.

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

- [Onboarding de la cuenta](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Transferencias](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Gestionar los errores de carga [Lado del cliente]

Responde a los fallos de cargar del componente implementando el método de escucha `onLoadError` del componente.

Es posible que distintas causas de error llamen al método `onLoadError` varias veces, por lo que cualquier lógica activada por el `onLoadError` debe ser idempotente.

#### 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} />;
}
```

## Solicita acceso (Private preview)

Inicia sesión para solicitar acceso a los componentes integrados de Connect para React Native en la versión beta privada. Si no tienes una cuenta de Stripe, puedes [registrarte ahora](https://dashboard.stripe.com/register).