πŸ–₯ Web SDK integration

Select your platform or language that powers your application.

Angular, React or Vue

Installation

To use the Transak widget with your Angular, React or Vue application, you will need to use @transak/transak-sdk (Transak’s JavaScript SDK).

Add the Transak SDK as a dependency using yarn or npm:

# Using yarn
$ yarn add @transak/transak-sdk

# Using npm
$ npm install @transak/transak-sdk

Connecting the SDK to Transak

You can find more information on customization parameters here

import transakSDK from '@transak/transak-sdk'

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    
});

transak.init();

// To get all the events
transak.on(transak.ALL_EVENTS, (data) => {
        console.log(data)
});

// This will trigger when the user marks payment is made.
transak.on(transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
    console.log(orderData);
    transak.close();
});

Javascript SDK

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script async src="https://cdn.transak.com/js/sdk/transak-v1.js"></script>
</head>

<body>
  <script>
    function launchTransak() {
      let transak = new TransakSDK.default({
        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 
      });
      transak.init();
      // To get all the events
      transak
        .on(transak.ALL_EVENTS, (data) => {
          console.log(data)
        });
      // 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>