Instalacao

1. Obtenha sua publishable key

Faca login no seu dashboard Veridia e copie uma publishable key da secao API keys.

Test key — parece com qv_pub_test_.... Use enquanto integra.
Live key — parece com qv_pub_.... Use em producao.

Publishable keys sao seguras para expor em HTML do cliente. Identificam seu tenant e a origem do widget, mas nao podem ler ou modificar dados de outros tenants.

:::tip Whitelist de dominios No dashboard, configure os allowed origins para cada key. O widget recusa carregar em qualquer dominio que nao esteja nessa lista — protege voce de alguem mais usar sua key em outro site. :::

Cole duas tags de script e o custom element em qualquer pagina:

<!-- 1. Carrega face-api.js (UMD), depois o bundle do 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. Insira o widget -->
<veridia-widget
  publishable-key="qv_pub_test_SUA_KEY_AQUI"
  api-base="https://api.xxuxe.online"
  user-ref="customer-12345"
  country="BR"
  document-type="national_id"
  locale="pt">
</veridia-widget>

<!-- 3. Escutar eventos -->
<script>
  document.querySelector('veridia-widget')
    .addEventListener('veridia:complete', (e) => {
      console.log('verificacao:', e.detail.verificationId);
      // Faz polling em GET /v1/verify/:id para o veredicto final
    });
</script>

Essa e a integracao completa. Abra a pagina num celular ou laptop com camera, toque "Comecar", e voce tem uma verificacao biometrica funcionando.

Atributos de configuracao

Atributo	Obrigatorio	Descricao
`publishable-key`	Sim	Sua key `qv_pub_` ou `qv_pub_test_` do dashboard
`api-base`	Sim	Endpoint da API Veridia — `https://api.xxuxe.online` para producao
`user-ref`	Nao	Seu proprio identificador de usuario — ecoado em eventos e webhooks (max 128 chars)
`country`	Nao	Codigo ISO 3166-1 alpha-2 (ex: `PY`, `BR`, `MX`) — melhora accuracy do OCR
`document-type`	Nao	Um de: `dni`, `passport`, `drivers_license`, `national_id`, `other`
`submitted-full-name`	Nao	Nome completo do usuario para fuzzy matching contra o documento (max 255 chars)
`require-doc-back`	Nao	`"true"` se seu tipo de documento exige foto do verso (default: `"false"`)
`locale`	Nao	Idioma da UI: `en`, `es` ou `pt`. Default: locale do browser, fallback ingles
`accent-color`	Nao	Cor hex para botoes e estados ativos (ex: `"#2563EB"`)

Exemplos 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="pt"
    />
  );
}

Certifique-se de carregar as tags de script uma vez no seu _document.tsx ou 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="pt"
  />
</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 — sem configuracao extra.

JavaScript puro (sem 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_SUA_KEY"
    api-base="https://api.xxuxe.online"
    user-ref="user-001"
    locale="pt">
  </veridia-widget>

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

    widget.addEventListener('veridia:complete', async (e) => {
      const { verificationId } = e.detail;
      // Chama seu proprio backend, que vai fazer 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('Erro Veridia:', e.detail);
    });
  </script>
</body>
</html>

Verifique que funciona

Abra a pagina num browser. Voce deve ver:

Um botao "Comecar" com o titulo "Verificacao de identidade"
Apos clicar, um prompt de permissao de camera
Tres passos de captura: frente do documento, verso (se require-doc-back="true"), depois selfie
Uma tela de confirmacao "Enviado ✓"

Se voce ve "Este widget esta mal configurado", verifique:

A publishable-key e valida e nao esta revogada
Seu dominio esta na lista allowed origins do dashboard
O api-base esta correto (https://api.xxuxe.online)

Proximo passo

Execute uma verificacao real end-to-end e inspecione o resultado.

Passo 2: Primeira verificacao →

1. Obtenha sua publishable key​

2. Embed do widget​

Atributos de configuracao​

Exemplos por framework​

React​

Vue 3​

JavaScript puro (sem framework)​

Verifique que funciona​

Proximo passo​