Customising the Widget using containerId - Transak SDK

containerIdSDK.js

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

// add the following lines to your css file to target the Transak Widget Container
// #transakMount {
//   height: 650px;
//   width: 400px;
//   border: 1px solid #1461da;
// }

export default function ContainerIdSDK() {
  const transakConfig = {
    apiKey: config.apiKeyGlobalStaging,
    environment: Transak.ENVIRONMENTS.STAGING,
    containerId: "transakMount",
  };

  useEffect(() => {
    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="transakMount" />
          </div>
        </Stack>
      </Box>
    </Stack>
  );
}