Web Component

The <trusty-verify> Web Component is the cleanest way to integrate Trusty. It wraps the iframe in a custom element that works in any framework.

Installation

Load the script once on your page:

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

Usage

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

Attributes

Attribute	Required	Description
public-token	Yes	Your token TR_PUB_xxx
metadata	No	JSON string with passthrough data
lang	No	es or en. Default: en

Styling

The component uses shadow DOM. You can control dimensions from the host's CSS:

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

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

Framework examples

React

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

Vue

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

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

Plain HTML

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

Domain configuration

By default the widget points to https://trusty.sh. For a custom domain:

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