Web Component

El Web Component <trusty-verify> es la forma mas limpia de integrar Trusty. Envuelve el iframe en un custom element que funciona en cualquier framework.

Instalacion

Carga el script una vez en tu pagina:

<script src="https://trusty.sh/trusty-widget.js"></script>

Uso

<trusty-verify
  public-token="TR_PUB_xxx"
  metadata='{"userId":"123"}'
  lang="es">
</trusty-verify>

Atributos

Atributo	Requerido	Descripcion
public-token	Si	Tu token TR_PUB_xxx
metadata	No	JSON string con datos passthrough
lang	No	es o en. Default: en

Estilos

El componente usa shadow DOM. Puedes controlar las dimensiones desde CSS del host:

trusty-verify {
  width: 350px;
  height: 700px;
}

Por defecto: width:100%; max-width:420px; height:640px.

Ejemplos por framework

React

function KycWidget() {
  return (
    <>
      <script src="https://trusty.sh/trusty-widget.js" />
      <trusty-verify
        public-token="TR_PUB_xxx"
        metadata='{"userId":"123"}'
        lang="es"
      />
    </>
  )
}

Vue

<template>
  <trusty-verify
    public-token="TR_PUB_xxx"
    :metadata="JSON.stringify({ userId: '123' })"
    lang="es"
  />
</template>

<script setup>
// Cargar el script en onMounted
onMounted(() => {
  const s = document.createElement('script')
  s.src = 'https://trusty.sh/trusty-widget.js'
  document.head.appendChild(s)
})
</script>

HTML plano

<script src="https://trusty.sh/trusty-widget.js"></script>
<trusty-verify public-token="TR_PUB_xxx" lang="es"></trusty-verify>

Configuracion del dominio

Por defecto el widget apunta a https://trusty.sh. Si tienes un dominio custom:

<script src="https://trusty.sh/trusty-widget.js" data-base="https://custom.trusty.sh"></script>