# Premiers pas avec les composants intégrés Connect

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

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

Pour une version immersive de ce guide, consultez le [guide de démarrage rapide sur l’intégration des composants intégrés Connect](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md). Vous pouvez également télécharger un exemple d’intégration depuis ce guide. Pour personnaliser l’apparence des composants intégrés Connect, utilisez les options `appearance` lorsque vous initialisez `StripeConnectInstance`. Consultez la [liste complète des paramètres d’apparence](https://docs.stripe.com/connect/customize-connect-embedded-components.md) dans la section dédiée.

## Initialiser Connect.js [Côté client] [Côté serveur]

Stripe utilise une [AccountSession](https://docs.stripe.com/api/account_sessions.md) pour exprimer votre intention de déléguer API accès à votre compte connecté.

L’API AccountSessions renvoie une *clé secrète du client* (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) qui permet à un composant intégré d’accéder aux ressources d’un compte connecté comme si vous faisiez des appels à l’API pour ces derniers.

### Créer une AccountSession (Serveur)

Par le biais d’un formulaire d’une page, votre client émet une demande pour obtenir la session de compte de votre serveur. Vous pouvez créer un nouveau endpoint sur votre serveur qui renvoie la clé secrète du client au navigateur :

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = client.v1.account_sessions.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
```

### API Create Account Session

L’[API Create Account Session](https://docs.stripe.com/api/account_sessions/create.md) détermine l’accès aux composants et aux fonctionnalités des composants Connect intégrés. Stripe applique ces paramètres à tous les composants correspondant à la session du compte. Si votre site prend en charge plusieurs rôles d’utilisateur, vérifiez que les composants et fonctionnalités activés pour cette session de compte correspondent au rôle de l’utilisateur actuel.  Par exemple, vous pouvez activer la [gestion des remboursements](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) uniquement pour les administrateurs de votre site, mais pas pour les autres utilisateurs. Pour vérifier que les accès aux rôles d’utilisateur sont appliqués, vous devez mapper le rôle d’utilisateur de votre site aux composants de session de compte.

### Configurer Connect.js (Client)

Nous recommandons de configurer Connect.js avec npm comme indiqué dans l’exemple suivant, mais c’est également possible [sans npm](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#without-npm).

#### HTML + JS

Installez le [paquet NPM](https://github.com/stripe/connect-js) pour utiliser Connect.js en tant que module.

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

#### React

Installez les bibliothèques Connect.js et React Connect.js à partir du [registre public npm](https://www.npmjs.com/package/@stripe/react-connect-js).

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

### Charger et initialiser Connect.js (Client)

Appelez `loadConnectAndInitialize` avec votre clé publique et une fonction qui récupère une clé secrète en appelant le nouveau point de terminaison que vous avez créé sur votre serveur. Utilisez la `StripeConnectInstance` renvoyé pour créer des composants intégrés. Après avoir initialisé Connect.js, vous pouvez monter des composants sur le DOM ou les démonter à tout moment. Cela inclut tous les éléments affichés dans les portails React ou Vue.

#### HTML + JS

Pour créer un composant, appelez `create` sur la `StripeConnectInstance` que vous avez créée ci-dessus, puis passez le nom du composant. Cela renvoie un [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) que Connect.js enregistre et utilise pour connecter automatiquement votre DOM à Stripe. Vous pouvez alors `append` cet élément à votre DOM.

Appelez `create` avec `payments`, puis ajoutez le résultat à votre DOM pour afficher une interface utilisateur de paiement.

#### React

Pour utiliser les composants intégrés Connect avec des wrappers React, incluez votre application dans un `ConnectComponentsProvider` et transmettez la `StripeConnectInstance` que vous avez précédemment créé.

Utilisez `ConnectPayments` sur votre page pour afficher une interface de paiement.

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

[Voir la liste complète des composants embarqués pris en charge →](https://docs.stripe.com/connect/supported-embedded-components.md)

## Configure Connect.js [Côté client]

La méthode `loadConnectAndInitialize` sur le client prend plusieurs options différentes pour configurer Connect.js.

| Option              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |             |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `publishableKey`    | La [clé publiable](https://docs.stripe.com/keys.md) de votre intégration.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | obligatoire |
| `fetchClientSecret` | La fonction qui récupère la *clé secrète du client* (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) renvoyée par `/v1/account_sessions`. Cela indique à `StripeConnectInstance` à quel compte déléguer l’accès. Cette fonction est également utilisée pour récupérer une fonction secrète client afin d’actualiser la session à son expiration. `fetchClientSecret` doit toujours créer une nouvelle session de compte et renvoyer un nouveau `client_secret`.                                          | obligatoire |
| `appearance`        | Objet permettant de personnaliser l’apparence des composants Connect intégrés.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Facultatif  |
| `locale`            | Paramètre permettant de spécifier les paramètres [locale](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#localization) utilisés par les composants Connect intégrés. Par défaut, ce paramètre est défini sur la langue du navigateur. Si les paramètres régionaux spécifiés ne sont pas directement pris en charge, une alternative raisonnable est utilisée (par exemple, `fr-be` peut se rabattre sur `fr-fr`). Reportez-vous à la section [localisation](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#localization) pour obtenir la liste des paramètres régionaux pris en charge. | Facultatif  |
| `fonts`             | Un tableau de polices personnalisées pouvant être utilisées par tout composant intégré créé à partir d’une `StripeConnectInstance`. Les polices peuvent être spécifiées en tant qu’objets [CssFontSource](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#css-font-source) ou [CustomFontSource](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#custom-font-source).                                                                                                                                                                                                                     | Facultatif  |

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

La [boîte à outils de composants intégrés d’interface utilisateur Figma](https://www.figma.com/community/file/1438614134095442934) contient tous les composants, les modèles courants et un exemple d’application. Vous pouvez l’utiliser pour visualiser et concevoir des interfaces utilisateur intégrées sur votre site Web.

Nous proposons un [ensemble d’options](https://docs.stripe.com/connect/embedded-appearance-options.md) permettant de personnaliser l’apparence des composants intégrés Connect. Ces personnalisations affectent les boutons, les icônes et d’autres accents de notre système de conception.

> #### Fenêtres contextuelles nécessaires
> 
> Certains comportements dans les composants intégrés, tels que l’[authentification de l’utilisateur](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), doivent être présentés dans une fenêtre contextuelle. Vous ne pouvez pas personnaliser le composant intégré pour éliminer ces fenêtres contextuelles.

Vous pouvez définir ces options lors de l’initialisation de `StripeConnectInstance` en transmettant une apparence à l’objet `appearance`. Vous pouvez uniquement utiliser les [options Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) pour modifier les styles dans les composants Connect intégrés. La famille de polices et la couleur d’arrière-plan des composants intégrés Connect sont héritées du conteneur HTML parent. Vous devez définir explicitement toutes les autres options.

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

Reportez-vous à la [liste complète des variables d’apparence](https://docs.stripe.com/connect/embedded-appearance-options.md).

### L’objet fonts

L’objet `fonts` dans `stripeConnect.initialize` prend un tableau d’objets [CssFontSource](https://docs.stripe.com/js/appendix/css_font_source_object) ou [CustomFontSource](https://docs.stripe.com/js/appendix/custom_font_source_object).

Si vous utilisez des polices personnalisées sur votre page (par exemple, des fichiers `.woff` ou `.tff`), vous devez spécifier les fichiers de polices lors de l’initialisation des composants intégrés Connect. Cela permet aux composants intégrés Connect d’afficher correctement les polices. Vous pouvez spécifier les fichiers comme suit&nbsp;:

#### CssFontSource

Utilisez cet objet pour transmettre l’URL d’une feuille de style qui définit vos polices personnalisées lors de la création d’une `StripeConnectInstance`. Avec un objet `CssFontSource`, votre [configuration CSP](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#csp-and-http-header-requirements) doit permettre d’extraire les domaines associés aux URL des fichiers CSS spécifiés en tant que CssFontSource.

| Nom      | Type              | Exemple de valeur                                   |
| -------- | ----------------- | --------------------------------------------------- |
| `cssSrc` | chaîne `required` | `https://fonts.googleapis.com/css?family=Open+Sans` | Une URL relative ou absolue pointant vers un fichier CSS avec des définitions de [@font-face](https://developer.mozilla.org/en/docs/Web/CSS/@font-face). Le fichier doit être hébergé sur sur un serveur https. Si vous utilisez une [politique de sécurité du contenu](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), des [directives supplémentaires](https://docs.stripe.com/security/guide.md#content-security-policy) peuvent s’appliquer au fichier. |

#### CustomFontSource

Utilisez cet objet pour transmettre des polices personnalisées lors de la création d’une `StripeConnectInstance`.

| Nom            | Type              | Exemple de valeur                               |
| -------------- | ----------------- | ----------------------------------------------- |
| `family`       | chaîne `required` | `Avenir`                                        | Le nom à attribuer à la police.                                                                                                                                                                                                                                                                        |
| `src`          | chaîne `required` | `url(https://my-domain.com/assets/avenir.woff)` | Une valeur [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) valide pointant vers votre fichier de polices personnalisées. Il s’agit généralement (mais pas toujours) d’un lien vers un fichier `.woff`, `.otf` ou `.svg`. Le fichier doit être hébergé sur sur un serveur https. |
| `display`      | chaîne `optional` | `auto`                                          | Une valeur [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) valide.                                                                                                                                                                                            |
| `style`        | chaîne `optional` | `normal`                                        | L’une des valeurs suivantes&nbsp;: `normal`, `italic`, ou `oblique`.                                                                                                                                                                                                                                   |
| `unicodeRange` | chaîne `optional` | `U+0-7F`                                        | Valeur valide [unicode-range](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range).                                                                                                                                                                                              |
| `weight`       | chaîne `optional` | `400`                                           | Un [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) valide. Il s’agit d’une chaîne de caractères et non d’un nombre.                                                                                                                                                        |

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

La méthode `update` prend en charge la mise à jour des composants Connect Embedded après l’initialisation. Vous pouvez l’utiliser pour changer d’option d’apparence au moment de l’exécution (sans actualiser la page). Pour ce faire, utilisez le même objet `stripeConnectInstance` que vous avez créé avec `initialize` et appelez la méthode `update` sur celui-ci&nbsp;:

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

> Toutes les options (par exemple, `fonts`) ne peuvent pas être mises à jour. Les options prises en charge pour cette méthode sont un sous-ensemble des options proposées dans `initialize`. Les modifications de `appearance` et `locale` sont prises en charge.

### Largeur et hauteur

Les composants intégrés Connect se comportent comme des éléments HTML `block` ordinaires. Par défaut, ils prennent 100&nbsp;% de la valeur `width` de leur élément HTML parent, et grandissent en hauteur en fonction du contenu rendu à l’intérieur. Vous pouvez contrôler la valeur `width` des composants Connect Embedded en spécifiant la valeur `width` du parent HTML. Vous ne pouvez pas contrôler directement le paramètre `height`, car il dépend du contenu rendu. Cependant, vous pouvez limiter la hauteur avec `maxHeight` et `overflow: scroll`, de la même manière que vous pouvez le faire avec d’autres éléments HTML `block`.

## Authentification

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

### Actualiser la clé secrète du client

Sur les sessions de longue durée, la session du *secret client* (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) peut expirer. Lorsqu’il expire, nous utilisons automatiquement `fetchClientSecret` pour récupérer une nouvelle clé secrète client et actualiser la session. Vous n’avez pas besoin de transmettre de paramètres supplémentaires.

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

### Se déconnecter

Nous vous recommandons d’appeler `logout` sur `stripeConnectInstance` pour détruire l’objet de session de compte associé une fois qu’un utilisateur se déconnecte de l’application. Cela désactive tous les composants Connect Embedded qui sont liés à cette `stripeConnectInstance`.

> #### Fenêtres contextuelles nécessaires
> 
> N’appelez le `logout` que lorsque votre utilisateur se déconnecte de votre application. Ne le faites pas lorsqu’un composant est démonté (lors de la navigation vers une autre page ou de la fermeture de la page) ou lorsque vous chargez d’autres composants, car cette méthode invalide entièrement la session de compte actuelle et la [session utilisateur Stripe](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#user-authentication-in-connect-embedded-components). Après avoir appelé le `logout`, les composants ne s’affichent plus pour la `stripeConnectInstance` associée.

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

## Exigences relatives aux CSP et aux en-têtes HTTP

Si votre site Web met en œuvre une *politique de sécurité du contenu* (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), vous devez la mettre à jour en ajoutant les règles suivantes&nbsp;:

- `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 d’élément de style vide)

Si vous utilisez un fichier CSS pour charger les [polices Web](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#fonts-object) à utiliser avec des composants Connect intégrés, son URL doit être autorisée par votre politique de sécurité du contenu [connect-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src).

Définir certains [en-têtes de réponse HTTP](https://developer.mozilla.org/en-US/docs/Glossary/Response_header) permet d’activer toutes les fonctionnalités des composants intégrés Connect&nbsp;:

- [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy), `unsafe-none`. `unsafe-none` est la valeur par défaut de l’en-tête. Vous pouvez ne pas le définir. D’autres valeurs, comme `same-origin`, interrompent l’[authentification de l’utilisateur](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components) dans les composants intégrés Connect.

## Navigateurs pris en charge

Nous prenons en charge les mêmes navigateurs que ceux [actuellement pris en charge par le Dashboard Stripe](https://docs.stripe.com/dashboard/basics.md)&nbsp;:

- Les 20&nbsp;dernières versions majeures de Chrome et Firefox
- Les deux dernières versions majeures de Safari et Edge
- Les deux dernières versions majeures de Safari mobile sur iOS

Vous ne pouvez pas utiliser les composants intégrés Connect dans les vues Web intégrées au sein d’applications mobiles ou bureau. Pour utiliser les composants intégrés Connect dans une application mobile, utilisez le SDK [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) ou [React Native](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=react-native).

Si un composant intégré n’est pas encore pris en charge par nos SDK mobiles, nous vous recommandons de créer un lien vers un navigateur Web où vous pourrez afficher les composants intégrés.

## Localisation

Lors de l’initialisation de [Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), vous pouvez transmettre un paramètre `locale`. Pour faire correspondre les paramètres régionaux d’un composant intégré à ceux de votre site Web, transmettez le paramètre `locale` avec les paramètres régionaux de l’interface utilisateur affichée par votre site Web.

La valeur par défaut du paramètre `locale` est déterminée par les paramètres régionaux configurés du navigateur. Si les paramètres régionaux spécifiés ne sont pas directement pris en charge, une alternative raisonnable est utilisée (par exemple, `fr-be` peut se rabattre sur `fr-fr`).

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

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

## Traiter les erreurs de chargement

Si un composant ne parvient pas à se charger, vous pouvez réagir en fournissant un gestionnaire d’erreur de chargement à tout composant intégré. Selon la cause de l’échec, le gestionnaire d’erreur de chargement peut être appelé plusieurs fois. Toute logique déclenchée par un gestionnaire d’erreur de chargement doit être 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

| Moyen de paiement | Description                                                                             | Variables                                                                                                                                                                                                                                                                       |
| ----------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setOnLoadError`  | Le composant exécute cette fonction de rappel lorsqu’un échec de chargement se produit. | - `loadError.error`&nbsp;: voir [l’objet d’erreur de chargement](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)
  - `loadError.elementTagName`&nbsp;: nom de la balise HTML utilisée pour afficher le composant dans le navigateur |

#### React

| Propriété React | Description                                                                             | Variables                                                                                                                                                                                                                                                                       |
| --------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onLoadError`   | Le composant exécute cette fonction de rappel lorsqu’un échec de chargement se produit. | - `loadError.error`&nbsp;: voir [l’objet d’erreur de chargement](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)
  - `loadError.elementTagName`&nbsp;: nom de la balise HTML utilisée pour afficher le composant dans le navigateur |

#### L’objet `error` de chargement

Chaque fois qu’il y a un échec de chargement, un objet `error` est transmis au gestionnaire d’erreur de chargement avec les propriétés suivantes.

| Nom       | Type                                                                                                                           | Exemple de valeur                 |
| --------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- |
| `type`    | Voir [Types d’échec de chargement](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object) | `authentication_error`            | Le type d’erreur                       |
| `message` | chaîne | non défini                                                                                                            | `Failed to fetch account session` | Description supplémentaire de l’erreur |

#### Types d’échec de chargement

Lorsqu’un composant ne parvient pas à se charger, nous détectons le type de défaillance et le faisons correspondre à l’un des types ci-dessous. Si le type d’erreur de chargement ne peut pas être déterminé, il est marqué comme `api_error`.

| Type                           | Description                                                                                                             |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| `api_connection_error`         | Échec de la connexion à l’API Stripe                                                                                    |
| `authentication_error`         | Échec du flux d’authentification dans les composants intégrés Connect                                                   |
| `account_session_create_error` | Échec de la création de la session de compte                                                                            |
| `invalid_request_error`        | La requête a échoué avec un code d’état 4xx, généralement dû à des problèmes de configuration de la plateforme          |
| `rate_limit_error`             | La requête a échoué en raison de la détection d’un taux de requêtes anormal                                             |
| `render_error`                 | Échec du rendu du composant, généralement causé par des extensions de navigateur ou des problèmes de réseau             |
| `api_error`                    | Erreurs d’API couvrant tout autre type de problème, par exemple un problème temporaire au niveau des serveurs de Stripe |

#### Interface utilisateur pour les erreurs de chargement

Dans la plupart des cas, les composants intégrés affichent un message d’erreur lorsqu’ils ne parviennent pas à se charger, vous n’avez donc pas besoin de le faire. Vous pouvez utiliser un gestionnaire d’erreurs de chargement pour les analyses ou pour d’autres composants de votre site qu’une erreur de chargement pourrait affecter.

Toutefois, les composants intégrés n’affichent aucun message pour les erreurs qui se produisent avant l’invocation du rappel [onLoaderStart](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#reacting-to-component-display), car cela signifie qu’ils n’ont pas rendu d’interface utilisateur du tout. Dans ce cas, votre code doit afficher l’interface utilisateur d’erreur.

## Détecter l’affichage de composants intégrés

Après la création d’un composant, aucune interface utilisateur n’est présentée aux utilisateurs tant que le javascript du composant n’est pas chargé et analysé dans le navigateur. De ce fait, les composants peuvent apparaître comme une fenêtre contextuelle une fois leur chargement terminé. Pour éviter cette situation, affichez votre propre interface utilisateur de chargement avant la création du composant et masquez l’interface utilisateur après l’affichage du composant. Tous les composants intégrés peuvent accepter une fonction de rappel qui est appelée immédiatement lorsqu’une interface utilisateur (y compris les indicateurs de chargement) est présentée à l’utilisateur.

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

| Moyen de paiement  | Description                                                                                                                                             | Variables                                                                                                    |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `setOnLoaderStart` | Le composant exécute cette fonction de rappel lorsqu’une interface utilisateur (y compris les indicateurs de chargement) est présentée à l’utilisateur. | - `event.elementTagName`&nbsp;: nom de la balise HTML utilisée pour afficher le composant dans le navigateur |

#### React

| Propriété React | Description                                                                                                                                             | Variables                                                                                                    |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `onLoaderStart` | Le composant exécute cette fonction de rappel lorsqu’une interface utilisateur (y compris les indicateurs de chargement) est présentée à l’utilisateur. | - `event.elementTagName`&nbsp;: nom de la balise HTML utilisée pour afficher le composant dans le navigateur |

## Utiliser Connect.js sans npm

Nous vous recommandons d’effectuer l’intégration avec nos [wrappers de composants React](https://github.com/stripe/react-connect-js) ou [Javascript](https://github.com/stripe/connect-js), qui simplifient le chargement des composants intégrés Connect et fournissent des définitions TypeScript pour nos interfaces prises en charge. Si votre système ne prend pas actuellement en charge les dépendances à des paquets, vous pouvez procéder à l’intégration sans ces paquets.

Ajoutez manuellement la balise de script Connect.js au `<head>` de chaque page de votre site.

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

Une fois le chargement terminé, Connect.js initialise la variable de fenêtre globale `StripeConnect` et appelle `StripeConnect.onLoad`, si elle est définie. Vous pouvez initialiser Connect.js en toute sécurité en configurant une fonction `onload` et en appelant `StripeConnect.init` avec les mêmes [options Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) que `loadConnectAndInitialize`. Vous pouvez utiliser l’instance Connect renvoyée par `init` de la même manière que vous utilisez l’instance renvoyée par `loadConnectAndInitialize` pour créer des composants intégrés dans une [intégration 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);
};
```

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

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

L’authentification est obligatoire pour les comptes connectés pour lesquels Stripe est responsable de la collecte des informations mises à jour lorsque les exigences évoluent. Pour les comptes connectés pour lesquels vous êtes responsable de la collecte des informations mises à jour lorsque les exigences arrivent à échéance ou évoluent, tels que les comptes Custom, l’authentification de Stripe est contrôlée par la fonctionnalité de session de compte [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Nous vous recommandons de mettre en œuvre l’authentification à deux facteurs ou des mesures de sécurité équivalentes à titre de [bonne pratique](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Pour les configurations de compte qui prennent en charge cette fonctionnalité, comme les comptes Custom, vous assumez la responsabilité des comptes connectés s’ils ne sont pas en mesure de rembourser les [soldes négatifs](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Composants nécessitant une authentification

Lors de l’authentification, une boîte de dialogue Stripe s’ouvre. Le compte connecté doit s’identifier avant de pouvoir continuer ses activités.

Dans certains cas, les comptes connectés doivent s’authentifier pour utiliser les composants suivants&nbsp;:

- [Inscription du compte](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Gestion de compte](https://docs.stripe.com/connect/supported-embedded-components/account-management.md)
- [Soldes](https://docs.stripe.com/connect/supported-embedded-components/balances.md)
- [Virements](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)
- [Bannière de notification](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md)
- [Compte financier](https://docs.stripe.com/connect/supported-embedded-components/financial-account.md)
- [Liste des cartes Issuing](https://docs.stripe.com/connect/supported-embedded-components/issuing-cards-list.md)

## Bonnes pratiques en matière de performance

Pour vous assurer que le temps de chargement des composants intégrés Connect est aussi faible que possible, suivez ces recommandations&nbsp;:

- **Appelez `loadConnectAndInitialize` le plus tôt possible dans votre flux**.
- **Créer une instance de connexion unique**&nbsp;: créez une instance de connexion unique en appelant `loadConnect AndInitialize` une seule fois par session. Réutilisez ensuite cette instance pour créer et gérer plusieurs composants. Une erreur courante consiste à créer une instance connect par composant, ou plusieurs instances connect par session. Cela entraîne une consommation supplémentaire de ressources et des requêtes API. Si vous utilisez React, vous pouvez utiliser une bibliothèque de gestion d’état ou un contexte React pour gérer cette instance.
- **Utiliser la dernière version des SDK appropriés**&nbsp;: Utilisez la dernière version des SDK du package npm [connect-js](https://www.npmjs.com/package/@stripe/connect-js) ou [react-connect-js](https://www.npmjs.com/package/@stripe/react-connect-js). Ces SDK initialisent les composants intégrés de manière à optimiser les performances. Des améliorations de performance ont été apportées aux SDK. Nous vous recommandons donc de les mettre à jour si vous utilisez une ancienne version.
- **Chargez le script `connect.js` dès que possible dans votre flux**&nbsp;: La première possibilité de charger le script est de l’inclure dans votre `head` HTML. Vous pouvez également utiliser le comportement par défaut de nos SDK de package npm, qui le chargent lors du premier chargement de votre page JavaScript.

## Configurer StripeConnect [Côté client] [Côté serveur]

Stripe utilise une [AccountSession](https://docs.stripe.com/api/account_sessions.md) pour exprimer votre intention de déléguer API accès à votre compte connecté.

L’API AccountSessions renvoie une *clé secrète du client* (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) qui permet à un composant intégré d’accéder aux ressources d’un compte connecté comme si vous faisiez des appels à l’API pour ces derniers.

### Créer une AccountSession (Serveur)

Votre application doit envoyer une demande à votre serveur pour obtenir la session de compte. Vous pouvez créer un endpoint sur votre serveur qui renvoie la clé secrète client à l’application&nbsp;:

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = client.v1.account_sessions.create({
      account: {{CONNECTED_ACCOUNT_ID}},
      components: {
        account_onboarding: {
          enabled: true,
          features: {
            # We recommend disabling authentication for a better user experience when possible
            disable_stripe_user_authentication: true,
          }
        }
      }
    })

    {
      client_secret: account_session[:client_secret]
    }.to_json
  rescue => error
    puts "An error occurred when calling the Stripe API to create an account session: #{error.message}";
    return [500, { error: error.message }.to_json]
  end
end
```

### API Create Account Session

L’[API Create Account Session](https://docs.stripe.com/api/account_sessions/create.md) détermine l’accès aux composants et aux fonctionnalités des composants Connect intégrés. Stripe applique ces paramètres à tous les composants correspondant à la session du compte. Si votre application prend en charge plusieurs rôles d’utilisateur, vérifiez que les composants et fonctionnalités activés pour cette session de compte correspondent au rôle de l’utilisateur actuel.  Par exemple, vous pouvez activer la [gestion des remboursements](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) uniquement pour les administrateurs de votre site, mais pas pour les autres utilisateurs. Pour vérifier que les accès aux rôles d’utilisateur sont appliqués, vous devez mapper le rôle d’utilisateur de votre site aux composants de session de compte.

### Installer le SDK StripeConnect (Client)

Le [SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-ios/index.html). Il est également compatible avec les applications prenant en charge iOS 15 et les versions ultérieures.

#### Swift Package Manager

Pour installer le SDK, veuillez suivre les étapes ci-dessous&nbsp;:

1. Dans Xcode, sélectionnez **File** > **Add Package Dependencies…** puis saisissez `https://github.com/stripe/stripe-ios-spm` en tant qu’URL du référentiel.
1. Sélectionnez le dernier numéro de version, visible sur notre [page des versions](https://github.com/stripe/stripe-ios/releases).
1. Ajoutez le produit **StripeConnect** à la [cible de votre application](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app).

#### CocoaPods

1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Si vous n’avez pas de fichier [Podfile](https://guides.cocoapods.org/syntax/podfile.html), exécutez la commande suivante pour en créer un&nbsp;:
   ```bash
   pod init
   ```
1. Ajoutez cette ligne à votre `Podfile`&nbsp;:
   ```podfile
   pod 'StripeConnect'
   ```
1. Exécutez la commande suivante&nbsp;:
   ```bash
   pod install
   ```
1. À partir de maintenant, n’oubliez pas d’utiliser le fichier .xcworkspace au lieu du fichier .xcodeproj pour ouvrir votre projet dans Xcode.
1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, il vous suffit d’exécuter&nbsp;:
   ```bash
   pod update StripeConnect
   ```

#### Carthage

1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Ajoutez cette ligne à votre `Cartfile`&nbsp;:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Suivez les [instructions d’installation de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Veillez à intégrer tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripeConnect#manual-linking).
1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, exécutez la commande suivante&nbsp;:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Cadre manuel

1. Accédez à notre [page des versions GitHub](https://github.com/stripe/stripe-ios/releases/latest), puis téléchargez et décompressez **Stripe.xcframework.zip**.
1. Faites glisser **StripeConnect.xcframework** vers la section **Embedded Binaries (Fichiers binaires incorporés)** des paramètres **General (Général)** de votre projet Xcode. Veillez à sélectionner **Copy items if needed (Copier les éléments si nécessaire)**.
1. Répétez l’étape 2 pour tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripeConnect#manual-linking).
1. À l’avenir, pour mettre à jour vers la version la plus récente de notre SDK, répétez les étapes&nbsp;1 à 3.

> Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir une notification lors de la publication d’une nouvelle version, [surveillez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) à partir du référentiel.

### Configurer l’autorisation de l’appareil photo (Client-side)

Le SDK iOS de Stripe Connect nécessite l’accès à l’appareil photo de l’appareil pour capturer des documents d’identité. Pour permettre à votre application de demander l’autorisation d’utiliser l’appareil photo&nbsp;:

1. Ouvrez le fichier **Info.plist** de votre projet dans Xcode.
1. Ajoutez la clé `NSCameraUsageDescription`.
1. Ajoutez une valeur de chaîne qui explique à vos utilisateurs pourquoi votre application nécessite des autorisations de caméra, par exemple&nbsp;:

> Cette application utilise l’appareil photo pour prendre une photo de vos documents d’identité.

Consultez la [documentation d’Apple](https://developer.apple.com/documentation/avfoundation/cameras_and_media_capture/requesting_authorization_for_media_capture_on_ios) pour en savoir plus sur la demande d’accès à l’appareil photo.

### Initialiser EmbeddedComponentManager (Client)

Définissez votre clé publiable en utilisant `StripeAPI.shared` et instanciez un [EmbeddedComponentManager](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager) avec une fermeture qui récupère un client secret en appelant le nouvel endpoint que vous avez créé sur votre serveur. Pour créer un composant, appelez la méthode de création appropriée sur `EmbeddedComponentManager` que vous avez configuré ci-dessus.

[L’intégration du compte](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) renvoie un contrôleur qui gère sa propre présentation. D’autres composants, tels que [Payments](https://docs.stripe.com/connect/supported-embedded-components/payments.md) renvoie un [UIViewController](https://developer.apple.com/documentation/uikit/uiviewcontroller) que vous pouvez afficher dans votre application avec plus de flexibilité.

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

[Voir la documentation de référence :external:](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/init(apiClient:appearance:fonts:fetchClientSecret:).

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

La [boîte à outils de composants intégrés d’interface utilisateur Figma](https://www.figma.com/community/file/1438614134095442934) contient tous les composants, les modèles courants et un exemple d’application. Vous pouvez l’utiliser pour visualiser et concevoir des interfaces utilisateur intégrées sur votre site Web.

Nous proposons un [ensemble d’options](https://docs.stripe.com/connect/embedded-appearance-options.md) permettant de personnaliser l’apparence des composants intégrés Connect. Ces personnalisations affectent les boutons, les icônes et d’autres accents de notre système de conception.

> #### Fenêtres contextuelles nécessaires
> 
> Certains comportements dans les composants intégrés, tels que l’[authentification de l’utilisateur](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), doivent être présentés dans une vue web authentifiée. Vous ne pouvez pas personnaliser le composant intégré pour éliminer ces vues web.

Vous pouvez définir ces options via [EmbeddedComponentManager.Appearance](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/appearance) lors de l’initialisation de `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
)
```

Les couleurs d’apparence faisant appel à des [fournisseurs dynamiques](https://developer.apple.com/documentation/uikit/uicolor/3238041-init) sont automatiquement appliquées au composant Connect Embedded lorsque son [UITraitCollection](https://developer.apple.com/documentation/uikit/uitraitcollection) est mis à jour. Cela comprend le [mode sombre](https://developer.apple.com/design/human-interface-guidelines/dark-mode) et le [contraste d’accessibilité](https://developer.apple.com/documentation/uikit/uiaccessibilitycontrast). L’apparence par défaut n’inclut pas les couleurs du mode sombre, vous devez donc spécifier une apparence avec des couleurs dynamiques dans le `EmbeddedComponentManager` pour prendre en charge le mode sombre dans votre application.

Lorsque vous spécifiez des tailles de police, utilisez la taille de police non mise à l’échelle qui s’affiche pour la classe de taille par défaut de l’appareil. Le composant intégré met automatiquement à l’échelle la taille de la police en fonction de son [UITraitCollection](https://developer.apple.com/documentation/uikit/uitraitcollection).

 Consultez la [liste complète des options d’apparence](https://docs.stripe.com/connect/embedded-appearance-options.md) sur iOS pour découvrir toutes les possibilités de personnalisation disponibles.

### Utiliser des polices personnalisées

Si votre application utilise des polices personnalisées (par exemple des fichiers `.otf` ou `.ttf` intégrés à votre binaire), vous devez les déclarer via une [CustomFontSource](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource) transmise au paramètre `fonts` lors de l’initialisation de `EmbeddedComponentManager`. Cela permet aux composants embarqués Connect d’accéder aux fichiers de police et d’assurer un rendu fidèle.

Les polices définies dans `appearance` doivent utiliser soit une [police système prise en charge](https://developer.apple.com/fonts/system-fonts/), soit une [CustomFontSource](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource) fournie à `EmbeddedComponentManager` lors de l’initialisation, afin de s’afficher correctement.

[Voir la documentation de référence :external:](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource).

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

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

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

manager.update(appearance: appearance)
```

## Authentification

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

### Actualiser la clé secrète du client

Sur les sessions de longue durée, la session du *secret client* (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) peut expirer. Lorsqu’il expire, nous utilisons automatiquement `fetchClientSecret` pour récupérer une nouvelle clé secrète client et actualiser la session. Vous n’avez pas besoin de transmettre de paramètres supplémentaires.

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

## Localisation

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

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

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

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

L’authentification est obligatoire pour les comptes connectés pour lesquels Stripe est responsable de la collecte des informations mises à jour lorsque les exigences évoluent. Pour les comptes connectés pour lesquels vous êtes responsable de la collecte des informations mises à jour lorsque les exigences arrivent à échéance ou évoluent, tels que les comptes Custom, l’authentification de Stripe est contrôlée par la fonctionnalité de session de compte [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Nous vous recommandons de mettre en œuvre l’authentification à deux facteurs ou des mesures de sécurité équivalentes à titre de [bonne pratique](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Pour les configurations de compte qui prennent en charge cette fonctionnalité, comme les comptes Custom, vous assumez la responsabilité des comptes connectés s’ils ne sont pas en mesure de rembourser les [soldes négatifs](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Composants nécessitant une authentification

Les comptes connectés verront s’afficher une [vue web](https://developer.apple.com/documentation/authenticationservices/aswebauthenticationsession) authentifiée dans votre application. Le compte connecté doit s’authentifier avant de pouvoir continuer son workflow dans la vue web.

Le flux d’authentification hébergé par Stripe affiche le nom, la couleur et l’icône de votre marque tels que définis dans vos [paramètres Connect](https://dashboard.stripe.com/account/applications/settings) et n’utilise pas l’apparence et les polices personnalisées du [gestionnaire de composants intégré](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) tant que l’authentification n’est pas terminée.

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

- [Inscription du compte](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Virements](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Traiter les erreurs de chargement [Côté client]

Répondez aux échecs de chargement des composants en implémentant la méthode d’écoute de composant `onLoadError`.

Différentes causes d’échec peuvent appeler la méthode `onLoadError` plusieurs fois, de sorte que toute logique déclenchée par `onLoadError` doit être 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)'")
    }
}
```

## Configurer StripeConnect [Côté client] [Côté serveur]

Stripe utilise une [AccountSession](https://docs.stripe.com/api/account_sessions.md) pour exprimer votre intention de déléguer API accès à votre compte connecté.

L’API AccountSessions renvoie une *clé secrète du client* (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) qui permet à un composant intégré d’accéder aux ressources d’un compte connecté comme si vous faisiez des appels à l’API pour ces derniers.

### Créer une AccountSession (Serveur)

Votre application doit envoyer une demande à votre serveur pour obtenir la session de compte. Vous pouvez créer un endpoint sur votre serveur qui renvoie la clé secrète client à l’application&nbsp;:

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = client.v1.account_sessions.create({
      account: {{CONNECTED_ACCOUNT_ID}},
      components: {
        account_onboarding: {
          enabled: true,
          features: {
            # We recommend disabling authentication for a better user experience when possible
            disable_stripe_user_authentication: true,
          }
        }
      }
    })

    {
      client_secret: account_session[:client_secret]
    }.to_json
  rescue => error
    puts "An error occurred when calling the Stripe API to create an account session: #{error.message}";
    return [500, { error: error.message }.to_json]
  end
end
```

### API Create Account Session

L’[API Create Account Session](https://docs.stripe.com/api/account_sessions/create.md) détermine l’accès aux composants et aux fonctionnalités des composants Connect intégrés. Stripe applique ces paramètres à tous les composants correspondant à la session du compte. Si votre application prend en charge plusieurs rôles d’utilisateur, vérifiez que les composants et fonctionnalités activés pour cette session de compte correspondent au rôle de l’utilisateur actuel.  Par exemple, vous pouvez activer la [gestion des remboursements](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) uniquement pour les administrateurs de votre site, mais pas pour les autres utilisateurs. Pour vérifier que les accès aux rôles d’utilisateur sont appliqués, vous devez mapper le rôle d’utilisateur de votre site aux composants de session de compte.

### Installer le SDK StripeConnect (Client)

Le [SDK Stripe Android](https://github.com/stripe/stripe-android) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-android/).

Pour installer le SDK, ajoutez `connect` au bloc `dependencies` de votre fichier [app/build.gradle](https://developer.android.com/studio/build/dependencies)&nbsp;:

#### Kotlin

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

android { ... }

dependencies {
  // ...

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

> Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-android/releases) sur GitHub. Pour savoir quand une nouvelle version est disponible, [surveillez les versions du référentiel](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

### Initialiser EmbeddedComponentManager (Client)

Instanciez un [EmbeddedComponentManager](https://stripe.dev/stripe-android/connect/com.stripe.android.connect/-embedded-component-manager/index.html) avec votre clé publiable et une fonction lambda qui récupère une clé secrète du client en appelant le nouveau endpoint que vous avez créé sur votre serveur. Pour gérer les modifications de configuration, conservez l’instance `EmbeddedComponentManager` dans un `ViewModel` d’activité ou de fragment.

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

Pour créer un composant, appelez d’abord `EmbeddedComponentManager.onActivityCreate()` dans la méthode `onCreate` de votre activité. Ensuite, appelez la méthode de création appropriée sur `EmbeddedComponentManager` que vous avez configuré ci-dessus.

[L’inscription des utilisateurs](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) renvoie un contrôleur qui gère sa propre présentation. D’autres composants, tels que [Payments](https://docs.stripe.com/connect/supported-embedded-components/payments.md) renvoie une [vue](https://developer.android.com/reference/android/view/View) que vous pouvez afficher dans votre application avec plus de flexibilité.

#### Rendu d’un contrôleur

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

#### Affichage d’une `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 [Côté client]

[Voir la documentation de référence :external:](https://stripe.dev/stripe-android/connect/com.stripe.android.connect/-embedded-component-manager/index.html).

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

La [boîte à outils de composants intégrés d’interface utilisateur Figma](https://www.figma.com/community/file/1438614134095442934) contient tous les composants, les modèles courants et un exemple d’application. Vous pouvez l’utiliser pour visualiser et concevoir des interfaces utilisateur intégrées sur votre site Web.

Nous proposons un [ensemble d’options](https://docs.stripe.com/connect/embedded-appearance-options.md) permettant de personnaliser l’apparence des composants intégrés Connect. Ces personnalisations affectent les boutons, les icônes et d’autres accents de notre système de conception.

> #### Fenêtres contextuelles nécessaires
> 
> Certains comportements dans les composants intégrés, tels que l’[authentification de l’utilisateur](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), doivent être présentés dans une vue web authentifiée. Vous ne pouvez pas personnaliser le composant intégré pour éliminer ces vues web.

Vous pouvez définir ces options à l’aide de [Appearance](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance/-appearance/index.html) lors de l’initialisation de `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,
)
```

Lorsque vous spécifiez des tailles de police, utilisez la taille de police non mise à l’échelle qui s’affiche pour la classe de taille par défaut de l’appareil. Le composant intégré met automatiquement à l’échelle la taille de la police en fonction des [paramètres d’accessibilité en matière de police](https://support.google.com/accessibility/android/answer/11183305?sjid=3094445894544346025-NA#fontsize) de l’utilisateur.

 Consultez la [liste complète des options d’apparence](https://docs.stripe.com/connect/embedded-appearance-options.md?platform=android) sur Android.

### Utiliser des polices personnalisées

Si vous utilisez des polices personnalisées dans votre application (par exemple, à partir de fichiers `.otf` ou `.tff` intégrés dans le fichier binaire de votre application), vous devez spécifier les fichiers de polices dans un [CustomFontSource](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html) transmis à l’argument `customFonts` lors de l’initialisation de `EmbeddedComponentManager`. Cela permet aux composants intégrés Connect d’accéder aux fichiers de polices pour afficher correctement les polices.

Les polices précisées dans `appearance` doivent utiliser un [CustomFontSource](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html) transmis au `EmbeddedComponentManager` lors de l’initialisation pour obtenir un affichage correct.

[Voir la documentation de référence :external:](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html).

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

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

#### Kotlin

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

## Authentification

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

### Actualiser la clé secrète du client

Sur les sessions de longue durée, la session du *secret client* (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) peut expirer. Lorsqu’il expire, nous utilisons automatiquement `fetchClientSecret` pour récupérer une nouvelle clé secrète client et actualiser la session. Vous n’avez pas besoin de transmettre de paramètres supplémentaires.

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

## Localisation

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

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

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

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

L’authentification est obligatoire pour les comptes connectés pour lesquels Stripe est responsable de la collecte des informations mises à jour lorsque les exigences évoluent. Pour les comptes connectés pour lesquels vous êtes responsable de la collecte des informations mises à jour lorsque les exigences arrivent à échéance ou évoluent, tels que les comptes Custom, l’authentification de Stripe est contrôlée par la fonctionnalité de session de compte [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Nous vous recommandons de mettre en œuvre l’authentification à deux facteurs ou des mesures de sécurité équivalentes à titre de [bonne pratique](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Pour les configurations de compte qui prennent en charge cette fonctionnalité, comme les comptes Custom, vous assumez la responsabilité des comptes connectés s’ils ne sont pas en mesure de rembourser les [soldes négatifs](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Composants nécessitant une authentification

Les comptes connectés verront s’afficher une [vue web](https://developer.chrome.com/docs/android/custom-tabs) authentifiée dans votre application. Le compte connecté doit s’authentifier avant de pouvoir continuer son workflow dans la vue web.

Le flux d’authentification hébergé par Stripe affiche le nom, la couleur et l’icône de votre marque tels que définis dans vos [paramètres Connect](https://dashboard.stripe.com/account/applications/settings) et n’utilise pas l’apparence et les polices personnalisées du [gestionnaire de composants intégré](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) tant que l’authentification n’est pas terminée.

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

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

- [Inscription du compte](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Virements](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Traiter les erreurs de chargement [Côté client]

Répondez aux échecs de chargement des composants en implémentant la méthode d’écoute de composant `onLoadError`.

Différentes causes d’échec peuvent appeler la méthode `onLoadError` plusieurs fois, de sorte que toute logique déclenchée par `onLoadError` doit être 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}")
        }
    }
}
```

## Configurer StripeConnect [Côté client] [Côté serveur]

Stripe utilise une [AccountSession](https://docs.stripe.com/api/account_sessions.md) pour exprimer votre intention de déléguer API accès à votre compte connecté.

L’API AccountSessions renvoie une *clé secrète du client* (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) qui permet à un composant intégré d’accéder aux ressources d’un compte connecté comme si vous faisiez des appels à l’API pour ces derniers.

### Créer une AccountSession (Serveur)

Votre application doit envoyer une demande à votre serveur pour obtenir la session de compte. Vous pouvez créer un endpoint sur votre serveur qui renvoie la clé secrète client à l’application&nbsp;:

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = client.v1.account_sessions.create({
      account: {{CONNECTED_ACCOUNT_ID}},
      components: {
        account_onboarding: {
          enabled: true,
          features: {
            # We recommend disabling authentication for a better user experience when possible
            disable_stripe_user_authentication: true,
          }
        }
      }
    })

    {
      client_secret: account_session[:client_secret]
    }.to_json
  rescue => error
    puts "An error occurred when calling the Stripe API to create an account session: #{error.message}";
    return [500, { error: error.message }.to_json]
  end
end
```

### API Create Account Session

L’[API Create Account Session](https://docs.stripe.com/api/account_sessions/create.md) détermine l’accès aux composants et aux fonctionnalités des composants Connect intégrés. Stripe applique ces paramètres à tous les composants correspondant à la session du compte. Si votre application prend en charge plusieurs rôles d’utilisateur, vérifiez que les composants et fonctionnalités activés pour cette session de compte correspondent au rôle de l’utilisateur actuel.  Par exemple, vous pouvez activer la [gestion des remboursements](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) uniquement pour les administrateurs de votre site, mais pas pour les autres utilisateurs. Pour vérifier que les accès aux rôles d’utilisateur sont appliqués, vous devez mapper le rôle d’utilisateur de votre site aux composants de session de compte.

### Installer le SDK Stripe pour React Native (Client)

Installez le SDK Stripe pour React Native en utilisant npm ou yam&nbsp;:

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

### Initialiser StripeConnectProvider (Client)

Enveloppez votre application avec `ConnectComponentsProvider` et fournissez votre clé publiable ainsi qu’une fonction qui récupère la clé secrète du client en appelant le nouvel endpoint que vous avez créé sur votre serveur.

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

Pour utiliser un composant intégré, importez-le et affichez-le dans le `ConnectComponentsProvider`&nbsp;:

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

[Voir la documentation de référence :external:](https://stripe.dev/stripe-react-native/api-reference/types/StripeConnectInitParams.html).

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

La [boîte à outils de composants intégrés d’interface utilisateur Figma](https://www.figma.com/community/file/1438614134095442934) contient tous les composants, les modèles courants et un exemple d’application. Vous pouvez l’utiliser pour visualiser et concevoir des interfaces utilisateur intégrées sur votre site Web.

Nous proposons un [ensemble d’options](https://docs.stripe.com/connect/embedded-appearance-options.md) permettant de personnaliser l’apparence des composants intégrés Connect. Ces personnalisations affectent les boutons, les icônes et d’autres accents de notre système de conception.

> #### Fenêtres contextuelles nécessaires
> 
> Certains comportements dans les composants intégrés, tels que l’[authentification de l’utilisateur](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), doivent être présentés dans une vue web authentifiée. Vous ne pouvez pas personnaliser le composant intégré pour éliminer ces vues web.

Vous pouvez personnaliser l’apparence des composants intégrés Connect en transmettant une option d’`appearance` pour `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>
  );
}
```

Consultez la [liste complète des options d’apparence](https://docs.stripe.com/connect/embedded-appearance-options.md?platform=react-native) pour React Native.

### Utiliser des polices personnalisées

Si vous utilisez des polices personnalisées dans votre application (par exemple, à partir de fichiers `.otf` ou `.ttf` intégrés à votre application), vous devez spécifier les fichiers de polices dans un document `CustomFontSource` transmis à l’option `customFonts` lors de l’appel de `loadconnectAndInitialize`. Cela donne aux composants intégrés Connect l’accès aux fichiers de polices pour afficher correctement les polices.

Les polices spécifiées dans `appearance` doivent utiliser un `CustomFontSource` transmis à `loadConnectAndInitialize` lors de l’initialisation pour un rendu correct.

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

La méthode `update` prend en charge la mise à jour des composants Connect Embedded après l’initialisation. Vous pouvez l’utiliser pour changer d’option d’apparence au moment de l’exécution. Pour ce faire, utilisez le même objet `stripeConnectInstance` que vous avez créé avec `initialize` et appelez la méthode `update` sur celui-ci&nbsp;:

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

## Authentification

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

### Actualiser la clé secrète du client

Sur les sessions de longue durée, la session du *secret client* (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) peut expirer. Lorsqu’il expire, nous utilisons automatiquement `fetchClientSecret` pour récupérer une nouvelle clé secrète client et actualiser la session. Vous n’avez pas besoin de transmettre de paramètres supplémentaires.

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

## Localisation

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

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

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

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

L’authentification est obligatoire pour les comptes connectés pour lesquels Stripe est responsable de la collecte des informations mises à jour lorsque les exigences évoluent. Pour les comptes connectés pour lesquels vous êtes responsable de la collecte des informations mises à jour lorsque les exigences arrivent à échéance ou évoluent, tels que les comptes Custom, l’authentification de Stripe est contrôlée par la fonctionnalité de session de compte [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Nous vous recommandons de mettre en œuvre l’authentification à deux facteurs ou des mesures de sécurité équivalentes à titre de [bonne pratique](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Pour les configurations de compte qui prennent en charge cette fonctionnalité, comme les comptes Custom, vous assumez la responsabilité des comptes connectés s’ils ne sont pas en mesure de rembourser les [soldes négatifs](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Composants nécessitant une authentification

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

Le flux d’authentification hébergé par Stripe affiche le nom, la couleur et l’icône de votre marque tels que définis dans vos [paramètres Connect](https://dashboard.stripe.com/account/applications/settings) et n’utilise pas l’apparence et les polices personnalisées du [gestionnaire de composants intégré](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) tant que l’authentification n’est pas terminée.

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

- [Inscription du compte](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Virements](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Traiter les erreurs de chargement [Côté client]

Répondez aux échecs de chargement des composants en implémentant la méthode d’écoute de composant `onLoadError`.

Différentes causes d’échec peuvent appeler la méthode `onLoadError` plusieurs fois, de sorte que toute logique déclenchée par `onLoadError` doit être 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} />;
}
```

## Demander l’accès (Private preview)

Connectez-vous pour demander l’accès aux composants intégrés Connect pour React Native en version bêta privée. Si vous n’avez pas de compte Stripe, vous pouvez [vous inscrire dès maintenant](https://dashboard.stripe.com/register).