Double Embed iframe

You can use the below example code to establish a parent-child iframe scenario with Transak widget directly into a page of your web app.

Example Playground: Transak Double iframe Demo
Video Demos: Order Flow with KYC: & Order Flow without KYC

📘
Tip
Add allow="camera;microphone;payment" as attributes in both the enclosing and inner iframe. If you are unable to add them, the Transak iframe will automatically detect it. During the KYC process, it will provide you with a unique KYC link that you can use to complete the KYC. This unique URL will also be emailed to the user at their specified email address.

import { ChangeEvent, useState } from "react";
import "./App.css";
import { useSearchParams } from "react-router-dom";

type Environment = "STAGING" | "PRODUCTION";

export default function OuterIframe() {
  const [searchParams] = useSearchParams();

  const [environment, setEnvironment] = useState<Environment>(
    (searchParams.get("environment") as Environment) || "STAGING"
  );

  const [apiKey, setApiKey] = useState<string>(
    searchParams.get("apiKey") || ""
  );

  const toggleEnvironment = (selectedEnvironment: Environment) => {
    setEnvironment(selectedEnvironment);
  };

  const handleApiChange = (e: ChangeEvent<HTMLInputElement>) => {
    setApiKey(e.target.value);
  };

  const apiUrl =
    environment === "STAGING"
      ? `https://transak-double-iframe-supporter.vercel.app/staging?environment=${environment}`
      : `https://transak-double-iframe-supporter.vercel.app/production?environment=${environment}`;

  const finalUrl = `${apiUrl}${apiKey ? `&apiKey=${apiKey}` : ""}`;

  return (
    <main className="container">
      <div className="content">
        <label htmlFor="dropdown">Select Environment:</label>
        <select
          id="dropdown"
          value={environment}
          onChange={(e) => toggleEnvironment(e.target.value as Environment)}
        >
          <option value="STAGING">Staging</option>
          <option value="PRODUCTION">Production</option>
        </select>
      </div>

      <div className="content">
        <span>API Key</span>
        <input type="text" value={apiKey} onChange={handleApiChange} />
      </div>

      <iframe
        className="outer"
        src={finalUrl}
        allow="camera;microphone;payment"
      />
    </main>
  );
}

import {
  RouterProvider,
  createBrowserRouter,
  useSearchParams,
} from "react-router-dom";
import "./App.css";

// below code uses react-router-dom. Enclose your Application with BrowserRouter component 

export const InnerIframe = () => {
  const [searchParams] = useSearchParams();
  const apiKey = searchParams.get("apiKey") || " ";

  return (
    <iframe
      width="400"
      height="600"
      src={`https://global-stg.transak.com?apiKey=${encodeURIComponent(
        apiKey
      )}`}
      allow="camera;microphone;payment"
    ></iframe>
  );
};

export const Production = () => {
  const [searchParams] = useSearchParams();
  const apiKey = searchParams.get("apiKey") || " ";

  return (
    <iframe
      width="400"
      height="600"
      src={`https://global.transak.com?apiKey=${encodeURIComponent(apiKey)}`}
      allow="camera;microphone;payment"
    ></iframe>
  );
};

export const Home = () => {
  return <div className="container">Transak Double iframe Supporter</div>;
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/staging",
    element: <Staging />,
  },
  {
    path: "/production",
    element: <Production />,
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

📘Tip

📘
Tip