Skip to content

Instantly share code, notes, and snippets.

@ajtransak
Last active December 20, 2024 13:09
Show Gist options
  • Save ajtransak/733ac20cafb37f4ab42f5bafa41dfb28 to your computer and use it in GitHub Desktop.
Save ajtransak/733ac20cafb37f4ab42f5bafa41dfb28 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 { Transak } from "@transak/transak-sdk";
import config from "../config";
function logAndToast(eventName, data, toastType = "info") {
console.log(`${eventName}:`, data);
toast[toastType](eventName, {
position: "bottom-right",
autoClose: 2000,
});
}
export default function WebhookEventsSDK() {
const transakConfig = {
apiKey: config.apiKeyGlobalStaging,
environment: Transak.ENVIRONMENTS.STAGING,
redirectURL: "https://transak.com",
containerId: "transakContainer",
};
useEffect(() => {
const transak = new Transak(transakConfig);
transak.init();
// Event handlers passing event name and data to logAndToast
Transak.on(Transak.EVENTS.TRANSAK_WIDGET_INITIALISED, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_WIDGET_INITIALISED, data, "success");
});
Transak.on(Transak.EVENTS.TRANSAK_ORDER_CREATED, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_ORDER_CREATED, data, "info");
});
Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, data, "success");
transak.close();
});
Transak.on(Transak.EVENTS.TRANSAK_ORDER_CANCELLED, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_ORDER_CANCELLED, data, "warning");
});
Transak.on(Transak.EVENTS.TRANSAK_ORDER_FAILED, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_ORDER_FAILED, data, "error");
});
Transak.on(Transak.EVENTS.TRANSAK_WALLET_REDIRECTION, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_WALLET_REDIRECTION, data, "info");
});
Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE_REQUEST, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_WIDGET_CLOSE_REQUEST, data, "info");
});
Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, data, "info");
});
Transak.on(Transak.EVENTS.TRANSAK_USER_INFO_RECEIVED, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_USER_INFO_RECEIVED, data, "info");
});
Transak.on(Transak.EVENTS.TRANSAK_GET_USER_REQUEST, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_GET_USER_REQUEST, data, "info");
});
Transak.on(Transak.EVENTS.TRANSAK_LOGOUT_USER_REQUEST, (data) => {
logAndToast(Transak.EVENTS.TRANSAK_LOGOUT_USER_REQUEST, data, "info");
});
return () => {
transak.close();
};
}, []);
return (
<Stack direction="column" alignItems="center" sx={{ p: "4px" }}>
<Box
sx={{
width: "100%",
minHeight: "100px",
p: "16px",
border: "1px dashed grey",
}}
>
<Stack direction="column" justifyContent="center" alignItems="center">
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
<div id="transakContainer" />
</div>
</Stack>
</Box>
</Stack>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment