Javascript Usage

In order to use our SDK with your plain javascript projects please follow this guide:

Import the Uqudo SDK index.js to your project:

<script type="text/javascript" src="./index.js"></script>

Create an Uqudo SDK Instance:

<script>
      const uqudoSdkFactory = UqudoSDK.default;
      const DocumentType = UqudoSDK.DocumentType;
      const BackgroundCheckType = UqudoSDK.BackgroundCheckType;
      
      const uqudoSdk = uqudoSdkFactory.create({
    	  accessToken: UQUDO_ACCESS_TOKEN,
  	});
</script>

Enrollment example:

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="./styles.css" />
	<title>Uqudo sample</title>
	<style></style>
  </head>
  <body>
	<div id="uq_container"></div>
	<button class="uq-button" id="enrollment.passport.button">
  	enrollment passport
	</button>
	<script type="text/javascript" src="./UqudoSDK.js"></script>
	<script>
  	const UQUDO_ACCESS_TOKEN = "token";

  	const uqudoSdkFactory = UqudoSDK.default;
  	const DocumentType = UqudoSDK.DocumentType;
  	const BackgroundCheckType = UqudoSDK.BackgroundCheckType;

  	const uqudoSdk = uqudoSdkFactory.create({
    	  accessToken: UQUDO_ACCESS_TOKEN,
  	});

  	function enrollmentPassport() {
    	  console.debug("enrollment start");
    	  uqudoSdk.enrollment({
      	    scan: {
        	documentType: DocumentType.PASSPORT,
                disableExpiryValidation: false,
                forceUpload: false,
      	    },
      	    face: {
              enableFacialRecognition: true,
      	    },
      	    backgroundCheck: {
              enableBackgroundCheck: true,
              checkType: BackgroundCheckType.RDC,
              skipView: true,
      	    },
      	    onError: function (error) {
        	console.debug("error from callback function ", error.message);
      	    },
      	    onSuccess: function (res) {
        	console.debug("result from callback function ", res);
      	    },
            onTrace: (trace) => {
              console.debug("trace callback function ", trace);
            }
    	  });
  	}

  	function onClickEvent(id, func) {
    	  document.getElementById(id)?.addEventListener("click", func, false);
  	}
  	onClickEvent("enrollment.passport.button", enrollmentPassport);
	</script>
  </body>
</html>

Face Session example:

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="./styles.css" />
	<title>Uqudo sample</title>
	<style></style>
  </head>
  <body>
	<div id="uq_container"></div>
	<button class="uq-button" id="faceSession.button">
  	Face Session
	</button>
	<script type="text/javascript" src="./UqudoSDK.js"></script>
	<script>
  	const UQUDO_ACCESS_TOKEN = "token";

  	const uqudoSdkFactory = UqudoSDK.default;
  	const DocumentType = UqudoSDK.DocumentType;
  	const BackgroundCheckType = UqudoSDK.BackgroundCheckType;

  	const uqudoSdk = uqudoSdkFactory.create({
    	  accessToken: UQUDO_ACCESS_TOKEN,
  	});

      function faceSession() {
        console.debug("faceSession start");
        uqudoSdk.faceSession({
          sessionId: "session id",
          onError: function (error) {
            console.debug("error from callback function ", error.message);
          },
          onSuccess: function (res) {
            console.debug("result from callback function ", res);
          },
          onTrace: (trace) => {
            console.debug("trace callback function ", trace);
          }
        });
      }

  	function onClickEvent(id, func) {
    	  document.getElementById(id)?.addEventListener("click", func, false);
  	}
  	onClickEvent("faceSession.button", faceSession);
	</script>
  </body>
</html>

PreviousFace Session Flow NextTypescript Usage

Last updated 2 years ago

Was this helpful?

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="./styles.css" />
	<title>Uqudo sample</title>
	<style></style>
  </head>
  <body>
	<div id="uq_container"></div>
	<button class="uq-button" id="faceSession.button">
  	Face Session
	</button>
	<script type="text/javascript" src="./UqudoSDK.js"></script>
	<script>
  	const UQUDO_ACCESS_TOKEN = "token";

  	const uqudoSdkFactory = UqudoSDK.default;
  	const DocumentType = UqudoSDK.DocumentType;
  	const BackgroundCheckType = UqudoSDK.BackgroundCheckType;

  	const uqudoSdk = uqudoSdkFactory.create({
    	  accessToken: UQUDO_ACCESS_TOKEN,
  	});

      function faceSession() {
        console.debug("faceSession start");
        uqudoSdk.faceSession({
          sessionId: "session id",
          onError: function (error) {
            console.debug("error from callback function ", error.message);
          },
          onSuccess: function (res) {
            console.debug("result from callback function ", res);
          },
          onTrace: (trace) => {
            console.debug("trace callback function ", trace);
          }
        });
      }

  	function onClickEvent(id, func) {
    	  document.getElementById(id)?.addEventListener("click", func, false);
  	}
  	onClickEvent("faceSession.button", faceSession);
	</script>
  </body>
</html>