π₯ 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>
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="transak-iframe"
src="https://global-stg.transak.com/?apiKey=<YOUR_API_KEY>&<QUERY_PARAMETERS>"
allow="camera;microphone;fullscreen;payment"
style="height: 100%; width: 100%; border: none">
</iframe>
</div>
<script>
(function () {
const transakIframe = document.getElementById("transak-iframe")?.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>
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.
Transak SDK (React/Vue/Angular)
You can integrate Transak into your project using our SDK.
Using NPM Package
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 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
Using CDN
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
Attention
Browser extensions are not supported!
Updated 8 days ago