Integración basada en comprobaciones

Crea flujos de KYC y verificación de identidad basados en comprobaciones en apps de React Native.

Descripción general

Esta guía le muestra cómo integrar el SDK de React Native con ComplyCube utilizando el enfoque basado en comprobaciones, dándote control directo sobre cada paso de verificación individual.

Estás viendo la basado en comprobaciones guía del SDK: un enfoque que ofrece un control detallado, pero es más adecuado para socios o casos de uso avanzados. Recomendamos usar integración del flujo de trabajo para la mayoría de las implementaciones.

Flujo de integración

El SDK móvil se ejecuta en tu aplicación móvil, pero depende de tu backend para crear tokens seguros. Así es como funciona:

Crear un cliente

Registrar un nuevo cliente (es decir, cliente) usando la API de ComplyCube.

Generar un token del SDK

Tu backend solicita un token JWT vinculado a ese cliente.

Inicializa el SDK en tu aplicación móvil

Pasa el token y la configuración al inicializador del SDK.

Captura documentos, vídeos y selfies

El SDK guía a tu cliente a través de los pasos requeridos.

Realizar comprobaciones

Los datos capturados se envían de forma segura a ComplyCube para las comprobaciones de verificación, y los resultados se entregan en tiempo real a través de la API o de webhooks.

Guía de integración

Explore el código fuente y los proyectos de ejemplo en nuestro repositorio: .

Instale el SDK

Instala la biblioteca de React Native ejecutando:

npm i -s @complycube/react-native

Completa los pasos en las iOS y Android pestañas.

Integración de Sentry

Si estás integrando Sentry en tu proyecto de React Native, podrías encontrarte con el siguiente error de compilación:

No se puede encontrar el archivo 'SentryDefines.h'.

Este problema ocurre debido a una incompatibilidad de versiones entre el paquete Sentry React Native y el SDK nativo de Sentry.

Para resolver este error (a partir de @sentry/react-native v5.31.0 y Sentry para iOS v8.36.0), actualiza las sentencias de importación en tu código.

En SentrySdkInfo.h y SentryInternalSerializable.h, sustituye:

// Sustituye
#import "SentryDefines.h"

// Por
#import <Sentry/SentryDefines.h>

Antes de usar el SDK de ComplyCube, instale el CocoaPods plugin ejecutando el siguiente comando en tu terminal:
```
sudo gem install cocoapods
```

Añade repositorios de plugins e instala el pod usando tu Podfile:

source 'https://github.com/CocoaPods/Specs.git'
…
platform :iOS, ’13.0’

target ‘YourApp’ do
    …
  pod 'ComplyCubeMobileSDK'
end

post_install do |installer|
    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |build_configuration|
            build_configuration.build_settings['ENABLE_BITCODE'] = 'NO'
            build_configuration.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
            build_configuration.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.1'
            build_configuration.build_settings['ARCHS'] = ['$(ARCHS_STANDARD)', 'x86_64']
            build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = ['arm64', 'arm64e', 'armv7', 'armv7s']
            build_configuration.build_settings['GENERATE_INFOPLIST_FILE'] = 'YES'
        end
    end
end

Permisos de la aplicación

Nuestro SDK utiliza la cámara y el micrófono del dispositivo para la captura. Debe añadir las siguientes claves a su aplicación Info.plist archivo.

NSCameraUsageDescription

<key>NSCameraUsageDescription</key>
<string>Se utiliza para capturar biometría facial y documentos</string>

NSMicrophoneUsageDescription

<key>NSMicrophoneUsageDescription</key>
<string>Se utiliza para capturar biometría de vídeo</string>

Nuestro SDK requiere los repositorios siguientes.

repositories {
  mavenCentral()
}

dependencies {
    implementation "com.complycube:complycube-sdk:+"
}

Crear un cliente

Todo flujo de verificación comienza con un cliente (es decir, cliente). Usa la API para crear el cliente.

Esto debe hacerse en tu backend de la app móvil servidor, no en la propia aplicación móvil.

Ejemplo de solicitud

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

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

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)

use ComplyCube\ComplyCubeClient;

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

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

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

Ejemplo de respuesta

La respuesta contendrá un id (el ID del cliente). Es necesario para el siguiente paso.

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

Consulta Referencia de la API de clientes para obtener más información.

Genera un token del SDK

Tu backend debe crear un token del SDK para cada nuevo flujo. Este token permite a los clientes enviar datos personales de forma segura desde tu app móvil a ComplyCube.

