Configure Solution Behavior (sdkConfiguration File)

Examples

const sdkConfiguration = {
  clientUid: '0191db27-...', // Replace with your actual Client UID
  template: 'DVS', // Choose the appropriate template
  containerId: 'sdk-container', // Match the ID of your container element
  userCountry: 'FRA', // Replace with the user's country code
};

const sdkConfiguration = {
  clientUid: 'your-client-id',  
  // Your unique Client ID provided by DT One.
  // This is required only if you are not using
  // the `token` parameter for authentication.
  sessionId: 'session-id',      
  // A unique identifier for the current user session.
  // This is required only when you are using
  // the 'TransactionConfirmation' template.
  token: 'xxxxx',                
  // A secure token used for authentication
  // in Advanced Initialization.
  // This is required only if you are using
  // Advanced Initialization.
  template: 'DVS',              
  // Specifies the UI flow template to be used.
  // Options include: 'DVS', 'TransactionConfirmation',
  // 'GiftCards', 'MobileTopUp'.
  containerId: 'sdk-container', 
  // The ID of the HTML element where the SDK UI
  // will be injected. This element should exist
  // in your webpage's DOM.
  userCountry: 'FRA',           
  // The user's country code in ISO 3166 format
  // (e.g., 'FRA' for France, 'USA' for United States).
  language: 'en',               
  // Sets the default language for the UI.
  // Options include: 'en', 'fr', 'de', 'es', 'pt', 'ru', 'zh'.
  // If not provided, the SDK will attempt to
  // auto-detect the user's language.
  currencies: {                 
  // Allows you to define custom currency settings.
  // If not provided, your Account's base currency will be used.
    baseCurrency: 'USD',       
    // The base currency of your account in
    // ISO 4217 format.
    defaultCurrency: 'EUR',    
    // The default currency to be displayed in
    // the SDK, which must be one of the `quoteCurrencies`.
    quoteCurrencies: ['USD', 'EUR', 'PLN']
    // A list of currencies that users can choose
    // from in the SDK.
  },
  whitelabel: {                 
  // Enables you to customize the visual appearance
  // of the SDK to match your brand.
    colors: {
      pageBackgroundColor: '#f3f3f3',
      // Custom background color for the SDK page.
      primaryButtonBackgroundColor: '#021914',
      // Custom background color for primary buttons.
      // ... other color customization options
    }
  },
  termsAndConditionsUrl: '[https://your-terms-and-conditions-url.com](https://your-terms-and-conditions-url.com)',
  // URL to your website's terms and conditions page.
  callbackUrl: '[https://your-callback-url.com](https://your-callback-url.com)',                      
  // URL to your server that will receive
  // transaction status updates.
  callbacks: {
    onInit: () => { console.log('SDK initialized'); },             
    // A function that will be executed after
    // the SDK is successfully initialized.
    onSubmit: (transaction, sessionId) => {
    console.log('Transaction created', transaction, sessionId); },
    // A function that will be executed after a
    // transaction is successfully created.
    onError: (error) => { console.log('Error during transaction', error); }
    // A function that will be executed if an error
    // occurs during the transaction process.
  }
};

Field Descriptions

clientUid

Your unique Client ID provided by DT One.

• Example Value: your-client-id
• Required When: Required unless token is used for authentication.

sessionId

A unique identifier for the current user session.

• Example Value: session-id
• Required When: Required when using the TransactionConfirmation template.

token

A secure token used for authentication in Advanced Initialization.

• Example Value: xxxxx
• Required When: Required only if you are using Advanced Initialization.

template

Specifies the UI flow template to be used (DVS, TransactionConfirmation, GiftCards, MobileTopUp).

• Example Value: DVS
• Required When: Always required.

The SDK provides the following pre-built user experience flows to streamline the integration process:

• MobileTopUp: For mobile service transactions.
• GiftCards: For handling gift card purchases.
• DVS: Consolidates all available services on one page.
• TransactionConfirmation: Displays a confirmation page after a transaction.

