Skip to content

Instantly share code, notes, and snippets.

@ajtransak
Last active December 20, 2024 13:08
Show Gist options
  • Save ajtransak/2eab8dd4dfcd2138c37ef6c057a9bb2b to your computer and use it in GitHub Desktop.
Save ajtransak/2eab8dd4dfcd2138c37ef6c057a9bb2b to your computer and use it in GitHub Desktop.
Transak Sandbox
import React, { useEffect } from "react";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import config from "../config";
const logAndToast = (eventName, data, toastType = "info") => {
console.log(`${eventName}:`, JSON.stringify(data, null, 2));
toast[toastType](eventName, { position: "bottom-right", autoClose: 2000 });
};
export default function WebhookEventsIFrame() {
useEffect(() => {
const iframe = document.getElementById("transak-iframe");
const handleMessage = (event) => {
const { source, data } = event;
if (!iframe || source !== iframe.contentWindow || !data?.event_id) return;
const { event_id, data: eventData } = data;
switch (event_id) {
case "TRANSAK_WIDGET_INITIALISED":
logAndToast("TRANSAK_WIDGET_INITIALISED", eventData, "success");
break;
case "TRANSAK_ORDER_CREATED":
logAndToast("TRANSAK_ORDER_CREATED", eventData);
break;
case "TRANSAK_ORDER_SUCCESSFUL":
logAndToast("TRANSAK_ORDER_SUCCESSFUL", eventData, "success");
break;
case "TRANSAK_ORDER_CANCELLED":
logAndToast("TRANSAK_ORDER_CANCELLED", eventData, "warning");
break;
case "TRANSAK_ORDER_FAILED":
logAndToast("TRANSAK_ORDER_FAILED", eventData, "error");
break;
case "TRANSAK_WALLET_REDIRECTION":
logAndToast("TRANSAK_WALLET_REDIRECTION", eventData);
break;
case "TRANSAK_WIDGET_CLOSE_REQUEST":
logAndToast("TRANSAK_WIDGET_CLOSE_REQUEST", eventData);
break;
case "TRANSAK_WIDGET_CLOSE":
logAndToast("TRANSAK_WIDGET_CLOSE", eventData);
break;
case "TRANSAK_USER_INFO_RECEIVED":
logAndToast("TRANSAK_USER_INFO_RECEIVED", eventData);
break;
case "TRANSAK_GET_USER_REQUEST":
logAndToast("TRANSAK_GET_USER_REQUEST", eventData);
break;
case "TRANSAK_LOGOUT_USER_REQUEST":
logAndToast("TRANSAK_LOGOUT_USER_REQUEST", eventData);
break;
default:
console.warn(`Unhandled event: ${event_id}`);
break;
}
};
window.addEventListener("message", handleMessage);
return () => window.removeEventListener("message", handleMessage);
}, []);
return (
<Stack direction="column" alignItems="center" sx={{ p: "4px" }}>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
minHeight: "100px",
border: "1px dashed grey",
p: "16px",
}}
>
<iframe
id="transak-iframe"
title="Transak"
src={`https://global-stg.transak.com?apiKey=${config.apiKeyGlobalStaging}`}
allow="camera;microphone;fullscreen;payment"
style={{ height: 650, width: 400, border: "none" }}
/>
</Box>
</Stack>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment