Transak Sandbox

customisingThemeSDK.js

import React, { useEffect } from "react";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import { Transak } from "@transak/transak-sdk";
import config from "../config";

export default function CustomisingThemeSDK() {
  useEffect(() => {
    const transakConfig = {
      apiKey: config.apiKeyGlobalStaging,
      environment: Transak.ENVIRONMENTS.STAGING,
      themeColor: "0066FF",
      colorMode: "LIGHT",
      backgroundColors: "%23F0F8FF,%23D6EAF8,%23B9DCF5",
      textColors: "%230D47A1,%231976D2,%2364B5F6",
      borderColors: "%23B9DCF5,%2390CAF9,%2364B5F6",
      containerId: "transakContainer",
    };

    const transak = new Transak(transakConfig);
    transak.init();

    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>
  );
}