Los tokens tienen una vida útil corta y no deben reutilizarse.

Ejemplo de solicitud

curl -X POST https://api.complycube.com/v1/tokens \\
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
           "clientId":"CLIENT_ID",
           "appId": "com.complycube.SampleApp"
         }'

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

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

const token = await complycube.token.generate("CLIENT_ID", {
    appId: "com.complycube.SampleApp"
});

from complycube import ComplyCubeClient

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

token = cc_api.tokens.create('CLIENT_ID', appId='com.complycube.SampleApp')

using ComplyCube.Net;
using ComplyCube.Net.Resources.SDKTokens;

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

var sdkTokenRequest = {
  clientId = "CLIENT_ID",
  appId = "com.complycube.SampleApp"
}

var sdkToken = await sdkTokenApi.GenerateToken(sdkTokenRequest);

Ejemplo de respuesta

{
    "token": "<CLIENT_TOKEN>"
}

Consulta Referencia de la API de tokens del SDK para obtener más información.

Prepara las etapas

Configura las etapas que deseas incluir en tu flujo.

const stages = [
  {
    name: "intro",
    heading: "Verificación de identidad de Green Bank",
  },
  {
    name: "documentCapture",
    showGuidance: false,
    useMLAssistance: true,
    retryLimit: 1,
    documentTypes: {
      passport: true,
      driving_license: ["GB", "FR"],
    },
  },
  "faceCapture",
];

Inicialice el SDK

Ahora puedes inicializar un flujo. La secuencia de etapas que especifiques determina el orden en que tu cliente ve esas etapas.

import { ComplyCube } from "@complycube/react-native";
// ...

const settings = {
  clientID: "<CLIENT_ID>",
  clientToken: "<CLIENT_TOKEN>",
  stages: stages,
  // ... otros ajustes
};

return (
  <View style={styles.container}>
    <ComplyCube settings={settings} />
  </View>
);

Realizar checks

Usando los resultados devueltos en la onSuccess callback, puedes activar tu backend móvil para ejecutar las comprobaciones necesarias en tu cliente.

Por ejemplo, usa el resultado de una captura de selfie y documento de la siguiente manera:

result.documentId para ejecutar un Comprobación de documento.
result.documentId y result.livePhotoId para ejecutar un Comprobación de identidad.

Ejemplo de solicitud para una comprobación de documento

curl -X POST https://api.complycube.com/v1/checks \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
            "clientId":"CLIENT_ID",
            "type": "document_check",
            "documentId":"DOCUMENT_ID"
         }'

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

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

const check = await complycube.check.create("CLIENT_ID", {
    type: "document_check",
    documentId: "DOCUMENT_ID"
});

from complycube import ComplyCubeClient

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

check = cc_api.checks.create(
    "CLIENT_ID", 
    "document_check", 
    documentId="DOCUMENT_ID"
)

use ComplyCube\ComplyCubeClient;

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

$result = $ccapi->checks()->create('CLIENT_ID', [
    'type' => 'document_check',
    'documentId' => 'DOCUMENT_ID'
]);

using ComplyCube.Net;
using ComplyCube.Net.Resources.Checks;

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

var checkRequest = new CheckRequest {
  clientId = "CLIENT_ID",
  type = "document_check",
  documentId = "DOCUMENT_ID"
};

var check = await checkApi.CreateAsync(checkRequest);

Si has configurado webhooks como se describe en nuestra guía de webhooks, se te notificará una vez que un check se complete.

Para recuperar los resultados del check, puedes realizar una solicitud GET de check.

Recuperar los resultados de la verificación

Tu backend móvil puede recuperar todos los resultados de las comprobaciones usando nuestra API.

Todas nuestras comprobaciones son asíncronas. Si has configurado webhooks como se describe en nuestra guía de webhooks, se te notificará una vez que un check se complete.

Para recuperar los resultados del check, puedes realizar una solicitud GET de check.

Ejemplo de solicitud

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

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

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

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

using ComplyCube.Net;
using ComplyCube.Net.Resources.Checks;

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

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

Etapas

Cada etapa del flujo puede personalizarse para crear el recorrido ideal para tus clientes.

El fragmento a continuación muestra cómo configurar un flujo personalizado utilizando el SDK móvil de ComplyCube.