Set the desired template during initialization:

  const sdkConfiguration = {
      template: 'MobileTopUp', // Available templates:
                               // 'DVS',
                               // 'TransactionConfirmation',
                               // 'GiftCards',
                               // 'MobileTopUp',
                               // 'ESIM'
};

To display the transaction status page, initialize the SDK by setting the TransactionConfirmation template in the sdkConfiguration file and include the sessionId.

The sessionId, which enables the SDK to retrieve the specific transaction details, is obtained in one of the following ways:

• From the callbacks.onSubmit function for a Simple initialization (see Initialize).
• During session creation for an Advanced initialization (see Initialize).

const sdkConfiguration = {
...
clientId: 'xxx-xxx-xxx-xxx'
template: 'TransactionConfirmation',
sessionId: '5f702ac5-8fa7-...'
...
}

Example

const sdkConfiguration = {
clientUid: '0191db27-...',
sessionId: 'xxxx'
template: 'TransactionConfirmation',
containerId: 'sdk-container',
userCountry: 'FRA',
};

containerId

The ID of the HTML element where the SDK UI will be injected.

• Example Value: sdk-container
• Required When: Always required.

userCountry

The user's country code in ISO 3166 format.

• Example Value: FRA
• Required When: Always required.

language

Sets the default language for the UI (en, fr, de, es, pt, ru, zh).

• Example Value: en

• Required When: Optional, auto-detected if not provided.

  The SDK supports the following languages: English, Spanish, French, Portuguese, Russian, Simplified Chinese, and German. The default language is English. Once a language is set, all static text in the UI is automatically translated.

  JavaScript

  const sdkConfiguration = {
      language: 'es', // Available options: 'en', 'fr', 'de', 'es', 'pt', 'ru', 'zh', 'ar'
  };

currencies.baseCurrency

The base currency of your account in ISO 4217 format.

• Example Value: USD
• Required When: Optional, defaults to account base currency.

currencies.defaultCurrency

The default currency to be displayed in the SDK.

• Example Value: EUR
• Required When: Required when currencies.baseCurrency is set.

currencies.quoteCurrencies

A list of currencies that users can choose from.

• Example Value: ['USD', 'EUR', 'PLN']
• Required When: Required when currencies.baseCurrency is set.

whitelabel.colors

whitelabel.colors.pageBackgroundColor

Custom background color for the SDK page.

• Example Value: #f3f3f3
• Required When: Optional.

whitelabel.colors.primaryButtonBackgroundColor

Custom background color for primary buttons.

• Example Value: #021914
• Required When: Optional.

termsAndConditionsUrl

URL to your website's terms and conditions page.

• Example Value: https://your-terms-and-conditions-url.com
• Required When: Optional.

callbackUrl

URL to your server that will receive transaction status updates.

• Example Value: https://your-callback-url.com
• Required When: Optional.

callbacks

Callbacks are alerts with pre-arranged responses to key events.

const sdkConfiguration = {
    callbacks: {
        onInit: () => {
            console.log('SDK initialized successfully');
        },
        onSubmit: (transaction, sessionId) => {
            console.log('Transaction created', transaction, sessionId);
        },
        onError: (errors) => {
            console.log('Error creating transaction', errors);
        }
    }
};

callbacks.onInit

A function that will be executed after the SDK is successfully initialized.

• Example Value: () => { console.log('SDK initialized'); }
• Required When: Optional.

callbacks.onSubmit

A function that will be executed after a transaction is successfully created. Triggered when a transaction is created after the user completes payment.

Note

sessionId is not returned in the case of Advanced Initialization (see Initialize).

• Example Value: (transaction, sessionId) => { console.log('Transaction created', transaction, sessionId); }
• Required When: Optional.

callbacks.onError

A function that will be executed if an error occurs during the transaction process.

• Example Value: (error) => { console.log('Error during transaction', error); }
• Required When: Optional.