React, Vue and Angular

React

A ready-made component is included for React. Props are the camelCase form of the HTML attributes.

import { TechsignKyc } from '@techsign/kyc/react';

export function KycPage({ token }: { token: string }) {
  return (
    <div style={{ height: '100vh' }}>
      <TechsignKyc
        token={token}
        domain="https://demo.api.proveid.io"
        lang="en"
        enableFace
        allowDesktop={false}
        includeImages={false}
        requestTimeoutMs={90_000}
        messages={{ en: { continue: 'Next' } }}
        onReady={() => console.log('ready')}
        onStepChange={(d) => console.log(d.step)}
        onCaptured={(d) => console.log(d.step)}
        onComplete={(detail) => {
          // send detail.transactionId to your server
        }}
        onError={(err) => {
          console.error(err.code, err.message, err.retryable);
        }}
      />
    </div>
  );
}

Use a ref to reach the element:

import type { TechsignKycElement } from '@techsign/kyc';

const ref = useRef<TechsignKycElement>(null);
// …
await ref.current?.retryStep();

Vue 3

Vue uses the custom element directly. defineTechsignKyc() registers the element.

import { createApp, h, onMounted, ref } from 'vue';
import { defineTechsignKyc, setMessages } from '@techsign/kyc';

defineTechsignKyc();
setMessages('en', { select_card_type: 'Choose your document' });

createApp({
  setup() {
    const el = ref<HTMLElement | null>(null);

    onMounted(() => {
      el.value?.addEventListener('complete', (e) =>
        console.log((e as CustomEvent).detail),
      );
      el.value?.addEventListener('error', (e) =>
        console.error((e as CustomEvent).detail),
      );
    });

    return () =>
      h('techsign-kyc', {
        ref: el,
        token: 'TRANSACTION_TOKEN',
        lang: 'en',
        'enable-face': 'true',
        'allow-desktop': 'false',
      });
  },
}).mount('#app');

Angular

Angular requires CUSTOM_ELEMENTS_SCHEMA. Pass the token at runtime with [attr.token].

import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import '@techsign/kyc';

@Component({
  selector: 'app-kyc',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  styles: [`:host, techsign-kyc { display: block; height: 100%; }`],
  template: `
    <techsign-kyc
      [attr.token]="token"
      [attr.domain]="domain"
      lang="en"
      enable-face="true"
      allow-desktop="false"
      (complete)="onComplete($event)"
      (error)="onError($event)"
    ></techsign-kyc>
  `,
})
export class KycPageComponent {
  token = '';   // transaction token from your server
  domain = 'https://demo.api.proveid.io';

  onComplete(e: Event) { console.log((e as CustomEvent).detail); }
  onError(e: Event) { console.error((e as CustomEvent).detail); }
}

If you use the IIFE build, you can also add the file to the scripts list in angular.json.