Code Samples

The below code samples are indicative and meant to be used as a general guideline.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-back-issuance',
  template: `<button (click)="initiateBackIssuance()">Issue Credential</button>`
})
export class BackIssuanceComponent {
  payload = {
    config: {
      allowMultiples: false,
      logoUri: 'https://example.com/logo.png',
      source: 'YourApplicationName'
    },
    payload: {
      // add your payload details here
    }
  };

  initiateBackIssuance() {
    const wideWindow = window.open('https://wid3.app/popup/start', 'WIDE', 'width=600, height=800');
    if (!wideWindow) {
      alert('Please enable pop-ups and try again.');
      return;
    }

    window.addEventListener('message', (event) => {
      if (event.origin !== 'https://wid3.app') return;

      if (event.data.status === 'ready') {
        wideWindow.postMessage({ type: 'initiate', payload: this.payload }, 'https://wid3.app');
      } else if (event.data.status === 'closed') {
        // Handle the closed status
      } else if (event.data.status === 'already_exists') {
        // Handle the already_exists status
      }
    }, false);
  }
}

React

import React from 'react';

const BackIssuance = () => {
  const payload = {
    config: {
      allowMultiples: false,
      logoUri: 'https://example.com/logo.png',
      source: 'YourApplicationName'
    },
    payload: {
      // add your payload details here
    }
  };

  const initiateBackIssuance = () => {
    const wideWindow = window.open('https://wid3.app/popup/start', 'WIDE', 'width=600, height=800');
    if (!wideWindow) {
      alert('Please enable pop-ups and try again.');
      return;
    }

    window.addEventListener('message', (event) => {
      if (event.origin !== 'https://wid3.app') return;

      if (event.data.status === 'ready') {
        wideWindow.postMessage({ type: 'initiate', payload: payload }, 'https://wid3.app');
      } else if (event.data.status === 'closed') {
        // Handle the closed status
      } else if (event.data.status === 'already_exists') {
        // Handle the already_exists status
      }
    }, false);
  };

  return (
    <button onClick={initiateBackIssuance}>Issue Credential</button>
  );
};

export default BackIssuance;

Next.js

import React from 'react';

export default function BackIssuancePage() {
  const payload = {
    config: {
      allowMultiples: false,
      logoUri: 'https://example.com/logo.png',
      source: 'YourApplicationName'
    },
    payload: {
      // add your payload details here
    }
  };

  const initiateBackIssuance = () => {
    const wideWindow = window.open('https://wid3.app/popup/start', 'WIDE', 'width=600, height=800');
    if (!wideWindow) {
      alert('Please enable pop-ups and try again.');
      return;
    }

    window.addEventListener('message', (event) => {
      if (event.origin !== 'https://wid3.app') return;

      if (event.data.status === 'ready') {
        wideWindow.postMessage({ type: 'initiate', payload: payload }, 'https://wid3.app');
      } else if (event.data.status === 'closed') {
        // Handle the closed status
      } else if (event.data.status === 'already_exists') {
        // Handle the already_exists status
      }
    }, false);
  };

  return (
    <div>
      <button onClick={initiateBackIssuance}>Issue Credential</button>
    </div>
  );
}