Integration OptionsWeb

iFrame

Embed Transak's interface in your site for a seamless experience
View as Markdown

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

1

Create Widget URL (using Backend Only)

Call the Create Widget URL to generate a Widget URL by securely passing the widget 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:

$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"
>  }
>}'
2

Pass the widget URL to your page

Add the widgetUrl to your page by embedding the iframe and message listener below.

Example:

1<html lang="en" style="height: 100%">
2  <body style="margin:0; padding:0; height: 100%; display: grid">
3    <div style="position: relative; width: 500px; height: 80dvh; margin: auto; box-shadow: 0 0 15px #1461db; border-radius: 15px; overflow: hidden">
4        <iframe
5            id="transakIframe"
6            src="https://global.transak.com/?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>"
7            allow="camera;microphone;payment"
8            style="height: 100%; width: 100%; border: none">
9        </iframe>
10    </div>
11
12    <script>
13        (function () {
14            const transakIframe = document.getElementById("transakIframe")?.contentWindow;
15
16            window.addEventListener('message', (message) => {
17                if (message.source !== transakIframe) return;
18
19                // To get all the events
20                console.log('Event ID: ', message?.data?.event_id);
21                console.log('Data: ', message?.data?.data);
22
23                // This will trigger when the user marks payment is made
24                if (message?.data?.event_id === 'TRANSAK_ORDER_SUCCESSFUL') {
25                    console.log('Order Data: ', message?.data?.data);
26                }
27            });
28        })();
29    </script>
30  </body>
31</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 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

1

Create Widget URL (using Backend Only)

Call the Create Widget URL to generate a Widget URL by securely passing the widget 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:

$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"
>  }
>}'
2

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:

1import { ChangeEvent, useState } from "react";
2import "./App.css";
3import { useSearchParams } from "react-router-dom";
4
5type Environment = "STAGING" | "PRODUCTION";
6
7export default function OuterIframe() {
8  const [searchParams] = useSearchParams();
9
10  const [environment, setEnvironment] = useState<Environment>(
11    (searchParams.get("environment") as Environment) || "STAGING"
12  );
13  const [sessionId, setSessionId] = useState<string>(
14    (searchParams.get("sessionId") || "")
15  );
16
17  const [apiKey, setApiKey] = useState<string>(
18    searchParams.get("apiKey") || ""
19  );
20
21  const toggleEnvironment = (selectedEnvironment: Environment) => {
22    setEnvironment(selectedEnvironment);
23  };
24
25  const handleApiChange = (e: ChangeEvent<HTMLInputElement>) => {
26    setApiKey(e.target.value);
27  };
28
29  const apiUrl =
30    environment === "STAGING"
31      ? `https://transak-double-iframe-supporter.vercel.app/staging?environment=${environment}`
32      : `https://transak-double-iframe-supporter.vercel.app/production?environment=${environment}`;
33
34  const finalUrl = `${apiUrl}${apiKey ? `&apiKey=${apiKey}` : ""}`;
35
36  return (
37    <main className="container">
38      <div className="content">
39        <label htmlFor="dropdown">Select Environment:</label>
40        <select
41          id="dropdown"
42          value={environment}
43          onChange={(e) => toggleEnvironment(e.target.value as Environment)}
44        >
45          <option value="STAGING">Staging</option>
46          <option value="PRODUCTION">Production</option>
47        </select>
48      </div>
49
50      <div className="content">
51        <span>API Key</span>
52        <input type="text" value={apiKey} onChange={handleApiChange} />
53      </div>
54
55      <iframe
56        className="outer"
57        src={finalUrl}
58        allow="camera;microphone;payment"
59      />
60    </main>
61  );
62}

Events

Event NameDescription
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