<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>EVDI Tutorial</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>KYC Credential Issuance</h1>
<form id="kyc-form">
<label for="age">Age</label>
<input type="number" name="age" id="age" required />
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" required />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" required />
<button type="submit">Submit</button>
</form>
<img src="" alt="qrcode" width="238" height="238" id="qrcode" style="display:none;"/>
<script>
const form = document.getElementById('kyc-form');
const qrcodeImg = document.getElementById('qrcode');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const payload = {
age: formData.get('age'),
firstName: formData.get('firstName'),
lastName: formData.get('lastName')
};
const res = await fetch('/kyc-credential', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
const data = await res.json();
// Fetch the actual QR code image data
const qrRes = await fetch(data.qr_code_url);
const qrCodeData = await qrRes.json(); // Assume QR code is returned as JSON image data
qrcodeImg.src = qrCodeData;
qrcodeImg.style.display = 'block';
});
</script>
</body>
</html>
Now, you can test issuing a credential by filling out the form and scanning the generated QR code with the Empe DID Wallet.