const BASE_STYLES = `buttonSelector {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-family: Inter, Helvetica, Arial, sans-serif;
font-size: 16px;
padding: 12px 32px 12px 24px;
gap: 8px;
border-radius: 8px;
width: fit-content;
text-decoration: none;
cursor: pointer;
}
buttonSelector span {
color: inherit;
font-family: inherit;
font-size: inherit;
}
buttonSelector span:nth-child(1) {
line-height: 0;
}
buttonSelector.light {
background: #FFFFFF;
color: #20252C;
border: 1px solid #E0E4EB;
box-shadow: 0px 4px 8px rgba(0, 17, 51, 0.05);
}
buttonSelector.dark {
background: #20252C;
color: #FFFFFF;
border: 1px solid #E0E4EB;
box-shadow: 0px 4px 8px rgba(0, 17, 51, 0.05);
}
`
const TITLE = 'Login via Sumsub'
const svgLight = `
`
const svgDark = `
`
declare global {
interface Window {
isSumsubSignin: boolean
}
}
export interface InitSumsubSigninOptions {
baseUrl?: string
selector: string
applicantIdentifiersJWT?: string
title?: string
theme?: 'dark' | 'light'
}
type SumsubSigninCallback = (authCode: string) => void
function getUniLink(baseUrl: string, uniId: string, idJWT?: string) {
if (baseUrl[baseUrl.length - 1] !== '/') {
baseUrl = `${baseUrl}/`
}
const path = baseUrl.indexOf('localhost') === -1 ? `websdk/` : ''
let url = `${baseUrl}${path}p/${uniId}`
if (idJWT) {
url += `?ids=${idJWT}&signin`
} else {
url += '?signin'
}
return url
}
class SumsubSignin {
static instance: SumsubSignin
static uniId: string
static callback: SumsubSigninCallback
static options: InitSumsubSigninOptions
static unilink: string
static stylesId: string
static modal: Window | null
constructor() {
if (SumsubSignin.instance) {
return SumsubSignin.instance
}
SumsubSignin.stylesId = 'signin-' + btoa(new Date().getTime().toString())
SumsubSignin.instance = this
Object.freeze(this)
}
init(uniId: string, callback: SumsubSigninCallback, options: InitSumsubSigninOptions) {
SumsubSignin.uniId = uniId
SumsubSignin.callback = callback
SumsubSignin.options = options
this.insertStyles()
this.insertButton()
}
insertStyles() {
const style = document.getElementById(SumsubSignin.stylesId) || document.createElement('style')
style.id = SumsubSignin.stylesId
style.innerHTML = BASE_STYLES.replace(/buttonSelector/g, SumsubSignin.options.selector)
document.head.appendChild(style)
}
insertButton() {
const el = document.querySelector(SumsubSignin.options.selector)
if (!el) {
console.error(`el .${SumsubSignin.options.selector} not found`)
return
}
if (!SumsubSignin.callback) {
console.error('callback not found')
return
}
if (!SumsubSignin.options.baseUrl) {
console.error('baseurl not found')
return
}
SumsubSignin.unilink = getUniLink(
SumsubSignin.options.baseUrl,
SumsubSignin.uniId,
SumsubSignin.options.applicantIdentifiersJWT
)
const theme = SumsubSignin.options.theme || 'light'
el.classList.add(theme)
el.setAttribute('href', SumsubSignin.unilink)
el.setAttribute('rel', 'noopener noreferrer')
const spanSvg = document.createElement('span')
spanSvg.classList.add('button-logo')
spanSvg.innerHTML = theme === 'light' ? svgLight : svgDark
const spanText = document.createElement('span')
spanText.innerText = SumsubSignin.options.title || TITLE
el.appendChild(spanSvg)
el.appendChild(spanText)
el.addEventListener('click', this.openModal)
}
openModal(e: Event): void {
e.preventDefault()
const WIDTH = 500
const HEIGHT = 800
const left = Math.trunc((document.body.offsetWidth - WIDTH) / 2)
const top = 100
const params = `menubar=no,toolbar=no,location=no,status=no,left=${left},top=${top},width=${WIDTH},height=${HEIGHT},noopener=no`
SumsubSignin.modal = window.open(SumsubSignin.unilink, TITLE, params)
if (!SumsubSignin.modal) {
window.alert('Error open')
return
}
window.addEventListener('message', SumsubSignin.listener)
}
static listener(event: MessageEvent) {
const url = new URL(SumsubSignin.unilink)
if (event.origin !== url.origin) {
return
}
const { data } = event
if (data.method === 'onApplicantReviewComplete') {
window.removeEventListener('message', SumsubSignin.listener)
SumsubSignin.modal && SumsubSignin.modal.close()
SumsubSignin.callback(data.authCode)
}
}
}
function initSumsubSignin(
uniId: string,
callback: SumsubSigninCallback,
options: InitSumsubSigninOptions = {
baseUrl: 'https://in.sumsub.com/',
selector: 'sumsub-signin-btn',
theme: 'light',
}
): void {
const instance = new SumsubSignin()
instance.init(uniId, callback, options)
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
window.initSumsubSignin = initSumsubSignin
export default initSumsubSignin