@smile_identity/smart-camera-web
Version:
WebComponent for smartly capturing images on the web, for use with SmileIdentity
1,012 lines (890 loc) • 108 kB
JavaScript
const VERSION = '1.0.2';
const DEFAULT_NO_OF_LIVENESS_FRAMES = 8;
const PORTRAIT_ID_PREVIEW_WIDTH = 396;
const PORTRAIT_ID_PREVIEW_HEIGHT = 527;
function isSamsungMultiCameraDevice() {
const matchedModelNumber = navigator.userAgent.match(/SM-[N|G]\d{3}/);
if (!matchedModelNumber) {
return false;
}
const modelNumber = parseInt(matchedModelNumber[0].match(/\d{3}/)[0], 10);
const smallerModelNumber = 970; // S10e
return !Number.isNaN(modelNumber) && modelNumber >= smallerModelNumber;
}
function getLivenessFramesIndices(
totalNoOfFrames,
numberOfFramesRequired = DEFAULT_NO_OF_LIVENESS_FRAMES,
) {
const selectedFrames = [];
if (totalNoOfFrames < numberOfFramesRequired) {
throw new Error(
'SmartCameraWeb: Minimum required no of frames is ',
numberOfFramesRequired,
);
}
const frameDivisor = numberOfFramesRequired - 1;
const frameInterval = Math.floor(totalNoOfFrames / frameDivisor);
// NOTE: when we have satisfied our required 8 frames, but have good
// candidates, we need to start replacing from the second frame
let replacementFrameIndex = 1;
for (let i = 0; i < totalNoOfFrames; i += frameInterval) {
if (selectedFrames.length < 8) {
selectedFrames.push(i);
} else {
// ACTION: replace frame, then sort selectedframes
selectedFrames[replacementFrameIndex] = i;
selectedFrames.sort((a, b) => a - b);
// ACTION: update replacement frame index
replacementFrameIndex += 1;
}
}
// INFO: if we don't satisfy our requirement, we add the last index
const lastFrameIndex = totalNoOfFrames - 1;
if (selectedFrames.length < 8 && !selectedFrames.includes(lastFrameIndex)) {
selectedFrames.push(lastFrameIndex);
}
return selectedFrames;
}
class SmartFileUpload {
static memoryLimit = 10240000;
static supportedTypes = ['image/jpeg', 'image/png'];
static getHumanSize(numberOfBytes) {
// Approximate to the closest prefixed unit
const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const exponent = Math.min(
Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
units.length - 1,
);
const approx = numberOfBytes / 1024 ** exponent;
const output =
exponent === 0
? `${numberOfBytes} bytes`
: `${approx.toFixed(0)} ${units[exponent]}`;
return output;
}
static getData(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
resolve(e.target.result);
};
reader.onerror = () => {
reject(
new Error(
'An error occurred reading the file. Please check the file, and try again',
),
);
};
reader.readAsDataURL(file);
});
}
static async retrieve(files) {
if (files.length > 1) {
throw new Error('Only one file upload is permitted at a time');
}
const file = files[0];
if (!SmartFileUpload.supportedTypes.includes(file.type)) {
throw new Error(
'Unsupported file format. Please ensure that you are providing a JPG or PNG image',
);
}
if (file.size > SmartFileUpload.memoryLimit) {
throw new Error(
`${file.name} is too large. Please ensure that the file is less than ${SmartFileUpload.getHumanSize(SmartFileUpload.memoryLimit)}.`,
);
}
const imageAsDataUrl = await SmartFileUpload.getData(file);
return imageAsDataUrl;
}
}
function scwTemplateString() {
return `
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
:host {
--color-active: #2D2B2A;
--color-default: #001096;
--color-disabled: #848282;
}
* {
font-family: 'DM Sans', sans-serif;
}
[hidden] {
display: none !important;
}
[disabled] {
cursor: not-allowed !important;
filter: grayscale(75%);
}
.visually-hidden {
border: 0;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
img {
height: auto;
max-width: 100%;
transform: scaleX(-1);
}
video {
background-color: black;
}
a {
color: currentColor;
text-decoration: none;
}
svg {
max-width: 100%;
}
.color-gray {
color: #797979;
}
.color-red {
color: red;
}
.color-richblue {
color: #4E6577;
}
.color-richblue-shade {
color: #0E1B42;
}
.color-digital-blue {
color: #001096 !important;
}
.color-deep-blue {
color: #001096;
}
.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.font-size-small {
font-size: .75rem;
}
.font-size-large {
font-size: 1.5rem;
}
.text-transform-uppercase {
text-transform: uppercase;
}
[id*=-"screen"] {
min-block-size: 100%;
}
[data-variant~="full-width"] {
inline-size: 100%;
}
.flow > * + * {
margin-top: 1rem;
}
.button {
--button-color: var(--color-default);
-webkit-appearance: none;
appearance: none;
border-radius: 2.5rem;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
display: block;
font-size: 18px;
font-weight: 600;
padding: .75rem 1.5rem;
text-align: center;
}
.button:hover,
.button:focus,
.button:active {
--button-color: var(--color-active);
}
.button:disabled {
--button-color: var(--color-disabled);
}
.button[data-variant~='solid'] {
background-color: var(--button-color);
border: 2px solid var(--button-color);
}
.button[data-variant~='outline'] {
color: var(--button-color);
border: 2px solid var(--button-color);
}
.button[data-variant~='ghost'] {
padding: 0px;
color: var(--button-color);
background-color: transparent;
}
.icon-btn {
appearance: none;
background: none;
border: none;
color: hsl(0deg 0% 94%);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
}
.justify-right {
justify-content: end !important;
}
.nav {
display: flex;
justify-content: space-between;
}
.back-wrapper {
display: flex;
align-items: center;
}
.back-button {
display: block !important;
}
.back-button-text {
font-size: 11px;
line-height: 11px;
color: rgb(21, 31, 114);
}
.section {
border: 1px solid #f4f4f4;
border-radius: .5rem;
margin-left: auto;
margin-right: auto;
max-width: 35ch;
padding: 1rem;
}
.selfie-review-image {
overflow: hidden;
aspect-ratio: 1/1;
}
#review-image {
scale: 1.75;
}
@media (max-aspect-ratio: 1/1) {
#review-image {
transform: scaleX(-1) translateY(-10%);
}
}
.tips,
.powered-by {
align-items: center;
border-radius: .25rem;
color: #4E6577;
display: flex;
justify-content: center;
letter-spacing: .075em;
}
.powered-by {
box-shadow: 0px 2.57415px 2.57415px rgba(0, 0, 0, 0.06);
display: inline-flex;
font-size: .5rem;
}
.tips {
margin-left: auto;
margin-right: auto;
max-width: 17rem;
}
.tips > * + *,
.powered-by > * + * {
display: inline-block;
margin-left: .5em;
}
.powered-by .company {
color: #18406D;
font-weight: 700;
letter-spacing: .15rem;
}
.logo-mark {
background-color: #004071;
display: inline-block;
padding: .25em .5em;
}
.logo-mark svg {
height: auto;
justify-self: center;
width: .75em;
}
@keyframes fadeInOut {
12.5% {
opacity: 0;
}
50% {
opacity: 1;
}
87.5% {
opacity: 0;
}
}
.id-video-container.portrait {
width: 100%;
position: relative;
height: calc(200px * 1.4);
}
.id-video-container.portrait video {
width: calc(213px + 0.9rem);
height: 100%;
position: absolute;
top: 239px;
left: 161px;
padding-bottom: calc((214px * 1.4) / 3);
padding-top: calc((191px * 1.4) / 3);
object-fit: cover;
transform: translateX(-50%) translateY(-50%);
z-index: 1;
block-size: 100%;
}
.video-container,
.id-video-container.landscape {
position: relative;
z-index: 1;
width: 100%;
}
.video-container #smile-cta,
.video-container video,
.id-video-container.landscape video {
left: 50%;
min-width: auto;
position: absolute;
top: calc(50% - 3px);
transform: translateX(-50%) translateY(50%);
}
.video-container #smile-cta {
color: white;
font-size: 2rem;
font-weight: bold;
opacity: 0;
top: calc(50% - 3rem);
}
.video-container video {
min-height: 100%;
transform: scaleX(-1) translateX(50%) translateY(-50%);
}
.video-container .video {
background-color: black;
position: absolute;
left: 50%;
height: calc(100% - 6px);
clip-path: ellipse(101px 118px);
}
.id-video-container.landscape {
min-height: calc((2 * 10rem) + 198px);
height: auto;
}
.id-video-container.portrait .image-frame-portrait {
border-width: 0.9rem;
border-color: rgba(0, 0, 0, 0.7);
border-style: solid;
height: auto;
position: absolute;
top: 80px;
left: 47px;
z-index: 2;
width: 200px;
height: calc(200px * 1.4);
}
.id-video-container.landscape .image-frame {
border-width: 10rem 1rem;
border-color: rgba(0, 0, 0, 0.7);
border-style: solid;
height: auto;
width: 90%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.id-video-container.landscape video {
width: 100%;
transform: translateX(-50%) translateY(-50%);
z-index: 1;
height: 100%;
block-size: 100%;
}
.id-video-container.landscape img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 90%;
}
#id-review-screen .id-video-container,
#back-of-id-review-screen .id-video-container {
background-color: rgba(0, 0, 0, 1);
}
#id-review-screen .id-video-container.portrait, #back-of-id-review-screen .id-video-container.portrait {
height: calc((200px * 1.4) + 100px);
}
#id-review-screen .id-video-container.portrait img, #back-of-id-review-screen .id-video-container.portrait img {
height: 280px;
width: 200px;
padding-top: 14px;
transform: none;
}
.actions {
background-color: rgba(0, 0, 0, .7);
bottom: 0;
display: flex;
justify-content: space-between;
padding: 1rem;
position: absolute;
width: 90%;
z-index: 2;
}
#back-of-id-camera-screen .id-video-container.portrait .actions,
#id-camera-screen .id-video-container.portrait .actions {
top: 145%;
width: calc(200px * 1.4);
}
#back-of-id-camera-screen .section.portrait, #id-camera-screen .section.portrait {
min-height: calc((200px * 1.4) + 260px);
}
#id-entry-screen,
#back-of-id-entry-screen {
block-size: 45rem;
padding-block: 2rem;
display: flex;
flex-direction: column;
max-block-size: 100%;
max-inline-size: 40ch;
}
#id-entry-screen header p {
margin-block: 0 !important;
}
.document-tips {
margin-block-start: 1.5rem;
display: flex;
align-items: center;
text-align: initial;
}
.document-tips svg {
flex-shrink: 0;
margin-inline-end: 1rem;
}
.document-tips p {
margin-block: 0;
}
.document-tips p:first-of-type {
font-size; 1.875rem;
font-weight: bold
}
[type='file'] {
display: none;
}
.document-tips > * + * {
margin-inline-start; 1em;
}
</style>
<svg hidden fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 396 259">
<symbol id="image-frame">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0v69.605h13.349V13.349h56.256V0H0zM396 0h-69.605v13.349h56.256v56.256H396V0zM0 258.604V189h13.349v56.256h56.256v13.348H0zM396 258.604h-69.605v-13.348h56.256V189H396v69.604z" fill="#f00"/>
</symbol>
</svg>
<svg hidden fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 396 527">
<symbol id="image-frame-portrait">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 0.59 0.2 L 0.59 142.384 L 13.912 142.384 L 13.912 17 L 70.05 17 L 70.05 0.2 L 0.59 0.2 Z M 395.764 0.2 L 326.303 0.2 L 326.303 17 L 382.442 17 L 382.442 142.384 L 395.764 142.384 L 395.764 0.2 Z M 0.59 528.461 L 0.59 386.277 L 13.912 386.277 L 13.912 511.663 L 70.05 511.663 L 70.05 528.461 L 0.59 528.461 Z M 395.764 528.461 L 326.303 528.461 L 326.303 511.663 L 382.442 511.663 L 382.442 386.277 L 395.764 386.277 L 395.764 528.461 Z" fill="#f00"/>
</symbol>
</svg>
<svg hidden fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<symbol id="close-icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M.732.732a2.5 2.5 0 013.536 0L10 6.464 15.732.732a2.5 2.5 0 013.536 3.536L13.536 10l5.732 5.732a2.5 2.5 0 01-3.536 3.536L10 13.536l-5.732 5.732a2.5 2.5 0 11-3.536-3.536L6.464 10 .732 4.268a2.5 2.5 0 010-3.536z" fill="#fff"/>
</symbol>
</svg>
<svg hidden fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41">
<symbol id="approve-icon">
<circle cx="20.5" cy="20.5" r="20" stroke="#fff"/>
<path d="M12.3 20.5l6.15 6.15 12.3-12.3" stroke="#fff" stroke-width="3.075" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
</svg>
<svg hidden fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 18">
<symbol id="refresh-icon">
<path d="M3.314 15.646a8.004 8.004 0 01-2.217-4.257 8.06 8.06 0 01.545-4.655l1.789.788a6.062 6.062 0 001.264 6.737 6.033 6.033 0 008.551 0c2.358-2.37 2.358-6.224 0-8.592a5.996 5.996 0 00-4.405-1.782l.662 2.354-3.128-.796-3.127-.796 2.25-2.324L7.748 0l.55 1.953a7.966 7.966 0 016.33 2.326 8.004 8.004 0 012.342 5.684 8.005 8.005 0 01-2.343 5.683A7.928 7.928 0 018.97 18a7.928 7.928 0 01-5.656-2.354z" fill="currentColor"/>
</symbol>
</svg>
<div class='flow center'>
<p class='color-red | center' id='error'>
</p>
</div>
<div id='request-screen' class='flow center'>
${
this.showNavigation
? `
<div class="nav back-to-host-nav${this.hideBackToHost ? ' justify-right' : ''}">
${
this.hideBackToHost
? ''
: `
<div class="back-wrapper back-to-host-wrapper">
<button type='button' data-type='icon' id="back-button-exit" class="back-button back-button-exit icon-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
</svg>
</button>
<div class="back-button-text">Back</div>
</div>
`
}
<button data-type='icon' type='button' id='request-screen-close' class='close-iframe icon-btn'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#91190F" d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"/>
</svg>
<span class='visually-hidden'>Close SmileIdentity Verification frame</span>
</button>
</div>
`
: ''
}
<div class='section | flow'>
<p>
We need access to your camera so that we can take selfie and proof-of-life images.
</p>
<button data-variant='solid' id='request-camera-access' class='button | center' type='button'>
Request Camera Access
</button>
${
this.hideAttribution
? ''
: `
<powered-by-smile-id></powered-by-smile-id>
`
}
</div>
</div>
<div hidden id='camera-screen' class='flow center'>
${
this.showNavigation
? `
<div class="nav back-to-host-nav${this.hideBackToHost ? ' justify-right' : ''}">
${
this.hideBackToHost
? ''
: `
<div class="back-wrapper back-to-host-wrapper">
<button type='button' data-type='icon' id="back-button" class="back-button icon-btn back-button-exit">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
</svg>
</button>
<div class="back-button-text">Back</div>
</div>
`
}
<button data-type='icon' type='button' id='camera-screen-close' class='close-iframe icon-btn'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#91190F" d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"/>
</svg>
<span class='visually-hidden'>Close SmileIdentity Verification frame</span>
</button>
</div>
`
: ''
}
<h1>Take a Selfie</h1>
<div class='section | flow'>
<div class='video-container'>
<div class='video'>
</div>
<svg id="image-outline" width="215" height="245" viewBox="0 0 215 245" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M210.981 122.838C210.981 188.699 164.248 241.268 107.55 241.268C50.853 241.268 4.12018 188.699 4.12018 122.838C4.12018 56.9763 50.853 4.40771 107.55 4.40771C164.248 4.40771 210.981 56.9763 210.981 122.838Z" stroke="var(--color-default)" stroke-width="7.13965"/>
</svg>
<p id='smile-cta' class='color-gray'>SMILE</p>
</div>
<small class='tips'>
<svg width='44' xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40">
<path fill="#F8F8FA" fill-rule="evenodd" d="M17.44 0h4.2c4.92 0 7.56.68 9.95 1.96a13.32 13.32 0 015.54 5.54c1.27 2.39 1.95 5.02 1.95 9.94v4.2c0 4.92-.68 7.56-1.95 9.95a13.32 13.32 0 01-5.54 5.54c-2.4 1.27-5.03 1.95-9.95 1.95h-4.2c-4.92 0-7.55-.68-9.94-1.95a13.32 13.32 0 01-5.54-5.54C.68 29.19 0 26.56 0 21.64v-4.2C0 12.52.68 9.9 1.96 7.5A13.32 13.32 0 017.5 1.96C9.89.68 12.52 0 17.44 0z" clip-rule="evenodd"/>
<path fill="#AEB6CB" d="M19.95 10.58a.71.71 0 000 1.43.71.71 0 000-1.43zm-5.54 2.3a.71.71 0 000 1.43.71.71 0 000-1.43zm11.08 0a.71.71 0 000 1.43.71.71 0 000-1.43zm-5.63 1.27a4.98 4.98 0 00-2.05 9.48v1.2a2.14 2.14 0 004.28 0v-1.2a4.99 4.99 0 00-2.23-9.48zm-7.75 4.27a.71.71 0 000 1.43.71.71 0 000-1.43zm15.68 0a.71.71 0 000 1.43.71.71 0 000-1.43z"/>
</svg>
<span>Tips: Put your face inside the oval frame and click to "take selfie"</span> </small>
<button data-variant='solid' id='start-image-capture' class='button | center' type='button'>
Take Selfie
</button>
${
this.hideAttribution
? ''
: `
<powered-by-smile-id></powered-by-smile-id>
`
}
</div>
</div>
<div hidden id='failed-image-test-screen' class='flow center'>
<div class='section | flow center'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="enable-background:new 0 0 319 443" height="200" viewBox="0 0 319 443">
<image xlink:href="data:image/png;base64,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" width="319" height="443" style="overflow:visible"/>
</svg>
<p class='color-red | center font-size-large'>
Device not supported
</p>
<p class='center'>
We are unable to use images captured on this device.
</p>
<p class='center'>
Please try using a different device.
</p>
${
this.hideAttribution
? ''
: `
<powered-by-smile-id></powered-by-smile-id>
`
}
</div>
</div>
<div hidden id='review-screen' class='flow center'>
${
this.showNavigation
? `
<div class="nav justify-right">
<button data-type='icon' type='button' id='review-screen-close' class='close-iframe icon-btn'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#91190F" d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"/>
</svg>
<span class='visually-hidden'>Close SmileIdentity Verification frame</span>
</button>
</div>
`
: ''
}
<h1>Review Selfie</h1>
<div class='section | flow'>
<div class='selfie-review-image'>
<img
alt='your selfie'
id='review-image'
src=''
width='480'
height='480'
/>
</div>
<p class='color-richblue-shade font-size-large'>
Is this clear enough?
</p>
<p class='color-gray font-size-small'>
Make sure your face is clear enough and the photo is not blurry
</p>
<button data-variant='solid' id='select-selfie' class='button | center' type='button'>
Yes, use this one
</button>
<button data-variant='outline' id='restart-image-capture' class='button | center' type='button'>
Re-take selfie
</button>
</div>
${
this.hideAttribution
? ''
: `
<powered-by-smile-id></powered-by-smile-id>
`
}
</div>
<div hidden id='id-entry-screen' class='flow center'>
${
this.showNavigation
? `
<div class="nav">
<div class="back-wrapper">
<button type='button' data-type='icon' id="back-button-selfie" class="back-button icon-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
</svg>
</button>
<div class="back-button-text">Back</div>
</div>
<button data-type='icon' type='button' id='id-entry-close' class='close-iframe icon-btn'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#91190F" d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"/>
</svg>
<span class='visually-hidden'>Close SmileIdentity Verification frame</span>
</button>
</div>
`
: ''
}
<header>
<svg xmlns="http://www.w3.org/2000/svg" width="51" height="78" fill="none">
<g clip-path="url(#clip-path)">
<path fill="#7FCBF5" d="m37.806 75.563.15-52.06c0-1.625-1.145-3.581-2.53-4.394L4.126 1.054C3.435.632 2.772.602 2.32.874l-1.265.721c-.452.271-.753.813-.753 1.625l-.15 52.06c0 1.626 1.144 3.581 2.53 4.394L33.98 77.73c.934.541 1.958.09 1.807.18l1.266-.722c.451-.27.753-.843.753-1.625Zm-1.266.782c0 .392-.06.722-.18.963.12-.27.18-.602.18-.963Z"/>
<path fill="#7FCBF5" d="m39.07 74.84.151-52.06c0-1.625-1.144-3.58-2.53-4.393L5.39.361c-.692-.42-1.355-.45-1.807-.18L2.32.903c-.452.271-.753.813-.753 1.625l-.15 52.06c0 1.625 1.144 3.581 2.53 4.394l31.299 18.055c.934.542 1.958.09 1.807.181l1.266-.722c.451-.271.753-.843.753-1.625v-.03Zm-1.265.783c0 .391-.06.722-.18.963.12-.27.18-.602.18-.963Z"/>
<path fill="#3B3837" d="M13.19 40.626c-.873-.06-1.687.03-2.44.27 1.597 2.498 3.525 4.635 5.603 6.2-1.265-2.077-2.35-4.274-3.163-6.47Zm9.88 5.687c-.813 1.264-1.897 2.227-3.192 2.799 2.078.842 4.006.933 5.633.27a24.828 24.828 0 0 0-2.44-3.069Zm-5.542-4.393c-1.054-.542-2.109-.933-3.133-1.144a34.476 34.476 0 0 0 3.133 6.23V41.92Zm1.265.722v5.085c1.265-.511 2.32-1.384 3.133-2.587a21.086 21.086 0 0 0-3.133-2.498Zm-7.35-10.593-4.609-2.648c.12 3.16 1.205 6.65 3.043 9.99.873-.3 1.807-.39 2.801-.33-.753-2.438-1.175-4.785-1.265-6.982m6.115 3.521-4.88-2.829c.06 2.017.452 4.153 1.175 6.41 1.205.21 2.44.662 3.705 1.324V35.6Zm6.145 3.52-4.88-2.828v4.905c1.235.783 2.47 1.776 3.675 2.95.723-1.415 1.115-3.1 1.205-5.026Zm5.844 3.371-4.609-2.648c-.09 2.107-.512 3.972-1.295 5.507a30.696 30.696 0 0 1 2.802 3.581c1.867-1.204 2.952-3.43 3.102-6.44ZM14.154 25.73c-.904 1.504-1.416 3.43-1.506 5.627l4.88 2.829v-5.748c-1.145-.722-2.26-1.625-3.374-2.678m8.043 4.634a13.447 13.447 0 0 1-3.404-1.264v5.748l4.88 2.829c-.09-2.287-.572-4.815-1.476-7.313Zm-11.869-9.088c-2.078 1.084-3.343 3.49-3.524 6.68l4.609 2.649c.09-2.378.633-4.454 1.566-6.079a31.138 31.138 0 0 1-2.65-3.25Zm15.725 9.058c-.813.21-1.717.27-2.65.18.933 2.709 1.445 5.387 1.536 7.855l4.608 2.648c-.15-3.37-1.385-7.222-3.464-10.713m-8.465-7.613c-1.084.42-2.018 1.113-2.801 2.046a19.827 19.827 0 0 0 2.771 2.166v-4.212m1.265.722v4.213c.934.481 1.838.842 2.772 1.053a33.855 33.855 0 0 0-2.771-5.266Zm-2.38-2.137c-1.867-.722-3.614-.903-5.12-.451.723.963 1.476 1.896 2.289 2.738.783-1.023 1.747-1.805 2.862-2.317m3.524 2.016a34.581 34.581 0 0 1 2.832 5.567c.813.09 1.566.06 2.29-.12-1.507-2.197-3.254-4.063-5.122-5.477m-8.886 33.945s-.271-.271-.271-.452V55.16c0-.15.12-.24.27-.15l14.008 8.065s.271.27.271.451v1.595c0 .15-.12.24-.27.15l-14.008-8.064Zm0-4.093s-.271-.27-.271-.451v-1.595c0-.15.12-.241.27-.15l14.008 8.064s.271.27.271.451v1.595c0 .15-.12.241-.27.15l-14.008-8.064Zm4.308-38.037s-.272-.27-.272-.451V13.03c0-.15.12-.241.271-.15l7.772 4.332s.272.271.272.452v1.595c0 .15-.12.24-.271.15l-7.773-4.333Zm2.71 34.546s-.09-.06-.15-.09h-.06c-3.193-1.956-6.236-5.146-8.525-9.028-2.47-4.183-3.826-8.667-3.826-12.639 0-4.152 1.596-7.222 4.338-8.395 2.26-.963 5.12-.572 8.103 1.083h.06s.09.09.151.12c.06.03.09.06.15.09h.06c2.983 1.806 5.845 4.725 8.074 8.276 2.741 4.363 4.278 9.238 4.278 13.391 0 3.942-1.386 6.861-3.886 8.185-2.32 1.234-5.362.933-8.555-.872h-.06s-.091-.09-.151-.12Zm15.756-29.731L2.707 1.896c-1.416-.812-2.56-.15-2.56 1.445l-.151 51.94c0 1.625 1.114 3.58 2.53 4.393L33.735 77.67c1.416.813 2.56.151 2.56-1.444l.15-51.91c0-1.625-1.144-3.58-2.53-4.393"/>
<path fill="#7FCBF5" d="M16.353 47.096c-2.079-1.565-4.007-3.701-5.603-6.2.753-.24 1.566-.33 2.44-.27a35.724 35.724 0 0 0 3.163 6.47Zm3.494 2.016a7.52 7.52 0 0 0 3.193-2.799c.874.933 1.687 1.987 2.44 3.07-1.626.662-3.554.542-5.633-.27Zm-2.38-2.137a33.523 33.523 0 0 1-3.133-6.229c1.025.211 2.079.572 3.133 1.144v5.085Zm1.235.723v-5.086a19.828 19.828 0 0 1 3.163 2.498c-.813 1.203-1.897 2.076-3.163 2.588Zm-8.886-8.336c-1.838-3.31-2.922-6.8-3.043-9.99l4.61 2.648c.06 2.196.481 4.543 1.265 6.981a7.717 7.717 0 0 0-2.802.331m3.976-.21c-.692-2.227-1.084-4.394-1.174-6.41l4.88 2.828v4.905c-1.266-.662-2.5-1.113-3.706-1.324Zm8.646 4.995c-1.205-1.174-2.44-2.167-3.705-2.95v-4.904l4.91 2.828c-.09 1.926-.482 3.611-1.205 5.026Zm3.946 4.785a30.707 30.707 0 0 0-2.801-3.582c.783-1.564 1.205-3.4 1.295-5.507l4.609 2.649c-.15 3.009-1.235 5.236-3.103 6.44ZM12.647 31.296c.09-2.197.603-4.122 1.507-5.627 1.114 1.053 2.259 1.956 3.404 2.678v5.748l-4.91-2.829m6.115 3.521V29.04c1.174.602 2.29 1.024 3.434 1.264.873 2.528 1.386 5.026 1.476 7.313l-4.88-2.829m-11.96-6.891c.181-3.19 1.416-5.597 3.525-6.68a28.286 28.286 0 0 0 2.651 3.25c-.934 1.624-1.476 3.7-1.566 6.078l-4.61-2.648Zm18.105 10.442c-.09-2.468-.602-5.146-1.536-7.854.934.09 1.837 0 2.65-.18 2.08 3.49 3.314 7.342 3.465 10.712l-4.609-2.648m-7.35-11.435a19.841 19.841 0 0 1-2.772-2.167 6.523 6.523 0 0 1 2.802-2.046v4.213m1.235.722v-4.213a33.86 33.86 0 0 1 2.771 5.266c-.903-.21-1.837-.571-2.771-1.053Zm-5.212-4.032c-.813-.843-1.566-1.776-2.289-2.739 1.506-.451 3.284-.3 5.121.452-1.115.511-2.078 1.294-2.862 2.317m9.188 5.296a34.581 34.581 0 0 0-2.831-5.567c1.867 1.414 3.614 3.28 5.12 5.477-.722.15-1.476.18-2.289.12m-4.579-8.185s-.09-.06-.15-.09h-.06c-2.983-1.685-5.845-2.077-8.104-1.114-2.741 1.174-4.338 4.243-4.338 8.396 0 4.153 1.356 8.426 3.826 12.639 2.29 3.882 5.332 7.072 8.525 8.998h.06s.09.12.15.15c.061.03.091.06.152.09h.06c3.193 1.806 6.236 2.137 8.555.903 2.5-1.324 3.856-4.243 3.886-8.185 0-4.153-1.536-9.028-4.278-13.361-2.229-3.551-5.09-6.5-8.073-8.276h-.06s-.09-.09-.15-.12"/>
<path fill="#43C15F" d="M40.668 50.165h-.03c-5.723 0-10.363 4.635-10.363 10.352v.03c0 5.717 4.64 10.352 10.363 10.352h.03c5.723 0 10.363-4.635 10.363-10.352v-.03c0-5.717-4.64-10.352-10.363-10.352Z"/>
<path fill="#E5E7E7" d="m38.826 65.873-5.603-5.447 1.627-1.685 3.976 3.822 7.591-7.343 1.627 1.685-9.188 8.968h-.03Z"/>
</g>
<defs>
<clipPath id="clip-path">
<path fill="#fff" d="M0 0h51v78H0z"/>
</clipPath>
</defs>
</svg>
<h1>
Submit${this.captureBackOfID ? ' the Front of' : ''} Your ID
</h1>
<p>
We'll use it to verify your identity.
</p>
<p>
Follow the tips below for the best results.
</p>
</header>
<div class='flow'>
<div class='document-tips'>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none">
<g fill="#9394AB" clip-path="url(#clip)">
<path fill-rule="evenodd" d="M26.827 16a10.827 10.827 0 1 1-21.655 0 10.827 10.827 0 0 1 21.655 0Z" clip-rule="evenodd"/>
<path d="M16.51 3.825h-1.02L15.992 0l.518 3.825ZM22.53 5.707l-.884-.51 2.346-3.056-1.462 3.566ZM26.804 10.354l-.51-.883 3.557-1.479-3.047 2.362ZM28.183 16.51v-1.02l3.817.502-3.817.518ZM26.293 22.53l.51-.884 3.056 2.346-3.566-1.462ZM21.646 26.804l.884-.51 1.478 3.557-2.362-3.047ZM15.49 28.183h1.02L16.009 32l-.518-3.817ZM9.47 26.293l.884.51-2.346 3.056 1.462-3.566ZM5.196 21.646l.51.884-3.557 1.478 3.047-2.362ZM3.825 15.49v1.02L0 16.009l3.825-.518ZM5.707 9.47l-.51.884L2.14 8.008 5.707 9.47ZM10.354 5.196l-.883.51L7.992 2.15l2.362 3.047Z"/>
</g>
<defs>
<clipPath id="clip">
<path fill="#fff" d="M0 0h32v32H0z"/>
</clipPath>
</defs>
</svg>
<div>
<p>Check the lighting</p>
<p>
Take your ID document image in a well-lit environment where it is easy to read, and free from glare on the card.
</p>
</div>
</div>
<div class='document-tips'>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="31" fill="none">
<g fill="#9394AB" clip-path="url(#path)">
<path d="M30.967 10.884H1.033A25.08 25.08 0 0 0 .65 12.06h30.702c-.11-.398-.238-.787-.384-1.176ZM31.515 12.696H.485c-.092.36-.165.721-.229 1.091h31.488c-.064-.37-.137-.73-.229-1.091ZM31.854 14.508H.146c-.045.333-.073.665-.1.997h31.908a18.261 18.261 0 0 0-.1-.997ZM32 16.767c0-.152 0-.294-.01-.446H.01c-.01.152-.01.294-.01.446 0 .152 0 .313.01.465h31.98c.01-.152.01-.313.01-.465ZM31.945 18.133H.055c.018.275.046.55.082.816h31.726c.036-.266.064-.54.082-.816ZM31.707 19.946H.293c.045.246.1.483.155.72h31.104c.055-.236.11-.474.155-.72ZM31.269 21.758H.73c.074.209.138.427.21.636h30.117c.073-.21.147-.427.21-.636ZM30.601 23.57H1.4l.247.541h28.708l.247-.54ZM29.687 25.383H2.322c.08.151.17.303.275.455h26.816l.274-.455ZM28.453 27.195H3.547l.284.36h24.338l.284-.36ZM26.816 29.007H5.184l.293.266h21.046l.293-.266ZM24.54 30.82H7.46l.284.18h16.512l.283-.18ZM28.873 6.898a16.377 16.377 0 0 0-.933-1.186A15.316 15.316 0 0 0 15.973 0 15.314 15.314 0 0 0 3.585 6.253h.027c-.164.218-.329.427-.484.645h25.746ZM29.12 7.268H2.88c-.293.437-.567.892-.823 1.357h27.886a13.617 13.617 0 0 0-.823-1.357ZM30.18 9.071H1.82c-.21.418-.403.845-.577 1.272h29.513a17.482 17.482 0 0 0-.575-1.272Z"/>
</g>
<defs>
<clipPath id="path">
<path fill="#fff" d="M0 0h32v31H0z"/>
</clipPath>
</defs>
</svg>
<div>
<p>Make sure it's in focus</p>
<p>
Ensure the photo of the ID document you submit is not blurry: you should be able to read the text on the document.
</p>
</div>
</div>
</div>
<div class='flow'>
${
this.supportBothCaptureModes || this.documentCaptureModes === 'camera'
? `
<button data-variant='solid full-width' class='button' type='button' id='take-photo'>
Take Photo
</button>
`
: ''
}
${
this.supportBothCaptureModes || this.documentCaptureModes === 'upload'
? `
<label id='upload-photo-label' data-variant='${this.supportBothCaptureModes ? 'outline' : 'solid'}' class='button'>
<input type='file' onclick='this.value=null;' id='upload-photo' name='document' accept='image/png, image/jpeg' />
<span>Upload Photo</span>
</label>
`
: ''
}
</div>
${
this.hideAttribution
? ''
: `
<powered-by-smile-id></powered-by-smile-id>
`
}
</div>
<div hidden id='id-camera-screen' class='flow center'>
${
this.showNavigation
? `
<div class="nav">
<div class="back-wrapper">
<button type='button' data-type='icon' id="back-button-id-entry" class="back-button icon-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
</svg>
</button>
<div class="back-button-text">Back</div>
</div>
<button data-type='icon' type='button' id='id-camera-close' class='close-iframe icon-btn'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#91190F" d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"/>
</svg>
<span class='visually-hidden'>Close SmileIdentity Verification frame</span>
</button>
</div>
`
: ''
}
<h1>Take ID Card Photo</h1>
<div class='section | flow ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}'>
<div class='id-video-container ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}'>
<svg class="image-frame" fill="none" height="259" width="396" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 396 259" ${this.isPortraitCaptureView ? 'hidden' : ''}>
<use href='#image-frame' />
</svg>
<svg class="image-frame-portrait" fill="none" height="527" width="396" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 396 527" ${!this.isPortraitCaptureView ? 'hidden' : ''}>
<use href='#image-frame-portrait' />
</svg>
<div class='actions' hidden>
<button id='capture-id-image' class='button icon-btn | center' type='button'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" height="60" width="60">
<circle cx="30" cy="30" r="27" stroke="currentColor" stroke-width="3" />
</svg>
<span class='visually-hidden'>Capture</span>
</button>
</div>
</div>
${
this.hideAttribution
? ''
: `
<powered-by-smile-id></powered-by-smile-id>
`
}
</div>
</div>
<div hidden id='id-review-screen' class='flow center'>
${
this.showNavigation
? `
<div class="nav justify-right">
<button data-type='icon' type='button' id='id-review-screen-close' class='close-iframe icon-btn'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#91190F" d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"/>
</svg>
<span class='visually-hidden'>Close SmileIdentity Verification frame</span>
</button>
</div>
`
: ''
}
<h1>Review ID Card</h1>
<div class='section | flow'>
<div class='id-video-container ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}'>
<div class='actions'>
<button id='re-capture-id-image' class='button icon-btn' type='button'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" height="40" width="40" viewBox='0 0 17 18'>
<path d="M3.314 15.646a8.004 8.004 0 01-2.217-4.257 8.06 8.06 0 01.545-4.655l1.789.788a6.062 6.062 0 001.264 6.737 6.033 6.033 0 008.551 0c2.358-2.37 2.358-6.224 0-8.592a5.996 5.996 0 00-4.405-1.782l.662 2.354-3.128-.796-3.127-.796 2.25-2.324L7.748 0l.55 1.953a7.966 7.966 0 016.33 2.326 8.004 8.004 0 012.342 5.684 8.005 8.005 0 01-2.343 5.683A7.928 7.928 0 018.97 18a7.928 7.928 0 01-5.656-2.354z" fill="currentColor"/>
</svg>
<span class='visually-hidden'>Re-Capture</span>
</button>
<button id='select-id-image' class='button icon-btn' type='button'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox='0 0 41 41' height="40" width="40">
<circle cx="20.5" cy="20.5" r="20" stroke="#fff"/>
<path d="M12.3 20.5l6.15 6.15 12.3-12.3" stroke="#fff" stroke-width="3.075" stroke-miterlimit="10" stroke-li