React

Note: Keep your apiKey and secretKey safe.

app.js

import React from 'react';
import CryptoJS from 'crypto-js';

const App = () => {
  // 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 requestUrl = 'https://uat-paymentapi.bitzaro.com/widget'; // Request URL
  const httpMethod = 'post';
  const requestTimeStamp = Math.floor(Date.now() / 1000);

  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}`;

  const [widgetLink, setWidgetLink] = React.useState('');

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

  return (
    <>
      <iframe title="External Content" src={widgetLink} width="100%" height="600px" frameBorder="0" />
    </>
  );
};

export default App;