Angular

Note: Keep your apiKey and secretKey safe.

app.component.ts

// app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as CryptoJS from 'crypto-js';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; // Import DomSanitizer
@Component({
  selector: 'app-root',
  template: `
    <iframe
      title="External Content"
      [src]="iframeSrc"
      width="100%"
      height="600px"
      frameborder="0"
    ></iframe>
  `,
  styles: [],
})
export class AppComponent {
  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: string | undefined;

  constructor(private http: HttpClient, private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    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}`;

    this.http
      .post<any>(this.requestUrl, null, {
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': this.apiKey,
          'x-signature': xSignature,
        },
      })
      .subscribe(
        (data) => {
          this.widgetLink = data.link;
        },
        (error) => {
          console.error('Error:', error);
        }
      );
  }

  get iframeSrc(): SafeResourceUrl {
    // Use SafeResourceUrl type for iframeSrc
    const url = this.widgetLink;
    return this.sanitizer.bypassSecurityTrustResourceUrl(url); // Sanitize the URL
  }
}