🤳 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 and Widget URL. 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 while generating Widget URL using Create Widget URL https://global-stg.transak.com/?apiKey=71d9cc91-826d-41b6-b6ba-7d8962a9c3e0&sessionId=<YOUR_SESSION_ID>

curl --request POST \
  --url https://api-gateway-stg.transak.com/api/v2/auth/session \
  --header 'accept: application/json' \
  --header 'access-token: YOUR_ACCESS_TOKEN' \
  --header 'authorization: YOUR_USER_AUTH_TOKEN' \
  --header 'content-type: application/json' \
  --data '
{
  "widgetParams": {
    "apiKey": "YOUR_API_KEY",
    "referrerDomain": "yourdomain.com",
    "cryptoCurrencyCode": "DAI"
  },
  "landingPage": "HomePage"
}
'

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 under Widget URL query parameter:

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


curl --request POST \
  --url https://api-gateway-stg.transak.com/api/v2/auth/session \
  --header 'accept: application/json' \
  --header 'access-token: YOUR_ACCESS_TOKEN' \
  --header 'authorization: YOUR_USER_AUTH_TOKEN' \
  --header 'content-type: application/json' \
  --data '
{
  "widgetParams": {
    "apiKey": "YOUR_API_KEY",
    "referrerDomain": "yourdomain.com",
    "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"
      }
    },
    "walletAddressesData": {
      "networks": {
        "erc20": {
          "address": "0xfF21f4F75ea2BbEf96bC999fEB5Efec98bB3f6F4"
        },
        "bep2": {
          "address": "bnb1dv5ps9vpj6clar79gkd0jrfmg8c0knrd6m090h",
          "addressAdditionalData": "123456"
        }
      },
      "coins": {
        "BTC": {
          "address": "bc1qlah8pucrmw8l3evszn8a7ay62gpyg00rzl7p2m"
        },
        "DAI": {
          "address": "0xfF21f4F75ea2BbEf96bC999fEB5Efec98bB3f6F4"
        },
        "BNB": {
          "address": "bnb1dv5ps9vpj6clar79gkd0jrfmg8c0knrd6m090h",
          "addressAdditionalData": "123456"
        }
      }
    }
  },
  "landingPage": "Homepage"
}
'

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



curl --request POST \
     --url https://api-gateway-stg.transak.com/api/v2/auth/session \
     --header 'accept: application/json' \
     --header 'access-token: YOUR_ACCESS_TOKEN' \
     --header 'authorization: YOUR_USER_AUTH_TOKEN' \
     --header 'content-type: application/json' \
     --data '
{
  "widgetParams": {
    "apiKey": "YOUR_API_KEY",
    "referrerDomain": "yourdomain.com",
    "fiatAmount": "300",
    "fiatCurrency": "EUR",
    "cryptoCurrencyCode": "ETH"
  },
  "landingPage": "HomePage"
}
'

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.