@quienxmi/sdk-iframe-project
Version:
SDK to control an iframe for requesting quotes via Qxm.
74 lines (63 loc) • 2.62 kB
HTML
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test SDK Iframe Project | Qxm</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&display=swap">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div style="width:55%;text-align:center;">
<form id="formInput" style="max-width:380px;margin:auto;text-align:center;">
<img src="./logo.svg" alt="Logo Qxm" height="60">
<small class="legend">To use this module, you need to have a backend implementation and the appropriate
access credentials.</small>
<textarea id="input" type="text" placeholder="Enter the generated token" minlength="100" required></textarea>
<button id="submitButton" type="submit">Load form</button>
</form>
</div>
<div class="content-iframe">
<iframe id="iframeTestModule" height="500" width="100%" style="margin:20px 0;padding:0 20px"></iframe>
</div>
</body>
<!-- <script src="/dist/qxm-iframe-project.umd.js"></script> -->
<!-- <script type="module" src="/dist/qxm-iframe-project.es.js"></script> -->
<script type="module" src="../../../src/index.ts"></script>
<script>
let iframeProject = null;
async function loadModule() {
iframeProject = new QxmIframeProject('#iframeTestModule', {
scrolling: false,
resize: true,
logs: true
});
iframeProject.subscribeError((error) => {
console.log('Iframe error:', error);
alert(error.message);
});
iframeProject.subscribeEvent((event) => {
console.log('Iframe event:', event);
if (event.data.event === 'PROJECT_CREATE') {
alert(`Your order was successfully created! Your CODE is "${event.data.code}"`);
}
});
}
const form = document.getElementById('formInput');
const input = document.getElementById('input');
form.addEventListener('submit', async (event) => {
event.preventDefault();
if (!iframeProject) {
loadModule();
}
const inputToken = input.value;
iframeProject.setToken(inputToken).then((decodedToken) => {
console.log('Decoded token:', decodedToken);
});
});
input.addEventListener('input', () => {
submitButton.disabled = !form.checkValidity();
});
</script>
</html>