🖥 Web Integration

Redirect Link

This is the quickest way to integrate with Transak. Make sure to add your API key and customise using query parameters.

<a href="https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&<QUERY_PARAMETERS>" target="_blank">
  Buy/Sell Crypto with Transak
</a>

<a href="https://global.transak.com?apiKey=<YOUR_API_KEY>&<QUERY_PARAMETERS>" target="_blank">
  Buy/Sell Crypto with Transak
</a>

📘
Tip
To improve user experience, it's recommended to have Transak open in a new tab and pass the redirectURL parameter.

Embed/iframe (WebApp)

You can use the below example code to add the Transak widget directly into a page of your web app.

<html lang="en" style="height: 100%">
    <body style="margin:0; padding:0; height: 100%; display: grid">
        <div style="position: relative; width: 500px; height: 80dvh; margin: auto; box-shadow: 0 0 15px #1461db; border-radius: 15px; overflow: hidden">
            <iframe
                id="transakIframe"
                src="https://global-stg.transak.com/?apiKey=<YOUR_API_KEY>&<QUERY_PARAMETERS>"
                allow="camera;microphone;payment"
                style="height: 100%; width: 100%; border: none">
            </iframe>
        </div>

        <script>
            (function () {
                const transakIframe = document.getElementById("transakIframe")?.contentWindow;

                window.addEventListener('message', (message) => {
                    if (message.source !== transakIframe) return;

                    // To get all the events
                    console.log('Event ID: ', message?.data?.event_id);
                    console.log('Data: ', message?.data?.data);

                    // This will trigger when the user marks payment is made
                    if (message?.data?.event_id === 'TRANSAK_ORDER_SUCCESSFUL') {
                        console.log('Order Data: ', message?.data?.data);
                    }
                });
            })();
        </script>
    </body>
</html>

<html lang="en" style="height: 100%">
    <body style="margin:0; padding:0; height: 100%; display: grid">
        <div style="position: relative; width: 500px; height: 80dvh; margin: auto; box-shadow: 0 0 15px #1461db; border-radius: 15px; overflow: hidden">
            <iframe
                id="transakIframe"
                src="https://global.transak.com/?apiKey=<YOUR_API_KEY>&<QUERY_PARAMETERS>"
                allow="camera;microphone;payment"
                style="height: 100%; width: 100%; border: none">
            </iframe>
        </div>

        <script>
            (function () {
                const transakIframe = document.getElementById("transakIframe")?.contentWindow;

                window.addEventListener('message', (message) => {
                    if (message.source !== transakIframe) return;

                    // To get all the events
                    console.log('Event ID: ', message?.data?.event_id);
                    console.log('Data: ', message?.data?.data);

                    // This will trigger when the user marks payment is made
                    if (message?.data?.event_id === 'TRANSAK_ORDER_SUCCESSFUL') {
                        console.log('Order Data: ', message?.data?.data);
                    }
                });
            })();
        </script>
    </body>
</html>

Double Embed iframe (WebApp)

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} />;
}

Transak SDK (React/Vue/Angular/TS)

You can integrate Transak into your project using our SDK.

Check out this page for more information about SDK configuration.

Using NPM Package (v2/v1)

📘
Migrating from v1 to v2
If you want to migrate to v2 please follow the guide here.

The NPM page for the SDK can be found here: https://www.npmjs.com/package/@transak/transak-sdk

# Using yarn
$ yarn add @transak/transak-sdk

# Using npm
$ npm install @transak/transak-sdk

import { TransakConfig, Transak } from '@transak/transak-sdk';

const transakConfig: TransakConfig = {
  apiKey: '<your-api-key>', // (Required)
  environment: Transak.ENVIRONMENTS.STAGING/Transak.ENVIRONMENTS.PRODUCTION, // (Required)
  // .....
  // For the full list of customisation options check the link below
};

const transak = new Transak(transakConfig);

transak.init();

// To get all the events
Transak.on('*', (data) => {
  console.log(data);
});

// This will trigger when the user closed the widget
Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
  console.log('Transak SDK closed!');
});

/*
* This will trigger when the user has confirmed the order
* This doesn't guarantee that payment has completed in all scenarios
* If you want to close/navigate away, use the TRANSAK_ORDER_SUCCESSFUL event
*/
Transak.on(Transak.EVENTS.TRANSAK_ORDER_CREATED, (orderData) => {
  console.log(orderData);
});

/*
* This will trigger when the user marks payment is made
* You can close/navigate away at this event
*/
Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
  console.log(orderData);
  transak.close();
});

import transakSDK from '@transak/transak-sdk';

let transak = new transakSDK({
  apiKey: '<YOUR_API_KEY>', // (Required)
  environment: '<STAGING/PRODUCTION>', // (Required)
  // .....
  // For the full list of customisation options check the link above
});

transak.init();

// To get all the events
transak.on(transak.ALL_EVENTS, (data) => {
  console.log(data);
});

// This will trigger when the user closed the widget
transak.on(transak.EVENTS.TRANSAK_WIDGET_CLOSE, (orderData) => {
  transak.close();
});

// This will trigger when the user marks payment is made
transak.on(transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
  console.log(orderData);
  transak.close();
});

Refer here for the full list of customisation options

🚧
React: Cleanup
If you are using React 18+, do not forget to run the cleanup code.
useEffect(() => {
  transak.init();

  // Cleanup code
  return () => {
    transak.close();
  };
}, []);

Using CDN (v1 only)

Please use the latest version from here and replace the same in the CDN URL

https://cdn.transak.com/js/sdk/<package_version_goes_here>/transak.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <script async src="https://cdn.transak.com/js/sdk/1.4.1/transak.js"></script>
    </head>

    <body>
        <script>
          function launchTransak() {
            let transak = new TransakSDK.default({
              apiKey: '<YOUR_API_KEY>', // (Required)
              environment: '<STAGING/PRODUCTION>', // (Required)
              // .....
              // For the full list of customisation options check the link above
            });

            transak.init();

            // To get all the events
            transak.on(transak.ALL_EVENTS, (data) => {
              console.log(data);
            });

            // This will trigger when the user closed the widget
            transak.on(transak.EVENTS.TRANSAK_WIDGET_CLOSE, (orderData) => {
              transak.close();
            });

            // This will trigger when the user marks payment is made
            transak.on(transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
              console.log(orderData);
              transak.close();
            });
          }

          window.onload = function() {
            launchTransak()
          }
        </script>
    </body>
</html>

Refer here for the full list of customisation options

Embed/iframe (Extensions)

Currently in Manifest v3 it is not possible to ASK for camera permission, which is required for our KYC flow. Hence we do not recommend using this integration option.

Note: If the browser permission is set to Camera: Allow then our widget works fine.

🖥 Web Integration

Redirect Link

📘
Tip

Embed/iframe (WebApp)

Double Embed iframe (WebApp)

📘
Tip

Transak SDK (React/Vue/Angular/TS)

Using NPM Package (v2/v1)

📘
Migrating from v1 to v2

🚧
React: Cleanup

Using CDN (v1 only)

Embed/iframe (Extensions)

Redirect Link

📘Tip

Embed/iframe (WebApp)

Double Embed iframe (WebApp)

📘Tip

Transak SDK (React/Vue/Angular/TS)

Using NPM Package (v2/v1)

📘Migrating from v1 to v2

🚧React: Cleanup

Using CDN (v1 only)

Embed/iframe (Extensions)

📘
Tip

📘
Tip

📘
Migrating from v1 to v2

🚧
React: Cleanup