โโ๐คณ 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.
- User journey
- Control the fiat or crypto options for the user
- Pass information on behalf of the user and skip screens
- Visual customization and data display options
For a full list of all of the widget customization parameters, please refer our Query Parameters doc.
Updated over 1 year ago