🤳 Customization options

Transak integrations are flexible to enable you to create the optimal user journey and experience for anyone onboarding and buying cryptocurrency through your app.

Enabling customization

In order to customize a Transak integration you need to pass your API key. You can do this by using the parameter apiKey.
You have two API keys for the staging and production environments.
You must complete our onboarding process in order for the production API key to be activated. To do this see Onboarding and Integration Process Overview .

🚧
Make sure you use the right API key for the right environment! If your customization options aren't working at all you may be passing the API key incorrectly.

Passing customization parameters

All of the parameters detailed in the pages in this section can be passed to the widget. There is a different way to pass parameters depending on the type of integration you're doing.

See below for details on how to do so:

If your integration specifies the widget URL then the parameters must be passed as query parameters.

URL query parameters

So as an example of passing the staging API key (apiKey) and specifying the cryptocurrency (cryptoCurrencyCode) as DAI:

https://global-stg.transak.com/?apiKey=71d9cc91-826d-41b6-b6ba-7d8962a9c3e0&cryptoCurrencyCode=DAI

Passing JSON objects as query parameters.

For variables that need to be passed as JSON objects then you can use the below NPM library to convert the object to the query string and then pass via the URL:

You can refer below example code that stringifies and passes userData and walletAddressesData objects.

let queryStringLib = require('query-string')

let userData = {
    "first_name": "Satoshi",
    "last_name": "Nakamoto",
    "email": "[email protected]",
    "mobileNumber": "+19692154942",
    "dob": "1994-11-26",
    "address": {
        "addressLine1": "170 Pine St",
        "addressLine2": "San Francisco",
        "city": "San Francisco",
        "state": "CA",
        "postCode": "94111",
        "countryCode": "US"
    }
};
let walletAddressesData = {
    networks : {
        'erc20' : {address : '0xfF21f4F75ea2BbEf96bC999fEB5Efec98bB3f6F4'},
        'bep2' : {address : 'bnb1dv5ps9vpj6clar79gkd0jrfmg8c0knrd6m090h', addressAdditionalData : '123456'}
    },
    coins : {
        'BTC' : {address : 'bc1qlah8pucrmw8l3evszn8a7ay62gpyg00rzl7p2m'},
        'DAI' : {address : '0xfF21f4F75ea2BbEf96bC999fEB5Efec98bB3f6F4'},
        'BNB' : {address : 'bnb1dv5ps9vpj6clar79gkd0jrfmg8c0knrd6m090h', addressAdditionalData : '123456'}
    }
};
let queryStrings = {};
queryStrings.userData = JSON.stringify(userData);
queryStrings.walletAddressesData = JSON.stringify(walletAddressesData);
console.log(queryStringLib.stringify(queryStrings))

If you're using our SDK then parameters need to be passed as variables.

let transak = new transakSDK({
    apiKey: '[YOUR_API_KEY]',  // Your API Key
    environment: '[ENVIRONMENT]', // STAGING/PRODUCTION
    widgetHeight: '625px',
    widgetWidth: '500px',
    // Examples of some of the customization parameters you can pass
    defaultCryptoCurrency: '[DEFAULT_CRYPTO]', // Example 'ETH'
    walletAddress: '', // Your customer's wallet address
    themeColor: '[COLOR_HEX]', // App theme color
    fiatCurrency: 'GBP', // If you want to limit fiat selection eg 'GBP'
    email: '[email protected]', // Your customer's email address
    redirectURL: '' // Redirect URL of your app    
});

Types of customization

We've broken down the different ways you can customize the Transak widget. These can all be combined to create the optimal UX for your app users.

📘
For a full list of all of the widget customization parameters, please refer our Query Parameters doc.