Transak Playground

customisingThemeIFrame.js

import React, { useEffect, useState } from "react";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import config from "../config";

export default function CustomisingThemeIFrame() {
  const [iframeSrc, setIframeSrc] = useState("");

  useEffect(() => {
    const baseUrl = "https://global-stg.transak.com";
    const queryParams = [
      `apiKey=${config.apiKeyGlobalStaging}`,
      `themeColor=%230066FF`,
      `colorMode=LIGHT`,
      `backgroundColors=%23F0F8FF,%23D6EAF8,%23B9DCF5`,
      `textColors=%230D47A1,%231976D2,%2364B5F6`,
      `borderColors=%23B9DCF5,%2390CAF9,%2364B5F6`,
    ].join("&");

    setIframeSrc(`${baseUrl}?${queryParams}`);
  }, []);

  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",
        }}
      >
        {iframeSrc && (
          <iframe
            title="Transak"
            src={iframeSrc}
            allow="camera;microphone;fullscreen;payment"
            style={{ height: 650, width: 400, border: "none" }}
          />
        )}
      </Box>
    </Stack>
  );
}