Instalacion

1. Obtene tu publishable key

Inicia sesion en tu dashboard de Veridia y copia una publishable key desde la seccion API keys.

Test key — se ve como qv_pub_test_.... Usala mientras integras.
Live key — se ve como qv_pub_.... Usala en produccion.

Las publishable keys son seguras de exponer en HTML del cliente. Identifican a tu tenant y al origen del widget, pero no pueden leer ni modificar datos de otros tenants.

:::tip Whitelist de dominios En el dashboard, configura los allowed origins para cada key. El widget rechaza cargar en cualquier dominio que no este en esa lista — te protege de que alguien mas use tu key en su sitio. :::

Pega dos tags de script y el custom element en cualquier pagina:

<!-- 1. Carga face-api.js (UMD) y despues el bundle del widget (ESM module) -->
<script src="https://widget.xxuxe.online/face-api.js"></script>
<script type="module" src="https://widget.xxuxe.online/veridia-widget.min.js"></script>

<!-- 2. Insertar el widget -->
<veridia-widget
  publishable-key="qv_pub_test_TU_KEY_AQUI"
  api-base="https://api.xxuxe.online"
  user-ref="customer-12345"
  country="PY"
  document-type="dni"
  locale="es">
</veridia-widget>

<!-- 3. Escuchar eventos -->
<script>
  document.querySelector('veridia-widget')
    .addEventListener('veridia:complete', (e) => {
      console.log('verificacion:', e.detail.verificationId);
      // Hace polling a GET /v1/verify/:id para el veredicto final
    });
</script>

Esa es la integracion completa. Abri la pagina en un telefono o laptop con camara, toca "Comenzar", y tenes una verificacion biometrica funcionando.

Atributos de configuracion

Atributo	Requerido	Descripcion
`publishable-key`	Si	Tu key `qv_pub_` o `qv_pub_test_` del dashboard
`api-base`	Si	Endpoint de la API Veridia — `https://api.xxuxe.online` para produccion
`user-ref`	No	Tu propio identificador de usuario — eco en eventos y webhooks (max 128 chars)
`country`	No	Codigo ISO 3166-1 alpha-2 (ej. `PY`, `BR`, `MX`) — mejora accuracy del OCR
`document-type`	No	Uno de: `dni`, `passport`, `drivers_license`, `national_id`, `other`
`submitted-full-name`	No	Nombre completo del usuario para fuzzy matching contra el documento (max 255 chars)
`require-doc-back`	No	`"true"` si tu tipo de documento requiere foto del reverso (default: `"false"`)
`locale`	No	Idioma de UI: `en`, `es` o `pt`. Default: locale del browser, fallback a ingles
`accent-color`	No	Color hex para botones y estados activos (ej. `"#2563EB"`)

Ejemplos por framework

React

import { useEffect, useRef } from 'react';

export function VeridiaVerification({ userRef, onComplete }) {
  const widgetRef = useRef(null);

  useEffect(() => {
    const handler = (e) => onComplete(e.detail);
    const node = widgetRef.current;
    node?.addEventListener('veridia:complete', handler);
    return () => node?.removeEventListener('veridia:complete', handler);
  }, [onComplete]);

  return (
    <veridia-widget
      ref={widgetRef}
      publishable-key={process.env.NEXT_PUBLIC_VERIDIA_KEY}
      api-base="https://api.xxuxe.online"
      user-ref={userRef}
      locale="es"
    />
  );
}

Asegurate de cargar los script tags una vez en tu _document.tsx o index.html:

<script src="https://widget.xxuxe.online/face-api.js"></script>
<script type="module" src="https://widget.xxuxe.online/veridia-widget.min.js"></script>

Vue 3

<template>
  <veridia-widget
    ref="widget"
    :publishable-key="publishableKey"
    api-base="https://api.xxuxe.online"
    :user-ref="userRef"
    locale="es"
  />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps(['publishableKey', 'userRef']);
const emit = defineEmits(['complete']);
const widget = ref(null);

const handler = (e) => emit('complete', e.detail);

onMounted(() => {
  widget.value?.addEventListener('veridia:complete', handler);
});
onUnmounted(() => {
  widget.value?.removeEventListener('veridia:complete', handler);
});
</script>

Vue trata <veridia-widget> como custom element automaticamente — no necesitas configuracion extra.

JavaScript plano (sin framework)

<!DOCTYPE html>
<html>
<head>
  <script src="https://widget.xxuxe.online/face-api.js"></script>
  <script type="module" src="https://widget.xxuxe.online/veridia-widget.min.js"></script>
</head>
<body>
  <veridia-widget
    id="kyc"
    publishable-key="qv_pub_test_TU_KEY"
    api-base="https://api.xxuxe.online"
    user-ref="user-001"
    locale="es">
  </veridia-widget>

  <script>
    const widget = document.getElementById('kyc');

    widget.addEventListener('veridia:complete', async (e) => {
      const { verificationId } = e.detail;
      // Llama a tu propio backend, que va a hacer GET /v1/verify/:id
      await fetch('/api/kyc-completed', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ verificationId }),
      });
    });

    widget.addEventListener('veridia:error', (e) => {
      console.error('Error de Veridia:', e.detail);
    });
  </script>
</body>
</html>

Verifica que funciona

Abri la pagina en un browser. Deberias ver:

Un boton "Comenzar" con el titulo "Verificacion de identidad"
Despues de tocar comenzar, un prompt de permiso de camara
Tres pasos de captura: frente del documento, reverso (si require-doc-back="true"), despues selfie
Una pantalla de confirmacion "Enviado ✓"

Si ves "Este widget esta mal configurado", revisa:

La publishable-key es valida y no esta revocada
Tu dominio esta en la lista de allowed origins del dashboard
El api-base es correcto (https://api.xxuxe.online)

Proximo paso

Corre una verificacion real end-to-end e inspecciona el resultado.

Paso 2: Primera verificacion →

1. Obtene tu publishable key​

2. Embebe el widget​

Atributos de configuracion​

Ejemplos por framework​

React​

Vue 3​

JavaScript plano (sin framework)​

Verifica que funciona​

Proximo paso​