const stages = [
  {
    name: 'intro',
    // ... otros ajustes
  },
  {
    name: "consent",
    // ... otros ajustes
  },
  {
    name: 'documentCapture',
    // ... otros ajustes
  },
  {
    name: "faceCapture",
    // ... otros ajustes
  },
  {
    name: "poaCapture",
    // ... otros ajustes
  },
  {
    name: "complete",
    // ... otros ajustes
  }
];

const settings = {
  clientID: "CLIENT_ID",
  clientToken: "SDK_TOKEN",
  stages: stages,
  language: "en",
  lookAndFeel: {/*...*/}
}

<ComplyCube
  settings={settings} 
  onSuccess={/*...*/} 
  onCancel={/*...*/}
  onError={/*...*/}
  onEventCallback={/*...*/}
/>

Bienvenido

La pantalla de bienvenida siempre se muestra primero en el flujo de verificación. Muestra un mensaje de bienvenida junto con un resumen de las etapas configuradas que el usuario completará.

Puedes personalizar el título de la pantalla para que se alinee con el tono y la identidad de tu aplicación.

const settings = {
  // ... otros ajustes
  stages: [
    {
      name: "intro",
      heading: "Título personalizado de la pantalla",
      message: "Mensaje de bienvenida personalizado.",
    },
    // ... otras etapas
  ],
};

Consentimiento

Esta etapa se utiliza para recopilar el consentimiento explícito del usuario antes de continuar con el flujo de verificación. Le ayuda a cumplir con los requisitos regulatorios y de conformidad cuando corresponda.

Puede personalizar el título y el mensaje de la pantalla para que se adapten a sus necesidades legales o de marca.

const settings = {
  // ... otros ajustes
  stages: [
    {
      name: "consent",
      heading: "Título personalizado de la pantalla de consentimiento"
    },
    // ... otras etapas
  ],
};

Selfie en foto y video

Puede solicitar una foto selfie (es decir, una Foto en vivo) o un video selfie (es decir, un Video en vivo) del cliente como parte del proceso de verificación biométrica.

Foto: Captura una imagen estática y realiza una comprobación pasiva de vitalidad antes de permitir el envío.
Video: Graba un video corto en el que el usuario completa un reto en pantalla (p. ej., movimiento de la cabeza o una frase hablada).

Si intenta añadir ambos tipos de etapas, el SDK lanzará un ComplyCubeErrorCode.BiometricStageCount error que indica que hay varias etapas en conflicto.

const settings = {
  // ... otros ajustes
  stages: [
    {
      name: "faceCapture",
      mode: "photo",
      // Habilita la asistencia de ML durante la captura
      useMLAssistance: false,
    },
    // ... otras etapas
  ],
};

const settings = {
  // ... otros ajustes
  stages: [
    {
      name: "faceCapture",
      mode: "video",
      // Habilita la asistencia de ML durante la captura
      useMLAssistance: false,
    },
    // ... otras etapas
  ],
};

Documento

La fase de Documento permite a los usuarios seleccionar y capturar un documento de identidad para su verificación (p. ej., pasaporte, documento de identidad, permiso de residencia). Puede personalizar estas pantallas para:

Limitar el alcance de los tipos de documento que el cliente puede seleccionar, por ejemplo, solo Pasaporte.
Configurar los países emisores de documentos permitidos para cada tipo de documento.
Añadir o quitar la captura automatizada mediante asistencia inteligente.
Mostrar u ocultar las pantallas de instrucciones antes de la captura.
Establecer un límite de reintentos para permitir que los clientes avancen en el recorrido independientemente de la calidad de la captura.

Si proporciona solo un tipo de documento, se omitirá la pantalla de selección del tipo de documento. La pantalla de selección de país se omitirá si proporciona un único país para un tipo de documento determinado.

Puede controlar si las pantallas de instrucciones se muestran antes de cada captura con cámara habilitando o deshabilitando el modo de guía. Deshabilite la guía solo si sus usuarios ya están claramente informados sobre los pasos de captura, ya que estas pantallas ayudan a reducir los errores de los usuarios y a mejorar la calidad de la captura.

Tenga en cuenta que el retryLimit que configure aquí tendrá prioridad sobre el límite de reintentos que se haya establecido globalmente en sus configuración de automatización.

const settings = {
  // ... otros ajustes
  stages: [
    {
      name: "documentCapture",

      // Habilita o deshabilita orientación adicional para el usuario
      showGuidance: false,

      // Habilita la asistencia de ML durante la captura
      useMLAssistance: true,

      // Establece un máximo de intentos de comprobación de calidad antes de subir
      retryLimit: 1,

      // Habilita o deshabilita la capacidad de subir una imagen desde un archivo
      liveCapture: false,

      // Establece los tipos de documentos y limita los países habilitados
      documentTypes: {
        passport: true,
        driving_license: ["GB", "US"],
      },
    },
    // ... otras etapas
  ],
};

