Svelte

Note: Keep your apiKey and secretKey safe.

widget.svelte

<!-- Widget.svelte -->

<script>
  import { onMount } from 'svelte';
  import CryptoJS from 'crypto-js';

  let apiKey = 'xxx-xxx-xxx-xxx-xxxx'; // Your API key
  let secretKey = 'xxx-xxx-xxx-xxx-xxxx'; // Your secret key
  let requestUrl = 'https://uat-paymentapi.bitzaro.com/widget'; // Request URL
  let httpMethod = 'post';
  let requestTimeStamp = Math.floor(Date.now() / 1000);
  let widgetLink = '';

  onMount(async () => {
    const rawString = `${apiKey}${httpMethod}${requestUrl}${requestTimeStamp}`;
    const lowercaseString = rawString.toLowerCase();
    const signature = CryptoJS.HmacSHA256(lowercaseString, secretKey).toString(CryptoJS.enc.Base64);
    const xSignature = `${apiKey}:${signature}:${requestTimeStamp}`;

    try {
      const response = await fetch(requestUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': apiKey,
          'x-signature': xSignature,
        }
      });
      const data = await response.json();
      widgetLink = data.link;
    } catch (error) {
      console.error('Error:', error);
    }
  });

  // Computed property to generate iframe source
  $: iframeSrc = widgetLink;
</script>

<iframe title="External Content" src={iframeSrc} width="100%" height="600px" frameborder="0"></iframe>

<style>
  /* Add component-specific styles here if needed */
</style>