<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bitzaro Widget HTML Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
</head>
<body></body>
<script>
// Replace these variables with actual values
const apiKey = 'xxx-xxx-xxx-xxx-xxxx'; // Your API key
const secretKey = 'xxx-xxx-xxx-xxx-xxxx'; // Your secret key
const requestUri = 'https://uat-paymentapi.bitzaro.com/widget'; // Request URL
const httpMethod = 'post';
const requestTimeStamp = Math.floor(Date.now() / 1000);
const rawString = `${apiKey}${httpMethod}${requestUri}${requestTimeStamp}`;
const lowercaseString = rawString.toLowerCase();
const signature = CryptoJS.HmacSHA256(lowercaseString, secretKey).toString(CryptoJS.enc.Base64);
const xSignature = `${apiKey}:${signature}:${requestTimeStamp}`;
fetch(requestUri, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': apiKey,
'x-signature': xSignature,
},
})
.then((response) => response.json())
.then((data) => {
const iframe = document.createElement('iframe');
iframe.title = 'External Content';
iframe.src = data.link;
iframe.width = '100%';
iframe.height = '600px';
iframe.frameBorder = '0';
document.body.appendChild(iframe);
})
.catch((error) => console.error('Error:', error));
</script>
</html>