Captura NFC

El SDK móvil de ComplyCube admite lectura basada en NFC chip RFID la lectura de documentos de identidad equipados con chips integrados. Esto permite una extracción de datos segura y una autenticación documental de alta fiabilidad.

Póngase en contacto con su Gerente de cuenta o soporte para obtener acceso a nuestro SDK móvil con compatibilidad NFC.

Requisitos previos

Para usar esta función, tu aplicación debe tener la lectura de etiquetas de Comunicación de Campo Cercano habilitada. Para añadir esta capacidad a tu aplicación, consulta la guía de Apple aquí.

Instala el CocoaPods Artifactory plugin ejecutando el siguiente comando en tu terminal:
```
gem install cocoapods-art
```
Para añadir la biblioteca, copia las credenciales de tu repositorio en un .netrc archivo en tu directorio de inicio y configura el repositorio:
```
pod repo-art add cc-cocoapods-release-local "https://complycuberepo.jfrog.io/artifactory/api/pods/cc-cocoapods-release-local"
```
Recuerda obtener tus credenciales de JFrog usando el Configurar botón aquí.

Añade repositorios de plugins e instala el pod usando tu Podfile:

 plugin 'cocoapods-art', :sources => [
   'cc-cocoapods-release-local',
   'trunk'
 ]
 ...
 platform :ios, '13.0' # O superior

 target 'YourApp' do
   use_frameworks!
   use_modular_headers!
   ...
   pod 'ComplyCubeMobileSDK', '2.0.x-nfc'
   ...
 en

Debes añadir las siguientes claves a tu aplicación Info.plist archivo:
```
<key>NFCReaderUsageDescription</key>
<string>Requerido para leer documentos con NFC habilitado</string>
```

Para leer correctamente las etiquetas NFC, debes añadir las siguientes entradas al target de tu aplicación Info.plist archivo:

<key>com.apple.developer.nfc.readersession.felica.systemcodes</key>
<array>
  <string>12FC</string>
</array>
<key>com.apple.developer.nfc.readersession.iso7816.select-identifiers</key>
<array>
  <string>A0000002471001</string>
  <string>A0000002472001</string>
  <string>00000000000000</string>
  <string>D2760000850101</string>
  <string>E80704007F00070302</string>
  <string>A000000167455349474E</string>
  <string>A00000045645444C2D3031</string>
</array>

Añade lo siguiente en tu Runner.entitlements archivo:
```
<key>com.apple.developer.nfc.readersession.formats</key>
<array><string>TAG</string></array>
```
Para habilitar NFC al compilar tu app de iOS, pasa la USE_CCNFC variable de entorno durante la compilación:
```
USE_CCNFC=true flutter build ios
```
Para mantener esto habilitado en todas las compilaciones de iOS, añade la siguiente línea cerca de la parte superior de tu ios/Podfile:
```
ENV['USE_CCNFC'] ||= 'true'
```

Comienza añadiendo tus credenciales de acceso para el repositorio del SDK habilitado para NFC de ComplyCube en el gradle.properties archivo de tu aplicación móvil:

USE_NFC=true
artifactory_contextUrl=https://complycuberepo.jfrog.io/artifactory/cc-gradle-release
artifactory_user=<YOUR_USERNAME>
artifactory_password=<YOUR_PASSWORD>

Reemplace <YOUR_USERNAME> y <YOUR_PASSWORD> con sus credenciales de ComplyCube Artifactory. Si no tiene acceso, póngase en contacto con el Soporte de ComplyCube para solicitar credenciales.

Luego, actualiza el nivel de tu proyecto build.gradle o build.gradle.kts archivo con la configuración Maven del repositorio del SDK de ComplyCube:

repositories {
    google()
    mavenCentral()
    maven {
        url project.findProperty("artifactory_contextUrl")
        credentials {
            username = project.findProperty("artifactory_user")
            password = project.findProperty("artifactory_password")
        }
    }
}

repositories {
    google()
    mavenCentral()
    maven {
        url = uri(project.findProperty("artifactory_contextUrl") as String)
        credentials {
            username = project.findProperty("artifactory_user") as String?
            password = project.findProperty("artifactory_password") as String?
        }
    }
}

