So i want to use following html widget in my next.js app to verify user identities for my service. I have a problem with next.js not using the functions inside the script tag of html when i try to return it from function component. It doesn't even higlight it as a code.
So here is the html widget:
<!doctype html>
<html>
<head>
<!-- BLOCKPASS WIDGET SCRIPT -->
<script src="https://cdn.blockpass.org/widget/scripts/release/3.0.0/blockpass-kyc-connect.prod.js"></script>
</head>
<body>
<button id="blockpass-kyc-connect">Connect with Blockpass</button>
<script>
const blockpass = new BlockpassKYCConnect(
'my_client_id',
{
env: 'prod',
local_user_id: Date.now()
})
blockpass.startKYCConnect()
blockpass.on('KYCConnectSuccess', () => {
//add code that will trigger when data have been sent. ex:
//alert('Success!')
})
blockpass.on('KYCConnectClose', () => {
//add code that will trigger when the workflow is finished. ex:
//alert('Finished!')
})
blockpass.on('KYCConnectCancel', () => {
//add code that will trigger when the workflow is aborted. ex:
//alert('Cancelled!')
})
</script>
</body>
</html>
And i would like to make react component out of it. i was trying to implement it using the function component, to make it further reusable:
import React from 'react';
import Head from 'next/head';
export default function Blockpass () {
return (
<Head>
<!-- BLOCKPASS WIDGET SCRIPT -->
<script src="https://cdn.blockpass.org/widget/scripts/release/3.0.0/blockpass-kyc-connect.prod.js"></script>
</Head>
<body>
<button id="blockpass-kyc-connect">Connect with Blockpass</button>
<script>
const blockpass = new BlockpassKYCConnect(
'my_client_id',
{
env: 'prod',
local_user_id: Date.now()
})
blockpass.startKYCConnect()
blockpass.on('KYCConnectSuccess', () => {
//add code that will trigger when data have been sent. ex:
//alert('Success!')
})
blockpass.on('KYCConnectClose', () => {
//add code that will trigger when the workflow is finished. ex:
//alert('Finished!')
})
blockpass.on('KYCConnectCancel', () => {
//add code that will trigger when the workflow is aborted. ex:
//alert('Cancelled!')
})
</script>
</body>
)
}
unfortunately this doesn't seem to work for next.js, as the content of <script> tag is not recognized. How can i make this html scripts to work inside my next.js/react/jsx app.
