youverify-web-sdk/dist/index.js

A web SDK for Youverify

"use strict";function ownKeys(t,e){var i,o=Object.keys(t);return Object.getOwnPropertySymbols&&(i=Object.getOwnPropertySymbols(t),e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),o.push.apply(o,i)),o}function _objectSpread(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(i),!0).forEach(function(e){_defineProperty(t,e,i[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):ownKeys(Object(i)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))})}return t}function _defineProperty(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}(()=>{var e=class{constructor(e={}){var{publicMerchantKey:e,personalInformation:t={firstName:void 0,lastName:void 0,middleName:void 0,email:void 0,mobile:void 0,gender:void 0},appearance:i={greeting:void 0,actionText:void 0,buttonBackgroundColor:void 0,buttonTextColor:void 0,primaryColor:void 0},dev:o,countries:s,province:a,idTypes:n,sandboxEnvironment:r}=e;this.genderTypes=["MALE","FEMALE","NOT_IDENTIFIED"],this.allowedPersonalInformationFields=["firstName","lastName","middleName","email","mobile","gender"],this.businessId=e,this.dev=o,this.personalInformation=t,this.countries=s,this.province=a,this.idTypes=n,this.appearance=i,this.baseURL="https://os.youverify.co",this.sandboxEnvironment=r,!0===this.dev&&(this.baseURL="https://os.dev.youverify.co"),this.modalContent=this.createElement({tag:"div",attributes:{style:{position:"relative",height:"100%",width:"100%"},id:"modal-content"},children:[this.createElement({tag:"button",text:"X",attributes:{class:"close-button",style:{position:"absolute",top:"10px",left:"10px",zIndex:2}}}),this.createElement({tag:"div",attributes:{style:{height:"100%",width:"100%",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1,backgroundColor:"white"},class:"preliminary-content animate"},children:[this.createElement({tag:"div",attributes:{class:"loader"}}),this.createElement({tag:"div",attributes:{style:{maxWidth:"400px",margin:"0 auto"},class:"personalization hide"},children:[this.createElement({tag:"h1",attributes:{style:{fontWeight:"bold",margin:"5px 0"}},text:t.firstName?"Hey, "+t.firstName:"Hey,"}),this.createElement({tag:"p",attributes:{style:{margin:"10px 0",lineHeight:"1.4"}},html:this.appearance.greeting}),this.createElement({tag:"button",text:this.appearance.actionText,attributes:{style:{background:this.appearance.buttonBackgroundColor||"#46B2C8",color:this.appearance.buttonTextColor||"white"},class:"start-button"}})]})]})]}),this.modal=this.createElement({tag:"div",attributes:{id:"yv-sdk-modal",style:{position:"fixed",top:0,right:0,bottom:0,left:0,backgroundColor:"white",zIndex:2,maxWidth:"100vw",minHeight:"100vh",overflow:"hidden"},class:"hide animate"},children:[this.modalContent]}),this.preliminaryContent=this.modal.querySelector(".preliminary-content"),this.loader=this.preliminaryContent.querySelector(".loader"),this.personalization=this.preliminaryContent.querySelector(".personalization"),this.closeButton=this.modal.querySelector(".close-button"),this.startButton=this.modal.querySelector(".start-button"),this.overlay=this.createElement({tag:"div",attributes:{class:"overlay hide animate",style:{position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:2,backgroundColor:"rgba(0, 0, 0, 0.5)"}}})}createElement(e={}){const{tag:t="div",attributes:i={},children:o=[],text:s=null,html:a=null}=e,n=document.createElement(t);for(const e of Object.keys(i)){const t=i[e];"object"!=typeof t||Array.isArray(t)||null===t?n.setAttribute(e,t):Object.assign(n[e],t)}for(const e of o)n.appendChild(e);return s&&(n.innerText=s),a&&(n.innerHTML=a),n}loadStyles(){var e=this.createElement({tag:"style",attributes:{type:"text/css"},children:[document.createTextNode(`
            #yv-sdk-modal {
              font-family: BRSonoma, sans-serif;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
              color: #666666;
              max-height: 100%;
            }
            @media only screen and (min-width: 600px) {
              #yv-sdk-modal {
                max-height: 80%
              }
            }
            #yv-sdk-modal .loader {
              border: 2px solid;
              border-color: ${this.appearance.primaryColor};
              border-left-color: transparent;
              border-radius: 50%;
              animation: spin 0.7s linear infinite;
              height: 20px;
              width: 20px;
            }

            #yv-sdk-modal .close-button {
              height: 30px;
              width: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 100%;
              background-color: rgba(0, 0, 0, 0.5);
              color: white;
            }

            #yv-sdk-modal .close-button:hover {
              background-color: rgba(0, 0, 0, 1);
            }

            #yv-sdk-modal button {
              outline: none;
              border: none;
              cursor: pointer;
            }

            #yv-sdk-modal .start-button {
              padding: 15px 30px;
              margin-top: 20px;
              // background: #46B2C8;
              // color: white;
              font-size: 16px;
              font-weight: 500;
            }
          
            @keyframes spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }
            #yv-sdk-modal.animate, #yv-sdk-modal .animate {
              transition: all 0.5s ease-in-out;
            }
            #yv-sdk-modal.hide, #yv-sdk-modal .hide {
              visibility: hidden;
              position: absolute;
              top: 0;
              opacity: 0;
            }
            #yv-sdk-modal #list{
    transition: all 0.5s;
      transform: translateY(30px);
  }    `)]});document.head.prepend(e)}startProcess(){}validateOptions(){}initialize(){this.loadStyles(),this.validateOptions(),this.closeButton.addEventListener("click",()=>{this.setShowModal(!1)}),this.startButton.addEventListener("click",()=>{this.startProcess()})}resetModal(){this.modal.classList.add("hide"),this.preliminaryContent.classList.remove("hide"),this.iFrame.classList.add("hide"),this.personalization.classList.add("hide"),this.loader.classList.remove("hide"),document.body.removeChild(this.modal),this.overlay.classList.add("hide"),document.body.removeChild(this.overlay),window.removeEventListener("message",this.iFrameMessageHandler)}setShowModal(e=!1){e?(document.body.appendChild(this.overlay),document.body.appendChild(this.modal),setTimeout(()=>{this.modal.classList.remove("hide"),this.overlay.classList.remove("hide")})):(this.resetModal(),this.onClose())}},e={vForm:class extends e{constructor(e={}){var{publicMerchantKey:e,vFormId:t,metadata:i={},dev:o,sandboxEnvironment:s,personalInformation:a={firstName:void 0,lastName:void 0,middleName:void 0,email:void 0,mobile:void 0,gender:void 0},appearance:n={actionText:void 0},onSuccess:r=()=>{},onComplete:l=()=>{},onFailure:d=()=>{},onClose:c=()=>{}}=e;super({publicMerchantKey:e,personalInformation:a,dev:o,sandboxEnvironment:s,appearance:{actionText:n.actionText||"Verify Identity",greeting:n.greeting||"We will need to verify your identity. It will only take a moment.",buttonBackgroundColor:n.buttonBackgroundColor||"#46B2C8",primaryColor:n.primaryColor||"#46B2C8",buttonTextColor:n.buttonTextColor||"white"}}),this.apiBaseURL="https://vform.svc.youverify.co",this.sandboxEnvironment&&!this.dev&&(this.apiBaseURL="https://vform.staging.svc.youverify.co"),this.dev&&!this.sandboxEnvironment&&(this.apiBaseURL="https://vform.dev.svc.youverify.co"),this.vFormId=t,this.metadata=i,this.onSuccess=r,this.onFailure=d,this.onComplete=l,this.onClose=c,this.iFrameMessageHandler=e=>{this.handleIFrameMessage(e)}}validateOptions(){if(!this.vFormId)throw new Error("vForm Id is required");if(!this.businessId)throw new Error("Public Merchant Key is required");if(this.personalInformation&&this.personalInformation.gender&&!this.genderTypes.includes(this.personalInformation.gender))throw new Error(`Gender must be one of "${this.genderTypes.join(", ")}"`);if(this.onSuccess&&"function"!=typeof this.onSuccess)throw new Error("onSuccess callback must be of type function");if(this.onFailure&&"function"!=typeof this.onFailure)throw new Error("onFailure callback must be of type function");if(this.onComplete&&"function"!=typeof this.onComplete)throw new Error("onComplete callback must be of type function");if(this.onClose&&"function"!=typeof this.onClose)throw new Error("onClose callback must be of type function");if(this.personalInformation&&("object"!=typeof this.personalInformation||Array.isArray(this.personalInformation)))throw new Error("Personal Information should be of type object");if(this.personalInformation)for(const e of Object.keys(this.personalInformation))if(!this.allowedPersonalInformationFields.includes(e))throw new Error(e+" is not allowed in Personal Information. Must be one of "+this.allowedPersonalInformationFields.join(", "))}handleIFrameMessage(e){var{data:t={},origin:e}=e;if(e===this.baseURL)switch(t.id){case"yvos:vform:submit-success":this.onSuccess(t.data);break;case"yvos:vform:submit-failed":this.onFailure(t.data);break;case"yvos:vform:submit-completed":this.onComplete(t.data)}}initIFrame(){return new Promise(async(e,t)=>{try{const t=await fetch(this.apiBaseURL+"/v1/v-forms/access-points/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({mode:"sdk",templateId:this.vFormId,details:this.personalInformation,businessId:this.businessId,metadata:this.metadata})});if(!t.ok)throw this.error=await t.json(),t;var i=(await t.json())["data"];this.accessPoint=i,this.iFrame=this.createElement({tag:"iframe",attributes:{src:this.sandboxEnvironment?`${this.baseURL}/v-forms/${this.vFormId}?accessId=${this.accessPoint.id}&e=s`:`${this.baseURL}/v-forms/${this.vFormId}?accessId=`+this.accessPoint.id,style:{height:"100%",width:"100%"},class:"hide animate",allow:"camera; microphone; clipboard-read; clipboard-write"}}),this.iFrame.addEventListener("load",()=>{this.loader.classList.add("hide"),this.personalization.classList.remove("hide")}),this.modalContent.appendChild(this.iFrame),e({done:!0})}catch(e){this.alert=this.createElement({tag:"div",html:this.error.message,attributes:{class:"alert",id:"list",style:{position:"absolute",top:"10px",right:"10px",zIndex:2,background:"red",minWidth:"20rem",maxWidth:"40rem",padding:"20px",color:"white",fontSize:"1rem",lineHeight:"1.5rem",borderRadius:"0.25rem",boxShadow:"0px 15px 25px rgba(0, 0, 0, 0.15)"}}}),this.modalContent.appendChild(this.alert),this.loader.classList.add("hide"),t(e)}})}async start(){try{this.setShowModal(!0),window.addEventListener("message",this.iFrameMessageHandler),this.iFrame||await this.initIFrame()}catch(e){throw e}}startProcess(){this.preliminaryContent.classList.add("hide"),this.iFrame.classList.remove("hide")}},liveness:class extends e{constructor(e={}){var{publicMerchantKey:e,dev:t,sandboxEnvironment:i,personalInformation:o={firstName:void 0},appearance:s={actionText:void 0},onSuccess:a=()=>{},onFailure:n=()=>{},onClose:r=()=>{},onCancel:l=()=>{},onRetry:d=()=>{},metadata:c}=e;super({publicMerchantKey:e,personalInformation:o,appearance:{actionText:s.actionText||"Start Liveness Test",greeting:s.greeting||"We will need to carry out a liveness test. It will only take a moment.",buttonBackgroundColor:s.buttonBackgroundColor||"#46B2C8",primaryColor:s.primaryColor||"#46B2C8",buttonTextColor:s.buttonTextColor||"white"},metadata:c,dev:t,sandboxEnvironment:i}),this.allowedPersonalInformationFields=["firstName"],this.personalInformation=o,this.appearance=s,this.apiBaseURL="https://identity.svc.youverify.co",this.sandboxEnvironment&&!this.dev&&(this.apiBaseURL="https://identity.staging.svc.youverify.co"),this.dev&&!this.sandboxEnvironment&&(this.apiBaseURL="https://identity.dev.svc.youverify.co"),this.publicMerchantKey=e,this.onSuccess=a,this.onFailure=n,this.onClose=r,this.onCancel=l,this.onRetry=d,this.metadata=c,this.iFrameMessageHandler=e=>{this.handleIFrameMessage(e)}}validateOptions(){if(!this.businessId)throw new Error("Public Merchant Key is required");if(this.onSuccess&&"function"!=typeof this.onSuccess)throw new Error("onSuccess callback must be of type function");if(this.onFailure&&"function"!=typeof this.onFailure)throw new Error("onFailure callback must be of type function");if(this.onRetry&&"function"!=typeof this.onRetry)throw new Error("onRetry callback must be of type function");if(this.onClose&&"function"!=typeof this.onClose)throw new Error("onClose callback must be of type function");if(this.personalInformation&&("object"!=typeof this.personalInformation||Array.isArray(this.personalInformation)))throw new Error("Personal Information should be of type object");if(this.personalInformation)for(const e of Object.keys(this.personalInformation))if(!this.allowedPersonalInformationFields.includes(e))throw new Error(e+" is not allowed in Personal Information. Must be one of "+this.allowedPersonalInformationFields.join(", "))}async postLivenessData(e={}){await fetch(this.apiBaseURL+"/v1/sdk/identity/liveness/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({publicMerchantID:this.publicMerchantKey,components:["liveness"],faceImage:e.photo||"",passed:e.passed,metadata:this.metadata})})}handleIFrameMessage(e){var{data:t={},origin:e}=e;if(e===this.baseURL)switch(t.id){case"yvos:liveness:success":this.postLivenessData(t.data),this.onSuccess(t.data);break;case"yvos:liveness:failed":this.postLivenessData(t.data),this.onFailure(t.data);break;case"yvos:liveness:cancelled":this.onCancel(t.data);break;case"yvos:liveness:closed":this.setShowModal(!1);break;case"yvos:liveness:retry":this.onRetry(t.data)}}initIFrame(){return new Promise(async(e,t)=>{try{this.iFrame=this.createElement({tag:"iframe",attributes:{src:`${this.baseURL}/services/${this.businessId}/liveness`,style:{height:"100%",width:"100%"},class:"hide animate",allow:"camera; microphone; clipboard-read; clipboard-write"}}),this.iFrame.addEventListener("load",()=>{this.loader.classList.add("hide"),this.personalization.classList.remove("hide")}),this.modalContent.appendChild(this.iFrame),e({done:!0})}catch(e){t(e)}})}async start(){try{this.setShowModal(!0),window.addEventListener("message",this.iFrameMessageHandler),this.iFrame||await this.initIFrame()}catch(e){throw e}}startProcess(){this.preliminaryContent.classList.add("hide"),this.iFrame.classList.remove("hide")}},documentCapture:class extends e{constructor(e={}){var{publicMerchantKey:e,personalInformation:t={firstName:void 0},appearance:i={actionText:void 0},type:o,dev:s,countries:a,province:n,idTypes:r,sandboxEnvironment:l,onSuccess:d=()=>{},onClose:c=()=>{},onCancel:h=()=>{},metadata:m,hideUsingSecondaryDevice:p}=e;super({publicMerchantKey:e,personalInformation:t,metadata:m,dev:s,countries:a,province:n,idTypes:r,sandboxEnvironment:l,appearance:{actionText:i.actionText||"Start Document Capture",greeting:i.greeting||"We will need to carry out a  document capture. It will only take a moment.",buttonBackgroundColor:i.buttonBackgroundColor||"#46B2C8",primaryColor:i.primaryColor||"#46B2C8",buttonTextColor:i.buttonTextColor||"white"}}),this.publicMerchantKey=e,this.allowedDocumentTypes=Object.keys({nin:"National ID",passport:"Passport","drivers-license":"Driver License",voters_card:"Voters Card",pr_card:"Permit Card"}),this.allowedPersonalInformationFields=["firstName"],this.personalInformation=t,this.type=o,this.countries=a,this.province=n,this.idTypes=r,this.appearance=i,this.apiBaseURL="https://identity.svc.youverify.co",this.hideUsingSecondaryDevice=p,this.sandboxEnvironment&&!this.dev&&(this.apiBaseURL="https://identity.staging.svc.youverify.co"),this.dev&&!this.sandboxEnvironment&&(this.apiBaseURL="https://identity.dev.svc.youverify.co"),this.onSuccess=d,this.onClose=c,this.onCancel=h,this.metadata=m,this.iFrameMessageHandler=e=>{this.handleIFrameMessage(e)}}validateOptions(){if(!this.businessId)throw new Error("Public Merchant Key is required");if(this.onSuccess&&"function"!=typeof this.onSuccess)throw new Error("onSuccess callback must be of type function");if(this.onFailure&&"function"!=typeof this.onFailure)throw new Error("onFailure callback must be of type function");if(this.onClose&&"function"!=typeof this.onClose)throw new Error("onClose callback must be of type function");if(this.personalInformation&&("object"!=typeof this.personalInformation||Array.isArray(this.personalInformation)))throw new Error("Personal Information should be of type object");if(this.personalInformation)for(const e of Object.keys(this.personalInformation))if(!this.allowedPersonalInformationFields.includes(e))throw new Error(e+" is not allowed in Personal Information. Must be one of "+this.allowedPersonalInformationFields.join(", "))}async postScannedData(o){const s=o["type"];return delete o.type,new Promise(async(e,t)=>{try{const t=await fetch(this.apiBaseURL+"/v1/sdk/identity/document-capture/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(_objectSpread({publicMerchantID:this.publicMerchantKey,components:["id_capture"],documentType:s,method:"documentCapture",metadata:this.metadata},o))});if(!t.ok)throw t;var i=(await t.json())["data"];e(i)}catch(e){t(e)}})}async handleIFrameMessage(e){const{data:t={},origin:i}=e;if(i===this.baseURL)switch(t.id){case"yvos:document:success":const{fullDocumentFrontImage:e,fullDocumentImage:i}=t.data,o=await this.postScannedData(_objectSpread(_objectSpread({},t.data),{},{fullDocumentFrontImage:e||i,fullDocumentImage:void 0,photo:void 0}));this.onSuccess(o);break;case"yvos:document-upload:success":this.onSuccess(t.data);break;case"yvos:document:closed":this.setShowModal(!1);break;case"yvos:document:cancelled":this.onCancel(t.data)}}initIFrame(){const i=this.countries&&this.countries.length?JSON.stringify(this.countries):"",o=btoa(this.appearance.primaryColor),s=btoa(this.publicMerchantKey),a=this.hideUsingSecondaryDevice?"true":"false";return new Promise(async(e,t)=>{try{this.iFrame=this.createElement({tag:"iframe",attributes:{src:`${this.baseURL}/services/${this.businessId}/document?countries=${i}&primaryColor=${o}&pmk=${s}&hideUsingSecondaryDevice=`+a,style:{height:"100%",width:"100%"},class:"hide animate",allow:"camera; microphone; clipboard-read; clipboard-write"}}),this.iFrame.addEventListener("load",()=>{this.loader.classList.add("hide"),this.personalization.classList.remove("hide")}),this.modalContent.appendChild(this.iFrame),e({done:!0})}catch(e){t(e)}})}async start(){try{this.setShowModal(!0),window.addEventListener("message",this.iFrameMessageHandler),this.iFrame||await this.initIFrame()}catch(e){throw e}}startProcess(){this.preliminaryContent.classList.add("hide"),this.iFrame.classList.remove("hide")}}};"undefined"!=typeof window&&(window.YouverifySDK=e)})();