<template>
<iframe title="External Content" :src="iframeSrc" width="100%" height="600px" frameborder="0" />
</template>
<script>
import CryptoJS from 'crypto-js';
export default {
data() {
return {
apiKey: 'xxx-xxx-xxx-xxx-xxxx', // Your API key
secretKey: 'xxx-xxx-xxx-xxx-xxxx', // Your secret key
requestUrl: 'https://uat-paymentapi.bitzaro.com/widget', // Request URL
httpMethod: 'post',
requestTimeStamp: Math.floor(Date.now() / 1000),
widgetLink: ''
};
},
computed: {
iframeSrc() {
return this.widgetLink;
}
},
mounted() {
const rawString = `${this.apiKey}${this.httpMethod}${this.requestUrl}${this.requestTimeStamp}`;
const lowercaseString = rawString.toLowerCase();
const signature = CryptoJS.HmacSHA256(lowercaseString, this.secretKey).toString(CryptoJS.enc.Base64);
const xSignature = `${this.apiKey}:${signature}:${this.requestTimeStamp}`;
fetch(this.requestUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': this.apiKey,
'x-signature': xSignature,
},
})
.then((response) => response.json())
.then((data) => {
this.widgetLink = data.link;
})
.catch((error) => console.error('Error:', error));
}
};
</script>
<style>
/* Add styles here if needed */
</style>
