SDK Configuration

Full SDK Configuration

This guide explains the configuration methods for Dapi Web SDK and how to set the environment, send data to your backend server and customize Dapi UI.

var ba = null;

var handler = Dapi.create({
  environment: Dapi.environments.sandbox, //or .production
  appKey: "YOUR_APP_KEY",
  countries: ["AE"],
  bundleID: "YOUR_BUNDLE_ID", // bundleID you set on Dashboard
  clientUserID: "CLIENT_USER_ID",
  isCachedEnabled: true,
  isExperimental: false,
  clientHeaders: {},
  clientBody: {},
  onSuccessfulLogin: function (bankAccount) {
    ba = bankAccount; //explained in the next step
  },
  onFailedLogin: function (err) {
    if (err != null) {
      console.log("Error");
      console.log(err);
    } else {
      console.log("No error");
    }
  },
  onReady: function () {
    handler.open(); // opens the Connect widget
  },
  onExit: function () {
    console.log("User exited the flow");
  },
  onAuthModalOpen: function () {
    console.log("MFA modal opened");
  },
  onAuthModalSubmit: function () {
    console.log("MFA answer submitted");
  },
  interceptRequest: function ({ body, headers }) {
    // You can modify the request body and headers here
    return { body, headers };
  },
});

Configuration Parameters

ClientUserID explained

ClientUserID is used to distinguish between different end-users. The value for clientUserID needs to be set by you. We recommend setting clientUserID to your actual internal user ID that you use to distinguish between users.

Why is it relevant? The ClientUserIDs are mainly used to enable the caching feature and connect different bank connections to the same end-user.

Sending Custom Headers and Body Params

The Web SDK supports sending custom headers or body parameters. This feature will be useful if you want to send any information from the frontend to your backend.

You can send the headers and body parameters in 2 different ways

Setting global parameters and headers

var handler = Dapi.create({
  environment: Dapi.environments.sandbox, //or .production
  //... other configuration params
  clientHeaders: {"MY_CUSTOM_HEADER":"1234"},
  clientBody: {"MY_CUSTOM_BODY_PARAM":"xyz"},
  //... other configuration params
)}

You can retrieve the values on the backend side.

• The header will show up as MY_CUSTOM_HEADER: "1234" in all request headers.
• The body parameter will show up as UserExtraBody:{MY_CUSTOM_BODY_PARAM:"xyz"} in all request bodies.

Note! The body parameters are wrapped in an UserExtraBody object

Setting endpoint level parameters and headers

onSuccessfulLogin: function(bankAccount) {
    ba = bankAccount; 
    ba.data.getIdentity({"MY_CUSTOM_HEADER":"1234"},{"MY_CUSTOM_BODY_PARAM":"xyz"})
      .then((identityResponse)=>{
      	// response handling 
        }
    })
  },

You can retrieve the values on the backend side only for this specific endpoint.

• The header will show up as MY_CUSTOM_HEADER:"1234" in the request headers.
• The body parameter will show up as MY_CUSTOM_BODY_PARAM:"xyz" in the request body.

🚧

Using both methods at the same time?

Can both the global parameter and the endpoint level parameter have the same key value? In these cases, the specified endpoint level value takes precedence over the global value.