> For a complete page index, fetch https://docs.transak.com/llms.txt # iFrame The Transak iFrame integration allows you to embed Transak’s interface directly into your website, enabling users to buy or sell crypto without leaving your page. ## Single Embed iFrame #### Create Widget URL (using Backend Only) Call the [Create Widget URL](/api/public/create-widget-url) API from your backend to generate a secure widget url using Query parameters The response returns a `widgetUrl`. A `widgetUrl` is valid for 5 minutes and can only be used once. A new `widgetUrl` must be generated for every user flow. **Example Request:** ```bash curl --request POST \ --url https://api-gateway-stg.transak.com/api/v2/auth/session \ --header 'access-token: YOUR_ACCESS_TOKEN' \ --header 'content-type: application/json' \ --data '{ "widgetParams": { "apiKey": "YOUR_API_KEY", "referrerDomain": "yourdomain.com" } }' ``` #### Pass the widget URL to your page Add the `widgetUrl` to your page by embedding the iframe and message listener below. **Example:** ```html

``` ### Extensions We do not recommend using the extension integration, as the Transak interface requires browser camera permission. Integration will only work if the browser permission is already set to **Allow**. Chrome extensions built using [Manifest v3](https://developer.chrome.com/docs/extensions/mv3/declare_permissions/) cannot programmatically request access to the device camera. Since the Transak KYC flow requires camera access for identity verification (such as capturing ID documents or performing liveness checks), the extension cannot trigger the browser’s camera permission prompt when the widget loads. Because of this limitation, the KYC process may fail unless the user has already manually granted camera access in their browser settings. ## Double Embed iFrame #### Create Widget URL (using Backend Only) Call the [Create Widget URL](/api/public/create-widget-url) API from your backend to generate a secure widget url using Query parameters The response returns a `widgetUrl`. A `widgetUrl` is valid for 5 minutes and can only be used once. A new `widgetUrl` must be generated for every user flow. **Example Request:** ```bash curl --request POST \ --url https://api-gateway-stg.transak.com/api/v2/auth/session \ --header 'access-token: YOUR_ACCESS_TOKEN' \ --header 'content-type: application/json' \ --data '{ "widgetParams": { "apiKey": "YOUR_API_KEY", "referrerDomain": "yourdomain.com" } }' ``` #### Pass the widget URL to your page Add `allow=camera;microphone;payment` to both the outer and inner iframe. If you cannot set these attributes, the widget will detect it and provide a unique KYC link during the flow (also emailed to the user). **Example:** **`Outer iframe`** ```typescript title="Outer iframe" 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( (searchParams.get("environment") as Environment) || "STAGING" ); const [sessionId, setSessionId] = useState( (searchParams.get("sessionId") || "") ); const [apiKey, setApiKey] = useState( searchParams.get("apiKey") || "" ); const toggleEnvironment = (selectedEnvironment: Environment) => { setEnvironment(selectedEnvironment); }; const handleApiChange = (e: ChangeEvent) => { 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 (

Select Environment:

API Key

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

Transak Double iframe Supporter

; }; const router = createBrowserRouter([ { path: "/", element: , }, { path: "/staging", element: , }, { path: "/production", element: , }, ]); export default function App() { return ; } ``` ## Events

Event Name	Description
`TRANSAK_WIDGET_INITIALISED`	Widget initialised with query params
`TRANSAK_WIDGET_OPEN`	Widget fully loaded
`TRANSAK_ORDER_CREATED`	Order created by user
`TRANSAK_ORDER_SUCCESSFUL`	Order is successful
`TRANSAK_ORDER_CANCELLED`	Order is cancelled
`TRANSAK_ORDER_FAILED`	Order is failed
`TRANSAK_WIDGET_CLOSE`	Widget is about to close

> Embed Transak's interface in your site for a seamless experience