Habilitar captura NFC

const settings = {
    // ... otros ajustes
    stages : [
      {
        name: 'documentCapture',
        // Añade esta propiedad para habilitar NFC
        nfcEnabled: true
        ...
      },
      // ... otras etapas
    ]
}

Captura de dirección

Esta etapa permite a los usuarios introducir manualmente su dirección residencial. Puede personalizarla para:

Restringir la entrada a países específicos
Activar o desactivar la función de autocompletado de direcciones para una introducción más rápida y precisa

const settings = {
  // ... otros ajustes
  stages: [
    {
      name: "addressCapture",

      // Esto habilita nuestra función de autocompletado de direcciones
      useAutoComplete: false,
      
      // Una lista de países aceptables para la captura de direcciones
      allowedCountries: ['GB','US']
    },
    // ... otras etapas
  ],
};

Comprobante de domicilio

Esta etapa permite a los clientes enviar un documento que verifique su dirección residencial. Puede configurar qué tipos de documentos se aceptan, como facturas de servicios públicos o extractos bancarios, y elegir si los clientes pueden cargar un archivo o si deben capturar el documento en vivo usando la cámara de su dispositivo.

De forma predeterminada, esta etapa incluye la etapa de captura de dirección con el autocompletado habilitado para ayudar a los usuarios durante la entrada. El autocompletado se puede deshabilitar si no es necesario.

const settings = {
  // ... otros ajustes
  stages: [
    {
      name: "poaCapture",

      // Cuando se deshabilita, el cliente se verá obligado a realizar una captura en vivo
      liveCapture: false,
    },
    // ... otras etapas
  ],
};

Finalización

Puede incluir una etapa de finalización al final del flujo para confirmar que el proceso se ha completado correctamente. Esta pantalla proporciona un punto final claro para el usuario y puede personalizarse para mostrar un mensaje de confirmación o los siguientes pasos.

const settings = {
  // ... otros ajustes
  stages: [
    {
      name: "complete",
      heading: "¡Gracias!",
      message: "Tu envío de KYC se ha completado.",
    },
    // ... otras etapas
  ],
};

Identidad de marca

El SDK te permite personalizar la interfaz de usuario para que coincida con la identidad visual de tu aplicación. Puedes definir los colores principal y de acento durante la configuración para alinear el flujo de verificación con las directrices de tu marca. Obtén más información sobre nuestras propiedades de apariencia (ver más abajo).

const settings = {
  // ...
  lookAndFeel: {
    // Color de fondo del botón de acción principal
    primaryButtonBgColor: "#FFFFFF",

    // Fuerza al SDK al modo 'dark', 'light' o 'inherit'
    uiInterfaceStyle: "dark",
  },
};

Propiedades de apariencia

Propiedad de apariencia

Descripción

primaryButtonBgColor

Color de fondo del botón de acción principal.

primaryButtonTextColor

Color del texto del botón de acción principal.

primaryButtonBorderColor

Color del borde del botón de acción principal.

secondaryButtonBgColor

Color de fondo del botón secundario.

secondaryButtonPressedBgColor

Color de fondo del botón de acción secundaria al pulsarlo. No es compatible con Android.

secondaryButtonTextColor

Color del texto del botón de acción secundaria.

secondaryButtonBorderColor

Color del borde del botón de acción secundaria.

documentTypeSelectorBgColor

Color del botón de selección del tipo de documento.

documentTypeSelectorBorderColor

Color del borde del botón de selección del tipo de documento.

documentTypeSelectorTitleTextColor

Color del texto del título de selección del tipo de documento.

documentTypeSelectorDescriptionTextColor

Color del texto de la descripción de selección del tipo de documento.

documentTypeSelectorIconColor

Color del icono de selección del tipo de documento.

bodyTextColor

Color del texto del cuerpo de la pantalla.

linkButtonTextColor

Color de los enlaces. No es compatible con Android.

headingTextColor

Color del texto del título principal.

subheadingTextColor

Color del texto del subtítulo.

infoPanelTitleColor

Color del título del panel de información.

infoPanelDescriptionTextColor

Color del texto de la descripción del panel de información.

infoPanelBgColor

Color de fondo del panel de información.

infoPanelIconColor

Color del icono del panel de información.

errorPanelTitleColor

Color del título del panel de error.

errorPanelDescriptionTextColor

Color del texto de la descripción del panel de error.

errorPanelBgColor

Color de fondo del panel de error.

