Hi there,
I'm creating a Laravel 9 application with Vue 2.
Currently I'm trying to implement a verification service (sumsub) into my application.
However, I'm facing problems which seem to be related to vue.
Below is the minimum example.
blade-file:
<!DOCTYPE html>
<html>
<head>
@meta_tags
<script src="/js/sns-websdk-builder.js"></script>
</head>
<body>
<div id="app">
// CODE FROM BY DESCRIPTION BELOW GOES HERE
</div>
@meta_tags('footer')
</body>
</html>
minimum code to implement to get the verification service working:
<div id="sumsub-websdk-container"></div>
<script type="application/javascript">
function launchWebSdk(accessToken, applicantEmail, applicantPhone) {
let snsWebSdkInstance = snsWebSdk.init(
accessToken,
() => this.getNewAccessToken()
)
.withConf({
lang: 'en',
email: applicantEmail,
phone: applicantPhone,
i18n: {"document":{"subTitles":{"IDENTITY": "Upload a document that proves your identity"}}},
onMessage: (type, payload) => {
console.log('WebSDK onMessage', type, payload)
},
uiConf: {
customCssStr: ""
},
onError: (error) => {
console.error('WebSDK onError', error)
},
})
.withOptions({ addViewportTag: false, adaptIframeHeight: true})
.on('stepCompleted', (payload) => {
console.log('stepCompleted', payload)
})
.on('onError', (error) => {
console.log('onError', payload)
})
.onMessage((type, payload) => {
console.log('onMessage', type, payload)
})
.build();
snsWebSdkInstance.launch('#sumsub-websdk-container')
}
function getNewAccessToken() {
return Promise.resolve("1234")
}
launchWebSdk("1234")
</script>
Observations
If I put the JS code into the main vue container (<div id="app"></div>) the page loads, but nothing happens.
- No errors in console.
- Network tab in browser: websdk.html?_=id_71354100 <== this comes from sumsub | Status: canceled
But the JavaScript-code seems to get executed. Because after loading the page and examining the source
<div id="sumsub-websdk-container"></div>
turns into:
<iframe width="100%" scrolling="no" allow="camera; microphone" frameborder="0" src="https://api.sumsub.com/idensic/websdk.html?_=id_7577300"></iframe>
It looks like vue is blocking loading the src from the iframe.
If I change the ID of the root component <div id="app"></div> to app2 vue complains (browser console) but the verification window appears - as it should.
If I put the whole JS code together with <div id="sumsub-websdk-container"></div> into a vue component everything works fine too.
Can anyone give me a hint please how to solve this problem?
Later I would like to put the whole "verification part" into a blade component, however before doing this I would like to solve this "main" problem.
