bani-vue/src/bani.ts

Bani Vue Payment Widget is a convenient and user-friendly payment solution for web applications. It enables businesses to easily accept payments through various channels such as mobile money, cryptocurrency, bank transfers, and third-party wallets. With j

import { Plugin, App, ref, watch } from "vue";
import { BaniPayload, BaniPopup } from "./types";
import semver from "semver";

export function initializeBani() {
	const errorMessage = "BaniVue initialization not found! Did you register the plugin?";
	const isScriptLoaded = ref(false);
	const unwatch = watch(isScriptLoaded, () => {
		unwatch();
	});

	/** Initialize using a self called function */
	const scriptUrl = "https://bani-assets.s3.eu-west-2.amazonaws.com/static/widget/js/window.js";

	/** Load the bani script to the window */
	//@ts-ignore
	if (!window.BaniPopUp) {
		const script = document.createElement("script");
		script.id = "bani-vue__bani-popup";
		script.src = scriptUrl;
		script.async = true;
		script.onerror = () => {
			isScriptLoaded.value = true;
			throw new Error("Unable to initialize BaniVue.");
		};
		script.onload = () => {
			isScriptLoaded.value = true;
		};
		document.body.appendChild(script);
	}

	function showPopup(payload: BaniPayload): void {
		if (!window.BaniPopUp) {
			console.error(errorMessage);
			return;
		}

		window.BaniPopUp(payload);
	}

	function useBani(): BaniPopup {
		return showPopup;
	}

	const BaniVue: Plugin = {
		async install(app: App): Promise<any> {
			/** Add a global helper for SPA template tag */
			app.config.globalProperties.$bani = (payload: BaniPayload): void => showPopup(payload);
		},
	};

	return {
		isScriptLoaded,
		BaniVue,
		useBani,
	};
}