errorPanelIconColor

Color del icono del panel de error.

cameraButtonBgColor

Color de fondo del botón de captura de la cámara.

uiInterfaceStyle

Configura el SDK para usar el modo oscuro, el modo claro o el heredado del sistema.

Localización

El SDK es compatible con varios idiomas, incluidos los que se enumeran a continuación.

Árabe - ar 🇦🇪
Chino (simplificado) - zh 🇨🇳
Chino (tradicional) - hk 🇨🇳
Neerlandés - nl 🇳🇱
Inglés - en 🇺🇸
Francés - fr 🇫🇷
Alemán - de 🇩🇪
Hindi - hi 🇮🇳
Indonesio - id 🇮🇩
Italiano - it 🇮🇹

Japonés - ja 🇯🇵
Coreano - ko 🇰🇷
Noruego - no 🇳🇴
Polaco - po 🇵🇱
Portugués - pt 🇵🇹
Español - es 🇪🇸
Sueco - sv 🇸🇪
Tailandés - th 🇹🇭
Vietnamita - vi 🇻🇳
y más...

Gestión de resultados

Para ejecutar comprobaciones de verificación, debe implementar los éxito, cancelado, y error callbacks.

Al completarse correctamente (onSuccess), puede activar solicitudes de comprobación desde su backend utilizando los IDs de recursos devueltos en el objeto de resultado. Estos IDs corresponden a los activos cargados (p. ej., documentos, selfies) y pueden usarse para iniciar comprobaciones de verificación a través de la API de ComplyCube.

Si el usuario abandona el flujo antes de completarlo, el onCancelled callback se invoca con un motivo descriptivo que indica por qué se canceló la sesión (p. ej., salida del usuario, tiempo de espera agotado, permiso denegado)

En algunos casos, el cliente puede cancelar el flujo después de completar una o más etapas de captura. Si esto ocurre, es posible que cualquier dato capturado antes de la cancelación, como documentos o medios biométricos, ya se haya cargado en su registro de cliente.

Si el SDK encuentra un problema, el onError callback se activa con un ComplyCubeError objeto que contiene el tipo de error y el mensaje. Consulte los códigos de error (véase a continuación) para obtener una lista completa de los posibles casos de error.

function onSuccess(results){
  /*
    Gestión de resultados satisfactorios:
    Nuestro flujo predeterminado incluye tres componentes: un documento de identidad,
    una selfie (foto en vivo) y un comprobante de domicilio. Tras una 
    finalización exitosa, el parámetro 'results' contendrá: 
      - "documentIds": ["xxxxx"]
      - "livePhotoIds": ["xxxxx"]
      - "poaIds": ["xxxxxx"]
  */
  console.log(results);
}

function onCancelled(){
  console.log("El usuario canceló");
}

function onError(error){
  console.log(error);
}

return(<View>
    <ComplyCube 
      settings={settings}
      onSuccess={onSuccess}
      onCancel={onCancelled}
      onError={onError}
       />
  </View>
)

Códigos de error

Tipo de error

Descripción

BiometricStageCount

La configuración incluye duplicados foto de selfie o video de selfie etapas.

Cancelado

El cliente canceló el flujo y salió del SDK (activó la onCancelled devolución de llamada).

Conectividad

Se ha producido un error de red.

DocumentMandatory

Una etapa de documento es obligatorio según las etapas configuradas, pero no se ha incluido.

ExpiredToken

El token del SDK ha expirado. Genere un nuevo token y reinicie el flujo.

FlowError

Se produjo un error irrecuperable durante el flujo.

InvalidCountryCode

Se proporcionó un código de país no válido.

JailBroken

El SDK no puede ejecutarse en este dispositivo porque ha sido liberado de restricciones (jailbreak) o comprometido.

NoDiskAccess

El cliente denegó los permisos de acceso al disco requeridos por el SDK.

NoDocumentTypes

Una etapa de documento se inicializó sin especificar ningún tipo de documento.

NoResult

No se devolvió ningún resultado a la devolución de llamada. Si esto persiste, póngase en contacto con soporte.

NoUserConsent

El cliente no ha dado su consentimiento para continuar con el flujo del SDK.

NotAuthorized

El SDK intentó acceder a un extremo para el que no está autorizado.

Desconocido

Se produjo un error inesperado. Si esto ocurre repetidamente, contacte con soporte.

UnsupportedCountryTypeCombination

La combinación de país y tipo de documento seleccionada no es compatible.

UnsupportedDocumentType

