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
      }
    }}%%

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

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
      }
    }}%%

Example

const sdkConfiguration = {
  token: 'eyJhbGciOiJIUzUxMiIsI...',
  template: 'DVS', // 'DVS' | 'GiftCards' | 'MobileTopUp'
  containerId: 'sdk-container',
  userCountry: 'FRA'
};

Create Sessions with Custom Exchange Rates (/v1/sessions)

You can use the /v1/sessions endpoint to create sessions with custom exchange rates. This is applicable to the Advanced Initialization (see Initialize) use case.

URL: /v1/sessions

Method: POST

Request Body

{
  "exchange_rates": [
    {
      "base_currency": "USD",
      "quote_currency": "SGD",
      "rate": 1.3
    },
    {
      "base_currency": "USD",
      "quote_currency": "AED",
      "rate": 3.6
    }
  ]
}

Response (200 OK)

{
  "expires_at": "2023-10-23T10:00:00Z",
  "id": "uuid-session-id",
  "token": "session-token"
}

Errors

400: Bad Request
401: Unauthorized
403: Forbidden
404: Not Found
500: Server Error

Schema - SessionCreateRequest

{
  "exchange_rates": [
    {
      "base_currency": "USD",
      "quote_currency": "SGD",
      "rate": 1.3
    }
  ]
}

Schema - SessionCreateResponse

{
  "expires_at": "string",
  "id": "uuid",
  "token": "string"
}

Example

The callbacks.onsubmit function passes a Transaction object (described here: DT One - Digital Value Services API) and a sessionId in the function parameters. Extract the transaction.id from the transaction object.

Request

curl --location --request POST '<domain>/v1/sessions/{sessionID}/finalise' \
--header 'Content-Type: application/json' \
--user <APIKey:APISecret> \
--data '[
  {
    "transaction_id": 125757,
    "price": {
      "currency": "SGD",
      "amount": 21.613
    }
  }
]'

Response

[
  {
    "transaction_id": 125758,
    "is_confirmed": true
  }
]