Embed/iframe
WebApp
- Create a Widget URL (Backend Only)::
Call the Create Widget URLto generate a Widget URL by securely passing the widget parameters:
The response will return a widgetUrl
.
- 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.
Updated 17 days ago