> For the complete documentation index, see [llms.txt](https://docs.complycube.com/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.complycube.com/documentation/sdks/sdks-fr/integrations-web/web-sdk-quick-guide/web-sdk-quick-guide-1.md).

# Intégration guidée par les vérifications

## Vue d'ensemble

Ce guide vous accompagne dans l'intégration du SDK Web avec ComplyCube en utilisant l'approche pilotée par les vérifications, vous donnant un contrôle direct sur les étapes de vérification individuelles.

{% hint style="info" %}
Pour un exemple rapide à copier-coller, utilisez notre [assistant d’intégration](https://portal.complycube.com/developers).
{% endhint %}

{% hint style="warning" %}
Vous consultez le **piloté par des vérifications** guide SDK - une approche qui offre un contrôle détaillé mais qui convient mieux aux **partenaires** ou **cas d’utilisation avancés.**  Nous recommandons d’utiliser **l’intégration des flux de travail** pour la plupart des implémentations.
{% endhint %}

## Flux d'intégration

Le SDK Web s'exécute dans votre frontend, mais s'appuie sur votre backend pour créer **des jetons sécurisés**. Voici comment cela fonctionne :

{% stepper %}
{% step %}

#### **Créer un client**

Enregistrez un nouveau **client** (c.-à-d. le client) en utilisant l'API ComplyCube
{% endstep %}

{% step %}

#### **Générez un jeton SDK**

Votre backend demande un **jeton JWT** lié à ce client.
{% endstep %}

{% step %}

#### **Importez et montez le SDK**

Ajoutez les fichiers JS et CSS, puis montez le SDK dans votre application web.
{% endstep %}

{% step %}

#### Capturez des documents, des vidéos et des selfies

Le SDK guide votre client à travers les étapes requises.
{% endstep %}

{% step %}

#### Effectuer les contrôles de vérification

Les données capturées sont envoyées en toute sécurité à ComplyCube pour les vérifications, et les résultats sont fournis en temps réel via l’API ou les webhooks.
{% endstep %}
{% endstepper %}

![Flux d'intégration du SDK Web](/files/6ad63e5abb0e6ab3e084424b29594ba4eac08609)

## Guide d'intégration

{% stepper %}
{% step %}

#### Créer un client

Chaque parcours de vérification commence par un **client** (c'est-à-dire le client). Utilisez l'API pour [créer le client](/documentation/api-reference/core-resources/clients/create-a-client.md).

**Exemple de requête**

{% tabs %}
{% tab title="cURL" %}

```bash
curl -X POST https://api.complycube.com/v1/clients \\
     -H 'Authorization: <YOUR_API_KEY>' \\
     -H 'Content-Type: application/json' \\
     -d '{
          "type": "person",
          "email": "john.doe@example.com",
          "personDetails":{
               "firstName": "John",
               "lastName" :"Doe"
          }
        }'
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const client = await complycube.client.create({
  type: "person",
  email: "john.doe@example.com",
  personDetails: {
    firstName: "John",
    lastName: "Doe"
  }
});
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient
cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

new_client = {
    'type':'person',
    'email':'john.doe@example.com',
    'personDetails': {
        'firstName':'John',
        'lastName':'Doe'
    }
}

client = cc_api.clients.create(**new_client)
```

{% endtab %}

{% tab title="PHP" %}

```php
use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$result = $ccapi->clients()->create([
    'type' => 'person',
    'email' => 'john@doe.com',
    'personDetails' => [
        'firstName' => 'John',
        'lastName' => 'Doe'
    ]
]);
```

{% endtab %}

{% tab title=".NET" %}

```csharp
using ComplyCube.Net;
using ComplyCube.Net.Resources.Clients;

var clientApi = new ClientApi(new ComplyCubeClient("<YOUR_API_KEY>"));
var newClient = new ClientRequest {
  type = "person",
  email = "john@doe.com",
  personDetails = new PersonDetails {
    firstName = "John",
    lastName = "Doe"
  }
}

var client = await clientApi.CreateAsync(newClient);
```

{% endtab %}
{% endtabs %}

**Exemple de réponse**

La réponse contiendra un `identifiant` (l'identifiant du client). Il est requis pour l'étape suivante.

```json
{
    "id": "5eb04fcd0f3e360008035eb1",
    "type": "person",
    "email": "john.doe@example.com",
    "personDetails": {
        "firstName": "John",
        "lastName": "Doe"
    },
    "createdAt": "2020-01-04T17:24:29.146Z",
    "updatedAt": "2020-01-04T17:24:29.146Z"
}
```

{% hint style="info" %}
Voir [Référence de l'API Clients](/documentation/api-reference/core-resources/clients.md) pour en savoir plus.
{% endhint %}
{% endstep %}

{% step %}

#### Générez un jeton SDK

Votre backend doit créer un **jeton SDK** pour chaque nouveau parcours. Ce jeton associe la session du SDK au client. Les jetons sont de courte durée et ne doivent pas être réutilisés.

**Exemple de requête**

{% tabs %}
{% tab title="cURL" %}

```bash
curl -X POST https://api.complycube.com/v1/tokens \\
     -H 'Authorization: <YOUR_API_KEY>' \\
     -H 'Content-Type: application/json' \\
     -d '{
          "clientId":"CLIENT_ID",
          "referrer": "https://www.example.com/*"
        }'
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const token = await complycube.token.generate("CLIENT_ID", {
    referrer: "https://www.example.com/*"
});
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient

cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

token = cc_api.tokens.create('CLIENT_ID','https://www.example.com/*')
```

{% endtab %}

{% tab title="PHP" %}

```php
 use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$report = $ccapi->tokens()->generate('CLIENT_ID', 'https://www.example.com/*');
```

{% endtab %}

{% tab title=".NET" %}

```csharp
using ComplyCube.Net;
using ComplyCube.Net.Resources.SDKTokens;

var sdkTokenApi = new SDKTokenApi(new ComplyCubeClient("<YOUR_API_KEY>"));

var sdkTokenRequest = {
  clientId = "CLIENT_ID",
  referrer = "https://www.example.com/*"
}

var sdkToken = await sdkTokenApi.GenerateToken(sdkTokenRequest);
```

{% endtab %}
{% endtabs %}

**Exemple de réponse**

```json
{
    "token": "<CLIENT_TOKEN>"
}
```

{% hint style="info" %}
Voir [Référence de l'API du jeton SDK](/documentation/api-reference/other-resources/tokens.md) pour en savoir plus.
{% endhint %}
{% endstep %}

{% step %}

#### Importer le SDK

Pour importer notre SDK Web, vous devez l'inclure dans le code HTML de votre page cible :

```html
<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Importation de la bibliothèque JavaScript -->
    <script src="complycube.min.js"></script>

    <!-- Importation du CSS par défaut -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
     <!-- C'est ici que le SDK Web sera monté -->
    <div id="complycube-mount"></div>
  </body>
</html>

```

<details>

<summary><strong>Chargement du SDK avec intégrité</strong> <em>(Facultatif)</em></summary>

Pour plus de sécurité, vous pouvez charger le SDK Web ComplyCube de manière facultative à l’aide de **Intégrité des sous-ressources (SRI)**. Cela permet au navigateur de vérifier que les fichiers JavaScript et CSS n’ont pas été modifiés en les validant à l’aide de sommes de contrôle cryptographiques.

#### **Récupérer les dernières valeurs d’intégrité du SDK**

Pour vous assurer d’utiliser toujours la dernière version prise en charge du SDK et les derniers hachages d’intégrité, récupérez les métadonnées des ressources depuis le point de terminaison d’informations du SDK Web.

**Exemple de requête**

```bash
curl -X POST https://api.complycube.com/v1/webSdk/latest \
     -H 'Authorization: <YOUR_API_KEY>'
```

**Exemple de réponse**

La réponse inclut les URL et les valeurs d’intégrité correspondantes pour les ressources JavaScript et CSS.

{% code overflow="wrap" %}

```json
{
  "js": {
    "url": "<JAVASCRIPT_ASSET_URL>/complycube.min.js",
    "integrity": "sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
  },
  "css": {
    "url": "<CSS_ASSET_URL>/style.css",
    "integrity": "sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
  }
}
```

{% endcode %}

#### **Importer le SDK à l’aide d’attributs d’intégrité**

Utilisez les valeurs renvoyées pour charger le SDK dans votre HTML avec `integrity` et `crossorigin` attributs :

```html
<!DOCTYPE html>
<html>
  ...
  <head>
    <!-- Importation de la bibliothèque JavaScript -->
    <script
      src="<JAVASCRIPT_ASSET_URL>/sdk.min.js"
      integrity="sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
      crossorigin="anonymous">
    </script>

    <!-- Importation du CSS par défaut -->
    <link
      rel="stylesheet"
      href="<CSS_ASSET_URL>/style.css"
      integrity="sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
      crossorigin="anonymous">
  </link>
  </head>
  
  <!-- C'est ici que le SDK Web sera monté -->
  <body>
    <div id="complycube-mount"></div>
  </body>
</html>
```

{% hint style="info" %}

#### Remarques

* L’utilisation du SRI est ***facultative***, mais recommandée pour les environnements avec des exigences de sécurité plus strictes.
* L’attribut crossorigin="anonymous" est requis lors de l’utilisation de SRI avec des ressources servies depuis une origine différente.
* Les valeurs d’intégrité peuvent changer lorsque le SDK est mis à jour. Récupérez toujours les dernières valeurs depuis le point de terminaison.
  {% endhint %}

</details>

{% hint style="info" %}
Les liens vers `complycube.min.js` et `style.css` se trouvent dans votre [portail développeurs](https://portal.complycube.com/developers/webSdk).
{% endhint %}
{% endstep %}

{% step %}

#### Monter le SDK

Avec le jeton SDK généré, le SDK Web peut être initialisé dans votre frontend à l'aide du code JavaScript suivant :

```javascript
ComplyCube.mount({
  token: '<YOUR_WEB_SDK_TOKEN>',
  containerId: 'complycube-mount',
  stages: [
    'intro',
    'documentCapture',
    {
      name: 'faceCapture',
      options: {
        mode: 'video'
      }
    },
    'completion'
  ],
  onComplete: function(data) {
    // En utilisant les attributs de données renvoyés, demandez à votre
    // serveur backend d'effectuer les vérifications ComplyCube nécessaires
    console.info('Capture complete');
  },
  onModalClose: function() {
    // Gérer la tentative de fermeture de la modale
  },
  onError: function ({ type, message }) {
    if (type === 'token_expired') {
      // Demander un nouveau jeton SDK
    } else {
      // Gérer les autres erreurs
      console.error(message);
    }
  }
});
```

{% hint style="info" %}
Les paramètres de montage du SDK sont décrits dans la [section des paramètres du SDK](#settings) ci-dessous.
{% endhint %}

{% hint style="info" %}

#### Politique de referrer

Pour permettre une communication réussie entre le SDK et nos serveurs, l' **Referrer Policy** de votre page web doit être défini sur `strict-origin-when-cross-origin`. Cela garantit que les informations de referrer sont transmises de manière sécurisée lors des requêtes HTTP.

Vous pouvez soit le faire par programmation, soit l'ajouter directement à la page web comme suit :\
`<meta name="referrer" content="strict-origin-when-cross-origin">`
{% endhint %}
{% endstep %}

{% step %}

#### Effectuer des vérifications

En utilisant les `données` renvoyées par le SDK, via le `onComplete` callback, vous pouvez maintenant demander à votre serveur backend d'exécuter les vérifications appropriées à l'aide du [créer un endpoint de vérification](https://docs.complycube.com/api-reference/checks/create-a-check).

Par exemple, utilisez :

* `documentCapture.documentId` pour lancer une [vérification de document](https://docs.complycube.com/api-reference/check-types/document-check).
* `documentCapture.documentId` et `faceCapture.livePhotoId` pour lancer une[ vérification d'identité](https://docs.complycube.com/api-reference/check-types/identity-check).
* `documentCapture.documentId` et `faceCapture.liveVideoId` pour lancer une [vérification d'identité renforcée](https://docs.complycube.com/api-reference/check-types/enhanced-identity-check).
* `poaCapture.documentId` pour lancer une [vérification de justificatif de domicile](https://docs.complycube.com/api-reference/check-types/proof-of-address-check).

Si vous avez [configuré des webhooks ](https://docs.complycube.com/api-reference/other-resources/webhooks/create-a-webhook)comme décrit dans notre [guide des webhooks](https://docs.complycube.com/documentation/guides/webhooks), vous serez informé lorsqu'une vérification sera terminée.

Pour récupérer les résultats de la vérification, vous pouvez effectuer une requête GET [requête de vérification](/documentation/api-reference/core-resources/checks/create-a-check.md).

**Exemple de requête**

{% tabs %}
{% tab title="cURL" %}

```javascript
curl -X GET https://api.complycube.com/v1/checks/{:checkId} \\
     -H 'Authorization: <YOUR_API_KEY>' 
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const check = await complycube.check.get("CHECK_ID");
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient

cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

check = cc_api.checks.get('CHECK_ID')
```

{% endtab %}

{% tab title="PHP" %}

```php
use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$check = $ccapi->checks()->get('CHECK_ID');
```

{% endtab %}

{% tab title=".NET" %}

```csharp
using ComplyCube.Net;
using ComplyCube.Net.Resources.Checks;

var checkApi = new CheckApi(new ComplyCubeClient("<YOUR_API_KEY>"));

var check = await checkApi.GetAsync("CHECK_ID");
```

{% endtab %}
{% endtabs %}
{% endstep %}
{% endstepper %}

## Référence du SDK

Cette section décrit tous les paramètres configurables, les callbacks, les méthodes de cycle de vie et les options de branding disponibles dans le SDK Web ComplyCube.

### Paramètres

<table><thead><tr><th width="218.09765625">Option</th><th>Description</th></tr></thead><tbody><tr><td><code>token</code></td><td>Le jeton SDK généré par votre backend. Il est <strong>obligatoire</strong>.<br><br><strong>Type</strong>: <code>string</code></td></tr><tr><td><code>containerId</code></td><td><p>L'ID de l'élément conteneur où le SDK est monté. Il doit s'agir d'un élément vide.</p><p><strong>Type :</strong> <code>string</code><br><strong>Valeur par défaut</strong>: <code>complycube-mount</code></p></td></tr><tr><td><code>useModal</code></td><td>Définit si les écrans de l'interface se chargent dans une fenêtre modale plutôt qu'en ligne.<br><br><strong>Type :</strong> <code>boolean</code><br><strong>Valeur par défaut</strong>: <code>true</code></td></tr><tr><td><code>useFullScreen</code></td><td>Définit si le SDK se charge en mode plein écran.<br><br><strong>Type :</strong> <code>boolean</code><br><strong>Valeur par défaut</strong>: <code>false</code></td></tr><tr><td><code>disableClientAnalytics</code></td><td><p>Définit si nous suivons ou non les analyses client.<br></p><p><strong>Type :</strong> <code>boolean</code><br><strong>Valeur par défaut</strong>: <code>false</code></p></td></tr><tr><td><code>stages</code></td><td><p>Il s'agit de la liste des étapes que vos clients suivront. Les étapes peuvent être fournies sous forme de chaînes ou d'objets. Voir <a href="#stages">Étapes</a> ci-dessous pour en savoir plus.<br></p><p><strong>Type :</strong> <code>array[object]</code> ou <code>array[string]</code></p><p><strong>Valeurs par défaut</strong>: <code>['intro', 'faceCapture, 'documentCapture', 'completion']</code></p></td></tr><tr><td><code>language</code></td><td><p>La langue de l'interface. Les valeurs valides incluent :<br></p><p><code>en</code> , <code>ar</code>, <code>br</code>, <code>de</code>, <code>es</code>, <code>fr</code>, <code>hi</code>, <code>hk</code>, <code>identifiant</code>, <code>it</code>, <code>ja</code>, <code>ko</code>, <code>nl</code>, <code>no</code>, <code>pl</code>, <code>pt</code>, <code>sv</code>, <code>th</code>, <code>vi</code>, <code>zh</code><br></p><p><strong>Type :</strong> <code>string</code><br><strong>Valeur par défaut</strong>: <code>en</code></p></td></tr></tbody></table>

### Callback

Les callbacks vous permettent de réagir aux événements du cycle de vie du SDK.

<table><thead><tr><th width="218.0234375">Option</th><th>Description</th></tr></thead><tbody><tr><td><code>onComplete</code></td><td><p>Déclenché après que le client a terminé le parcours de vérification. Généralement utilisé pour déclencher une vérification sur votre backend.<br></p><p>Selon les étapes fournies, <code>données</code> peut inclure les attributs suivants :<br></p><ul><li><p><code>documentCapture</code></p><ul><li><code>documentId</code>: identifiant du document capturé.</li><li><code>documentType:</code> Type de document téléchargé.</li></ul></li><li><p><code>faceCapture</code></p><ul><li><code>liveVideoId</code>: identifiant de la vidéo capturée. <strong>OU</strong>;</li><li><code>livePhotoId</code>: identifiant de la photo capturée.</li></ul></li><li><p><code>poaCapture</code></p><ul><li><code>documentId</code>: identifiant du document de justificatif de domicile téléversé.</li><li><code>documentType</code>: type du document de justificatif de domicile téléversé.</li></ul></li></ul></td></tr><tr><td><code>onError</code></td><td><p>Déclenché lorsqu'une erreur se produit. L'objet d'erreur comporte deux attributs :</p><ul><li><p><code>type</code>: Cela peut être :</p><ul><li><code>exception</code></li><li><code>token_expired</code> : indique que le jeton a expiré. Dans ce cas, un nouveau <strong>jeton SDK doit être fourni</strong>.</li></ul></li><li><code>message</code>: Description de l'erreur.</li></ul></td></tr><tr><td><code>onExit</code></td><td>Ce callback est déclenché lorsque votre client quitte avant de terminer le parcours. Il renverra la raison de la sortie, par exemple, <code>USER_CONSENT_NOT_GRANTED</code>.</td></tr><tr><td><code>onModalClose</code></td><td>Déclenché lorsque le client tente de fermer la modale. Vous pouvez autoriser ou empêcher la fermeture en mettant à jour l' <code>isModalOpen</code> attribut à l'aide de <a href="#updating-settings">updateSettings</a>.</td></tr></tbody></table>

### Mise à jour des paramètres

Un certain nombre de paramètres peuvent être mis à jour à l’exécution comme suit :

```javascript
complycube = ComplyCube.mount({...});

// Remplacer le jeton SDK
complycube.updateSettings({ token: "NEW_SDK_TOKEN" });
...
// Ouvrir la fenêtre modale
complycube.updateSettings({ isModalOpen: true });

//Fermer la fenêtre modale
complycube.updateSettings({ isModalOpen: false });

```

### Démontage du SDK

Si vous utilisez le SDK dans une application monopage (SPA), vous pouvez appeler la fonction unmount pour supprimer le SDK et réinitialiser son état.

```javascript
complycube = ComplyCube.mount({...});
...
complycube.unmount()
```

## Étapes

Le `stages` tableau définit le parcours de vérification. Chaque étape peut être passée sous forme de **string** ou comme un **objet** avec des options.

#### Noms d'étapes pris en charge

* `intro`: Écran d'accueil.
* `userConsentCapture`: Capture du consentement du client.
* `documentCapture`: Capture des documents d'identité.
* `faceCapture`: Capture de selfies ou de vidéos de vérification de présence.
* `poaCapture`: Capture du document de justificatif de domicile.
* `completion`: Fin du parcours.

{% hint style="info" %}
Lorsque `userConsentCapture` est activé, gérez toujours le `onExit` callback si le client refuse son consentement.
{% endhint %}

{% hint style="info" %}
Veuillez vous assurer de transmettre le paramètre [`clientConsent`](https://docs.complycube.com/api-reference/checks) lorsque le consentement est accordé par votre client.
{% endhint %}

Lorsqu'une étape est passée sous forme de **objet**, elle aura deux attributs, `nom` et `options`.

### Nom

Voici le [nom de l’étape](#supported-stage-names)

### Options

Cela vous permet de personnaliser chaque étape comme suit :

<table><thead><tr><th width="171.09765625">Nom de l’étape</th><th>Options</th></tr></thead><tbody><tr><td><code>intro</code></td><td><ul><li><code>heading</code>: Modifiez le titre de l’écran d’introduction.</li><li><code>message</code>: Une liste de messages à afficher sur l’écran d’introduction. Taille maximale <strong>3</strong>.</li><li><code>startButtonText</code>: Modifiez le texte du bouton de démarrage sur l’écran d’introduction.</li></ul></td></tr><tr><td><code>documentCapture</code></td><td><ul><li><code>crossDeviceOnly</code>: Un booléen qui indique s’il faut obliger les utilisateurs à capturer leur document à l’aide de leur téléphone. Cela supprime l’option de téléversement du document.</li><li><p><code>documentTypes</code>: La liste des types de documents d’identité visibles pour l’utilisateur. Les types de documents valides incluent :</p><ul><li><code>passport</code></li><li><code>driving_license</code></li><li><code>national_identity_card</code></li><li><code>residence_permit</code></li></ul><p><br>Chaque valeur peut être soit un <strong>boolean</strong> ou un <strong>objet pays</strong>. Un booléen active ou désactive l’affichage du type de document, tandis qu’un objet pays spécifie le pays émetteur pour les documents autres que le passeport, en contournant l’écran de sélection du pays. La valeur du pays est le <a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2">code ISO de pays à deux lettres</a>.</p></li></ul></td></tr><tr><td><code>faceCapture</code></td><td><ul><li><code>mode</code>: Le mode de capture faciale. Les valeurs possibles sont : <code>photo</code> ou <code>video</code>.</li></ul></td></tr><tr><td><code>poaCapture</code></td><td><ul><li><p><code>documentTypes</code>: La liste des types de documents justificatifs de domicile (POA) visibles pour le client. Les types de documents POA valides incluent :</p><ul><li><code>bank_statement</code></li><li><code>utility_bill</code></li></ul></li></ul><p>La valeur de chaque type de document est un booléen qui active ou désactive l’affichage du type de document.</p></td></tr><tr><td><code>completion</code></td><td><ul><li><code>heading</code>: Modifiez le titre de l’écran de fin.</li><li><code>message</code>: Un message à afficher sur l’écran de fin. Taille maximale <strong>1</strong>.</li></ul></td></tr></tbody></table>

#### Exemple d’objet d’options

```javascript
stages: [
  {
    name: "intro",
    options: {
      heading: "Nous devons vérifier votre identité",
      message: [
        "Afin d’ouvrir un compte, nous devons vérifier quelques éléments.",
        "Cela ne prendra qu’un instant",
      ],
      startButtonText: "Commencer la vérification"
    },
  },
  "userConsentCapture",
  {
    name: "documentCapture",
    options: {
      crossDeviceOnly: true,
      documentTypes: {
        passport: true,
        driving_license: false,
        national_identity_card: true,
        residence_permit: {
          country: "GB",
        },
      },
    },
  },
  {
    name: "faceCapture",
    options: {
      mode: "video"
    },
  },
  {
    name: "poaCapture",
    options: {
      documentTypes: {
        bank_statement: true,
        utility_bill: false,
      },
    },
  },
  {
    name: "completion",
    options: {
      heading: "Merci d’avoir terminé le processus",
      message: ["nous vous contacterons sous peu"]
    },
  }
];

```

## Branding

Vous pouvez personnaliser l’apparence et le style du SDK avec l’ `objet de branding` . Il comprend les attributs décrits ci-dessous.

### Apparence

Le `apparence` l'objet vous permet de personnaliser le jeu de couleurs du SDK avec des valeurs CSS (par ex. RGBA, Hex). Les attributs personnalisables comprennent :

<table><thead><tr><th width="314.77779343108637">Attribut</th><th>Description</th></tr></thead><tbody><tr><td><code>infoPopupColor</code></td><td>Couleur d'arrière-plan de la fenêtre contextuelle d'avertissement.</td></tr><tr><td><code>infoPopupTextColor</code></td><td>Couleur d'arrière-plan de la fenêtre contextuelle d'avertissement.</td></tr><tr><td><code>infoPopupLinkHoverColor</code></td><td>Couleur d'arrière-plan de secours du lien de la fenêtre contextuelle d'avertissement au survol.</td></tr><tr><td><code>infoPopupLinkActiveColor</code></td><td>Couleur d'arrière-plan active de secours du lien de la fenêtre contextuelle d'avertissement.</td></tr><tr><td><code>errorPopupColor</code></td><td>Couleur d'arrière-plan de la fenêtre contextuelle d'erreur.</td></tr><tr><td><code>errorPopupTextColor</code></td><td>Couleur du texte de la fenêtre contextuelle d'erreur.</td></tr><tr><td><code>errorPopupLinkHoverColor</code></td><td>Couleur d'arrière-plan de secours du lien de la fenêtre contextuelle d'erreur au survol.</td></tr><tr><td><code>errorPopupLinkActiveColor</code></td><td>Couleur d'arrière-plan active de secours du lien de la fenêtre contextuelle d'erreur.</td></tr><tr><td><code>cameraButtonHoverColor</code></td><td>Couleur d'arrière-plan du bouton de caméra au survol.</td></tr><tr><td><code>cameraButtonActiveColor</code></td><td>Couleur d'arrière-plan active du bouton de caméra.</td></tr><tr><td><code>iconButtonActiveColor</code></td><td>Couleur d'arrière-plan active du bouton d'icône.</td></tr><tr><td><code>iconButtonHoverColor</code></td><td>Couleur d'arrière-plan du bouton d'icône au survol.</td></tr><tr><td><code>primaryButtonColor</code></td><td>Couleur d'arrière-plan du bouton principal.</td></tr><tr><td><code>primaryButtonTextColor</code></td><td>Couleur du texte du bouton principal.</td></tr><tr><td><code>primaryButtonActiveColor</code></td><td>Couleur d'arrière-plan active du bouton principal.</td></tr><tr><td><code>primaryButtonHoverColor</code></td><td>Couleur d'arrière-plan du bouton principal au survol.</td></tr><tr><td><code>primaryButtonBorderColor</code></td><td>Couleur de bordure du bouton principal.</td></tr><tr><td><code>secondaryButtonColor</code></td><td>Couleur d'arrière-plan du bouton secondaire.</td></tr><tr><td><code>secondaryButtonTextColor</code></td><td>Couleur du texte du bouton secondaire.</td></tr><tr><td><code>secondaryButtonActiveColor</code></td><td>Couleur d'arrière-plan active du bouton secondaire.</td></tr><tr><td><code>secondaryButtonHoverColor</code></td><td>Couleur d'arrière-plan du bouton secondaire au survol.</td></tr><tr><td><code>secondaryButtonBorderColor</code></td><td>Couleur de bordure du bouton secondaire.</td></tr><tr><td><code>documentSelectorColor</code></td><td>Couleur d'arrière-plan du sélecteur de document.</td></tr><tr><td><code>documentSelectorTextColor</code></td><td>Couleur du texte du sélecteur de document.</td></tr><tr><td><code>documentSelectorActiveBorderColor</code></td><td>Couleur d'arrière-plan active du sélecteur de document.</td></tr><tr><td><code>documentSelectorHoverBorderColor</code></td><td>Couleur d'arrière-plan du sélecteur de document au survol.</td></tr><tr><td><code>linkHoverColor</code></td><td>Couleur d'arrière-plan du lien au survol.</td></tr><tr><td><code>linkActiveColor</code></td><td>Couleur d'arrière-plan active du lien.</td></tr><tr><td><code>linkUnderlineColor</code></td><td>Couleur du soulignement du lien.</td></tr><tr><td><code>linkHoverTextColor</code></td><td>Couleur du texte du lien au survol.</td></tr><tr><td><code>bodyTextColor</code></td><td>Couleur du texte du contenu du SDK.</td></tr><tr><td><code>headingTextColor</code></td><td>Couleur du texte des titres du SDK.</td></tr><tr><td><code>subheadingTextColor</code></td><td>Couleur du texte des sous-titres du SDK.</td></tr></tbody></table>

### Logo

Le `logo` l'objet possède les attributs suivants :

* `lightLogoUrl`: URL pour la version claire de votre logo.
* `darkLogoUrl`:  URL pour la version sombre de votre logo.

#### Exemple de branding du logo

```javascript
branding: {
  appearance: {
    primaryButtonColor: '#FF0000',
  },
  logo: {
    lightLogoUrl: 'light_logo_url',
    darkLogoUrl: 'dark_logo_url',
  }
},
```

### Texte de branding

Le `textBrand` l’attribut représente le format textuel de votre marque.

#### Exemple de branding textuel

```javascript
branding: {
  appearance: {
    primaryButtonColor: '#FF0000',
  },
  textBrand: 'Acme Bank'
}
```

{% hint style="info" %}
Si `logo` et `textBrand` sont spécifiés en même temps, `logo` a priorité.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.complycube.com/documentation/sdks/sdks-fr/integrations-web/web-sdk-quick-guide/web-sdk-quick-guide-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.