El tipo de documento proporcionado no es compatible.

UploadError

Se produjo un error al cargar un documento o una selfie.

UploadRequireGuidance

Si useLiveCaptureOnly está configurado en false, la guía debe habilitarse configurando isGuidanceEnabled en true.

Seguimiento de eventos

El SDK registra una variedad de eventos durante todo el flujo de verificación, cubriendo todas las interacciones clave del usuario en cada etapa. Consulte a continuación la lista de eventos.

Si necesita implementar analíticas personalizadas, puede conectarse a estos eventos y activar su propia lógica de seguimiento en consecuencia.

Para incorporar tu propio seguimiento, define una función y aplícala usando el eventHandler propiedad en tus ajustes:

function myCustomEventHandler(event){
  // Inserta aquí código personalizado de seguimiento de usuarios
  console.log(event.code);
  console.log(event.message);
}

const settings = {
  eventHandler: myCustomEventHandler,
  // ... otros ajustes
}

Eventos

Evento

INTRODUCCIÓN El cliente llegó a la pantalla de introducción.

ETAPA_DE_CONSENTIMIENTO El cliente llegó a la pantalla de consentimiento.

ADVERTENCIA_DE_ETAPA_DE_CONSENTIMIENTO El cliente intentó salir sin dar su consentimiento.

PERMISO_DE_ACCESO_A_LA_CÁMARA El cliente llegó a la pantalla de solicitud de permiso de la cámara.

ETAPA_DE_GUÍA_DE_CAPTURA_DE_DOCUMENTO El cliente llegó a la pantalla de guía de captura de documentos.

ETAPA_DE_TIPO_DE_DOCUMENTO El cliente llegó a la pantalla de selección del tipo de documento para una captura de documento.

ETAPA_DE_SELECCIÓN_DE_PAÍS El cliente llegó a la pantalla de selección de país para una captura de documento.

ETAPA_DE_CÁMARA_DE_DOCUMENTO_DE_UNA_CARA El cliente llegó a la etapa de captura con cámara para un documento de identificación de una sola cara.

ETAPA_DE_CÁMARA_MANUAL_DE_DOCUMENTO_DE_UNA_CARA El cliente llegó a la pantalla de captura manual con cámara de un documento de identificación de una sola cara.

ETAPA_DE_REVISIÓN_DE_CALIDAD_DE_DOCUMENTO_DE_UNA_CARA El cliente llegó a la pantalla de vista previa de calidad para un documento de identificación de una sola cara.

ETAPA_DE_CÁMARA_DELANTERA_DE_DOCUMENTO_DE_DOS_CARAS El cliente llegó a la pantalla de captura con cámara para la cara frontal de un documento de identificación de dos caras.

ETAPA_DE_CÁMARA_MANUAL_DELANTERA_DE_DOCUMENTO_DE_DOS_CARAS El cliente llegó a la pantalla de captura manual con cámara para la cara frontal de un documento de identificación de dos caras.

ETAPA_DE_REVISIÓN_DE_CALIDAD_DELANTERA_DE_DOCUMENTO_DE_DOS_CARAS El cliente llegó a la pantalla de vista previa de calidad para la cara frontal de un documento de identificación de dos caras.

ETAPA_DE_CÁMARA_POSTERIOR_DE_DOCUMENTO_DE_DOS_CARAS El cliente llegó a la pantalla de captura con cámara para la cara posterior de un documento de identificación de dos caras.

ETAPA_DE_CÁMARA_MANUAL_POSTERIOR_DE_DOCUMENTO_DE_DOS_CARAS El cliente llegó a la pantalla de captura manual con cámara para la cara posterior de un documento de identificación de dos caras.

ETAPA_DE_REVISIÓN_DE_CALIDAD_POSTERIOR_DE_DOCUMENTO_DE_DOS_CARAS El cliente llegó a la pantalla de vista previa de calidad para la cara posterior de un documento de identificación de dos caras.

ETAPA_DE_GUÍA_DE_CAPTURA_DE_SELFIE El cliente llegó a la pantalla de guía de captura de selfie.

ETAPA_DE_CÁMARA_DE_SELFIE El cliente llegó a la pantalla de cámara para capturar la foto de selfie.

ETAPA_DE_CÁMARA_MANUAL_DE_SELFIE El cliente llegó a la pantalla de cámara para capturar manualmente la foto de selfie.

ETAPA_DE_REVISIÓN_DE_CALIDAD_DE_SELFIE El cliente llegó a la pantalla de revisión de la foto capturada de la selfie.

