React, Vue ve Angular

React

React için hazır bir bileşen vardır. Prop’lar HTML attribute’larının camelCase karşılığıdır.

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="tr"
        enableFace
        allowDesktop={false}
        includeImages={false}
        requestTimeoutMs={90_000}
        messages={{ tr: { continue: 'İlerle' } }}
        onReady={() => console.log('hazır')}
        onStepChange={(d) => console.log(d.step)}
        onCaptured={(d) => console.log(d.step)}
        onComplete={(detail) => {
          // detail.transactionId değerini sunucunuza iletin
        }}
        onError={(err) => {
          console.error(err.code, err.message, err.retryable);
        }}
      />
    </div>
  );
}

Bileşene erişmek için ref kullanabilirsiniz:

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

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

Vue 3

Vue’da custom element doğrudan kullanılır. defineTechsignKyc() elementi kaydeder.

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

defineTechsignKyc();
setMessages('tr', { select_card_type: 'Belge türünü seçin' });

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: 'tr',
        'enable-face': 'true',
        'allow-desktop': 'false',
      });
  },
}).mount('#app');

Angular

Angular’da CUSTOM_ELEMENTS_SCHEMA zorunludur. Token’ı [attr.token] ile çalışma anında verin.

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="tr"
      enable-face="true"
      allow-desktop="false"
      (complete)="onComplete($event)"
      (error)="onError($event)"
    ></techsign-kyc>
  `,
})
export class KycPageComponent {
  token = '';   // sunucunuzdan alınan işlem token'ı
  domain = 'https://demo.api.proveid.io';

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

IIFE paketini kullanıyorsanız dosyayı angular.json içindeki scripts listesine de ekleyebilirsiniz.