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