KYC form connection

Learn how to integrate PassMe service into your project using iframe.

You can use KYC form on your website by iframe.

Key points are:

• You must have https://e-gates.io/kyc-process-embed?user_token=<your_token> in iframe src.

• You must provide allow="camera" as properties to iframe.

• You may listen for events. Types of events and example provided below.

Here is code example how to make it quicker:

function createIframe ({
  // HTML element where you want form appear
  parentElem,
  domain,
  // User token which you can get from E-Gates api
  // learn more on the "Obtaining a token" page
  params: {
    user_token,
  }
}: {
  parentElem: HTMLElement,
  domain: string,
  params: {
    user_token: string,
  }
}) {
  const iFr = document.createElement('iframe')
  const query = new URLSearchParams(params).toString()
  iFr.setAttribute('id', 'KYC_IFRAME')
  iFr.setAttribute('src', domain + '/kyc-process-embed?' + query)
  iFr.setAttribute('height', 900)
  iFr.setAttribute('style', 'transform: all 0.5s; width:100%;')
  // must have this attributes
  iFr.setAttribute('allow', 'camera')
  iFr.setAttribute('frameborder', '0')
  iFr.onload = () => {
    // do something on iframe loaded
  }
  iFr.onerror = () => {
    // do something on iframe error
  }
  parentElem.appendChild(iFr)

  return iFr
}

You can also listen for events from this form:

function listenFormEvents ({
  domain: string
}) {
  window.addEventListener('message', event => {
    // Do we trust the sender of this message?
    if (event.origin !== domain) return
    if (!event.data?.type) return
    if (!event.data?.body) return

    // see this types below (next code block)
    const data = event.data as MessageLoaded
      | MessageSubmitted
      | MessageSize
      | MessageNotification

    if (data.type === 'LOADED') {
      const width = data.body.width
      const height = data.body.height
      // do something on kyc form loaded
      console.log({
        type: data.type,
        body: { width, height }
      })
    } else if (data.type === 'SUBMITTED') {
      // do something on form submitted
      console.log({
        type: data.type,
        body: true
      })
    } else if (data.type === 'SIZE') {
      const width = data.body.width
      const height = data.body.height
      // do something on form resized
      console.log({
        type: data.type,
        body: { width, height }
      })
      document.getElementById('KYC_IFRAME')?.setAttribute('height', (height + 1).toString())
    } else if (data.type === 'NOTIFICATION') {
      const obj = data as MessageNotification
      // show some notification
      console.log(data.type, obj)
    } else {
      console.warn('Unknown message type')
    }
  })
}

Types of messages:

type MessageType = 'LOADED' | 'SIZE' | 'SUBMITTED' | 'NOTIFICATION'

type WidthHeight = {
  width: number
  height: number
}

type Message<T extends MessageType, B> = {
  type: T
  body: B
}

export type MessageNotification = Message<'NOTIFICATION', {
  type: 'warn' | 'success'
  text: string[]
}>

export type MessageLoaded = Message<'LOADED', WidthHeight>

export type MessageSize = Message<'SIZE', WidthHeight>

export type MessageSubmitted = Message<'SUBMITTED', true>

Use this functions like this:

<div id="YOUR_FORM_CONTAINER" />

const DOMAIN = 'https://e-gates.io'

// listen first
listenFormEvents({
  domain: DOMAIN,
})

// then create form
createIframe({
  parentElem: document.getElementById('YOUR_FORM_CONTAINER'),
  domain: DOMAIN,
  params: {
    user_token: 'hyD3jaV83TUkzaRvfcpe6OIPNvoZRhRo'
  }
})