ETAPA_DE_CÁMARA_DE_VIDEO_SELFIE El cliente llegó a la pantalla de cámara para selfie en video.

ETAPA_DE_CÁMARA_MANUAL_DE_VIDEO_SELFIE El cliente llegó a la pantalla de captura manual con cámara para una selfie en video.

ETAPA_DE_ACCIÓN_DE_VIDEO_SELFIE_UNO El cliente llegó a la primera acción en una captura de selfie en video.

ETAPA_DE_ACCIÓN_DE_VIDEO_SELFIE_DOS El cliente llegó a la segunda acción en una captura de selfie en video.

ETAPA_DE_REVISIÓN_DE_CALIDAD_DE_VIDEO_SELFIE El cliente llegó a la pantalla de cámara para captura manual de selfie en video.

ETAPA_DE_GUÍA_DE_CAPTURA_DE_COMPROBANTE_DE_DOMICILIO El cliente llegó a la pantalla de guía de captura de comprobante de domicilio.

ETAPA_DE_TIPO_DE_DOCUMENTO_DE_COMPROBANTE_DE_DOMICILIO El cliente llegó a la pantalla de selección del tipo de documento para una captura de comprobante de domicilio.

ETAPA_DE_SELECCIÓN_DE_PAÍS_DE_COMPROBANTE_DE_DOMICILIO El cliente llegó a la pantalla de selección de país para una captura de comprobante de domicilio.

ETAPA_DE_CÁMARA_DE_COMPROBANTE_DE_DOMICILIO_DE_UNA_CARA El cliente llegó a la etapa de captura con cámara para un comprobante de domicilio de una sola cara.

ETAPA_DE_CÁMARA_MANUAL_DE_COMPROBANTE_DE_DOMICILIO_DE_UNA_CARA El cliente llegó a la etapa de captura manual con cámara para un comprobante de domicilio de una sola cara.

ETAPA_DE_REVISIÓN_DE_CALIDAD_DE_COMPROBANTE_DE_DOMICILIO_DE_UNA_CARA El cliente llegó a la pantalla de vista previa de calidad para un comprobante de domicilio de una sola cara.

ETAPA_DE_CÁMARA_DELANTERA_DE_COMPROBANTE_DE_DOMICILIO_DE_DOS_CARAS El cliente llegó a la etapa de captura con cámara para la cara frontal de un comprobante de domicilio de dos caras.

ETAPA_DE_CÁMARA_MANUAL_DELANTERA_DE_COMPROBANTE_DE_DOMICILIO_DE_DOS_CARAS El cliente llegó a la etapa de captura manual con cámara para la cara frontal de un comprobante de domicilio de dos caras.

ETAPA_DE_REVISIÓN_DE_CALIDAD_DELANTERA_DE_COMPROBANTE_DE_DOMICILIO_DE_DOS_CARAS El cliente llegó a la pantalla de vista previa de calidad para la cara frontal de un comprobante de domicilio de dos caras.

ETAPA_DE_CÁMARA_POSTERIOR_DE_COMPROBANTE_DE_DOMICILIO_DE_DOS_CARAS El cliente llegó a la etapa de captura con cámara para la cara posterior de un comprobante de domicilio de dos caras.

ETAPA_DE_CÁMARA_MANUAL_POSTERIOR_DE_COMPROBANTE_DE_DOMICILIO_DE_DOS_CARAS El cliente llegó a la etapa de captura manual con cámara para la cara posterior de un comprobante de domicilio de dos caras.

ETAPA_DE_REVISIÓN_DE_CALIDAD_POSTERIOR_DE_COMPROBANTE_DE_DOMICILIO_DE_DOS_CARAS El cliente llegó a la pantalla de vista previa de calidad para la cara posterior de un comprobante de domicilio de dos caras.

ETAPA_DE_FINALIZACIÓN El cliente ha llegado a la pantalla de finalización.

Gestión de vencimiento del token

Para gestionar la expiración del token de forma fluida, puedes proporcionar una función de devolución de llamada que genere un nuevo token del SDK cuando sea necesario. Esto permite que el flujo continúe sin interrupciones, sin que el usuario tenga que reiniciar la sesión manualmente.

function myCustomExpiryHandler(){
  // Inserte aquí el código personalizado de renovación del token
}

const settings = {
  tokenExpiryHandler: myCustomExpiryHandler,
  // ... otros ajustes
}