Initialization Flows

Flow Diagrams


 sequenceDiagram
 autonumber
     actor a as Shopper
     participant b as Browser
     participant cs as Customer Server
     participant dt1 as DT One
     a->>b: Open customer's webpage
     note over a, dt1: Simple integration flow without sensitive information.
     b->>+b: Init SDK with Client UID
     b->>+dt1: Create Session <br> (Client UID)
     dt1->>-b: Session Data
     deactivate b
     note over a, dt1: SDK initialized and the shopper continues with product selection and checkout.
   %%{init: {
      'theme': 'neutral',
      'themeVariables': {
        'fontSize': '16px',
        'fontFamily': 'Arial',
        'noteBkgColor': '#ffffcc',
        'noteTextColor': '#333333',
        'noteBorderColor': '#aaaa33',
        'actorBkg': '#f8f8ff',
        'actorBorder': '#ccccff',
        'actorTextColor': '#000000',
        'actorLineColor': '#999999',
        'messageFontSize': '14px',
        'messageTextColor': '#333333'
      },
      'sequence': {
        'boxTextMargin': 5,
        'boxMargin': 10,
        'mirrorActors': false,
        'width': 200
        'height': 800

      }
    }}%%


sequenceDiagram
autonumber
    actor a as Shopper
    participant b as Browser
    participant cs as Customer Server
    participant dt1 as DT One
    a->>b: Open customer's webpage
    note over a, dt1: Advance integration flow required if the customer would like \n to set sensitive information like custom exchange rates.
    b->>+cs: Get Session \n (Pre SDK Init)
    activate b
    cs->>+dt1: Create Session \n (Auth)
    dt1->>-cs: Session Data
    cs->>-b: Session Data
    b->>b: Init SDK with Session Data
    deactivate b
    note over a, dt1: SDK initialized and the shopper continues with product selection\n and checkout.
   %%{init: {
      'theme': 'neutral',
      'themeVariables': {
        'fontSize': '16px',
        'fontFamily': 'Arial',
        'noteBkgColor': '#ffffcc',
        'noteTextColor': '#333333',
        'noteBorderColor': '#aaaa33',
        'actorBkg': '#f8f8ff',
        'actorBorder': '#ccccff',
        'actorTextColor': '#000000',
        'actorLineColor': '#999999',
        'messageFontSize': '14px',
        'messageTextColor': '#333333'
      },
      'sequence': {
        'boxTextMargin': 5,
        'boxMargin': 10,
        'mirrorActors': false,
        'width': 200
        'height': 800
      }
    }}%%

Code Samples

Example - Minimum Required Parameters

const sdkConfiguration = {
  clientUid: '0191db27-...', // Replace with your actual client UID
  template: 'DVS',
  containerId: 'sdk-container', // Make sure this <div> exists in your HTML
  userCountry: 'FRA',
};

Example - Additional Parameters

const sdkConfiguration = {
  clientUid: '0191db27-...',
  template: 'DVS',
  containerId: 'sdk-container',
  termsAndConditionsUrl: '[https://yoursite.com/tc](https://yoursite.com/tc)',
  callbackUrl: '[https://yoursite.com/callbackUrl](https://yoursite.com/callbackUrl)',
  userId: 'customer-be-user-id',
  userCountry: 'FRA',
  language: 'en',
  callbacks: {
    onInit: () => { console.log('SDK was initialized'); },
    onSubmit: (transaction, sessionId) => {
      console.log('Transaction was created', transaction, sessionId);
      console.log('Redirect to payment ...');
    },
    onError: (error) => { console.log('An error occurred while creating the transaction:', error); },
  },
  currencies: {
    baseCurrency: 'SGD',
    defaultCurrency: 'EUR',
    quoteCurrencies: ['USD', 'EUR', 'PLN'],
  },
  whitelabel: {
    colors: {
      // ... color customizations
    },
  },
};