Changelog

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

ParameterTypeDescription
environmentStringDapi environment - .sandbox or .production
appKeyStringYour app key from the dashboard
countriesString[]You can pass array of countries with Alpha-2 country code eg AE, SA, US etc
bundleIDStringThe bundle id you injected on the Dapi Dashboard
clientUserIDStringA unique ID set by you.
isCachedEnabledBooleanSetting this to true makes the SDK inject the bank account object in browser cache.
isExperimentalBooleanShow experimental banks if necessary.
clientHeadersObjectIf you want to inject additional headers in the API calls
clientBodyObjectIf you want to inject additional body params in the API calls
onSuccessfulLoginFunctionCallback function that sends back a bankAccount object on successful login
onFailedLoginFunctionCallback function that sends back the error object if an error happened during user login process
onReadyFunctionCallback function called when the widget has successfully loaded
onExitFunctionCallback function called when the user closes the the SDK widget (exits the flow without completing it)
onAuthModalOpenFunctionCallback function called when the MFA authentication modal opens up
onAuthModalSubmitFunctionCallback function called when MFA authentication modal is closed by submitting an answer to the MFA prompt. Closing the modal without submitting the answer will not trigger this callback
interceptRequestFunctionCallback function called on every request (except authentication) to allow manipulation of the request for your SDK server. (Note: Make sure the SDK server handles any changes to the request before forwarding the request to Dapi's API)

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.