Embed/iframe

WebApp

Create a Session (Backend Only):

Call the Create Session API to generate a sessionId by securely passing the widget parameters:

The response will return a sessionId.

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>&sessionid=<YOUR_SESSION_ID>"
                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>&sessionId=<YOUR_SESSION_ID>"
                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>

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.