In order for the verification flow to render correctly, you'll need to pass a valid accessToken as an argument to the start function. You can get accessToken from our public API. You can find more details in the
Copy const accessToken = 'ACCESS_TOKEN_FROM_PUBLIC_API';
Allpass.start(accessToken);
Make sure you're using your public App Key and Secret API Key from Integration Page
Copy <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="favicon.ico">
<title>Title</title>
</head>
<body>
<div id="app">
<div id="header">
<h1>My Test Application</h1>
</div>
<div id="container">
<div>
<h3>Content</h3>
<img id="loader" alt="loader" style="display: none" src="loader.gif"/>
<button id="start">Start Verification</button>
</div>
<div id="allpass"></div>
</div>
<div id="footer">
<p>Footer</p>
</div>
<script src="integration.js" async></script>
</div>
</body>
</html>
Copy const accessToken = 'ACCESS_TOKEN_FROM_PUBLIC_API';
(() => {
const allpassId = 'allpass';
/** UI actions */
const setElmsDisplay = (hide, show) => {
document.getElementById(hide).style.display = 'none';
document.getElementById(show).style.display = 'block';
}
const finishUI = () => {
setTimeout(() => {
setElmsDisplay(allpassId, 'start');
window.Allpass.close();
}, 10000);
};
/** event handlers */
const onLoad = (e) => {
console.log('onLoad', e);
setElmsDisplay('loader', allpassId);
};
const onRestart = (e) => {
console.log('onRestart', e);
setElmsDisplay('start', 'loader');
};
const onStart = (e) => {
console.log('onStart', e);
};
const onPassStep = (e) => {
console.log('onPassStep', e);
};
const onComplete = (e) => {
console.log('onComplete', e);
finishUI();
};
const onError = (e) => {
console.log('onError', e);
finishUI();
};
/** initialize Allpass SDK */
const init = () => {
window.Allpass.init({
onLoad,
onRestart,
onStart,
onPassStep,
onComplete,
onError,
}).restart();
};
/** create Allpass library */
const script = document.createElement('script');
script.src = 'https://unpkg.com/@allpass/web-sdk';
script.async = true;
script.onload = () => init();
document.body.appendChild(script);
/** start verification process */
document.getElementById('start').onclick = async () => {
setElmsDisplay('start', 'loader');
await window.Allpass.start(accessToken);
};
})(); 