Web SDK

Web SDK implements the dapi api that can be integrated on the frontend web. It automatically handles user inputs, so clients don't have to handle it themselves.

Pre Conditions - Please setup backend server first 👍🏼

• Please create an app on dashboard.dapi.com
• To use the sdk you need to setup a server on your end. A setup example with NodeJS on Express is https://dapi-api.readme.io/docs/quickstart-nodejs
• After its been setup, go to dashboard.dapi.com and input the server url in the app, in the above NodeJS example its http://localhost:8060/dapi
• Input a bundle id on the dashboard

Base URL Override

You can override the default API endpoints when initializing the SDK via the Dapi.create() method:

var handler = Dapi.create({
  environment: Dapi.environments.sandbox,
  appKey: "YOUR_APP_KEY",
  countries: ["AE"],
  bundleID: "YOUR_BUNDLE_ID",
  clientUserID: "CLIENT_USER_ID",
  // Optional: Override API endpoints
  apiBaseURL: "https://api-staging.dapi.com",      // Override Dapi API base URL (default: https://api.dapi.com)
  connectURL: "https://connect-staging.dapi.com", // Override Connect widget URL (default: https://connect.dapi.com)
  onSuccessfulLogin: function(bankAccount) {
    // ...
  },
  onFailedLogin: function(err) {
    // ...
  },
  onReady: function() {
    handler.open();
  },
});

Quickstart

Install the SDK

Install the sdk script. Please inject this file in your root HTML file.

<script src="https://cdn.dapi.com/dapi/v2/sdk.js"></script>

Get access to bank account object

In order to get access to api functions you would have to first initialize the Connect widget to get access to the bank account object after a successful user login

You need to call the create method on the Dapi instance to popup the widget.

| Parameter | Type | Description | | ----------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | environment | String | Dapi environment - Sandbox or Production | | appKey | String | Your app key from the dashboard | | countries | String[] | You can pass string of countries with country code eg AE, SA, US etc | | bundleID | String | The bundle id you injected on the dashboard | | clientUserID | String | This user's unique id on your app | | isCachedEnabled | Boolean | Setting this to true makes the sdk inject the bank account object in browser cache. Note: Set it to true only on trusted browsers | | isExperimental | Boolean | Show experimental banks if necessary | | clientHeaders | Object | If you want to inject additional headers in the calls | | clientBody | Object | If you want to inject additional body params in the calls | | apiBaseURL | String | Optional: Override Dapi API base URL (default: https://api.dapi.com) | | connectURL | String | Optional: Override Connect widget URL (default: https://connect.dapi.com). Accounts modal will use {connectURL}/accounts | | onSuccessfulLogin | Function | Callback function that sends back a bankAccount object on successful login | | onFailedLogin | Function | Callback function that sends back the error object if an error happened during user login process | | onReady | Function | Callback function called when the widget has successfully loaded |

var ba = null;

var handler = Dapi.create({
  environment: Dapi.environments.sandbox,
  appKey: "YOUR_APP_KEY",
  countries: ["AE"],
  bundleID: "YOUR_BUNDLE_ID",
  clientUserID: "CLIENT_USER_ID",
  isCachedEnabled: true,
  isExperimental: false,
  clientHeaders: {},
  clientBody: {},
  onSuccessfulLogin: function(bankAccount) {
    ba = bankAccount;
  },
  onFailedLogin: function(err) {
    if (err != null) {
      console.log("Error");
      console.log(err);
    } else {
      console.log("No error");
    }
  },
  onReady: function() {
    handler.open();
  },
});

Now you have access to a bankAccount object. You can use this object to call data and payment endpoints.

Data Endpoints

Get Identity - Access the user's identity on this bank account. More info on this endpoint can be found here https://dapi-api.readme.io/docs/get-identity

| Parameter | Type | Description | | ------------- | ------------------- | --------------------------------------------------------- | | clientHeaders | Object | Optional | If you want to inject additional headers in the calls | | clientBody | Object | Optional | If you want to inject additional body params in the calls |

  ba.data.getIdentity()
       .then(identityResponse => {
          if(identityResponse.status === "done") {
            console.dir(identityResponse)
          } else {
            console.error("API Responded with an error")
            console.dir(identityResponse)
          }
        })
        .catch(error => {
            console.dir(error)
        })

Get Accounts - Access the sub accounts of a bank account with balance

| Parameter | Type | Description | | ------------- | ------------------- | --------------------------------------------------------- | | clientHeaders | Object | Optional | If you want to inject additional headers in the calls | | clientBody | Object | Optional | If you want to inject additional body params in the calls |

  ba.data.getAccounts()
    .then(accountsResponse => {
          if(accountsResponse.status === "done") {
            console.dir(accountsResponse)
          } else {
            console.error("API Responded with an error")
            console.dir(accountsResponse)
          }
        })
        .catch(error => {
            console.dir(error)
        })

Get Cards - Access the credit cards of a bank account with balance

| Parameter | Type | Description | | ------------- | ------------------- | --------------------------------------------------------- | | clientHeaders | Object | Optional | If you want to inject additional headers in the calls | | clientBody | Object | Optional | If you want to inject additional body params in the calls |

  ba.data.getCards()
    .then(cardsResponse => {
          if(cardsResponse.status === "done") {
            console.dir(cardsResponse)
          } else {
            console.error("API Responded with an error")
            console.dir(cardsResponse)
          }
        })
        .catch(error => {
            console.dir(error)
        })

Get Account Transactions - Access the account transactions of a given sub account. More info on this endpoint can be found here https://dapi-api.readme.io/docs/get-transactions

| Parameter | Type | Description | | ------------- | ------------------- | ----------------------------------------------------------------------------------------------------- | | accountID | String | The id of a particular sub account. Note: You can get this from calling getAccounts function | | startDate | String | The start date of the transaction you want to get. It needs to be in the YYYY-MM_DD format | | endDate | String | The end date of the transaction you want to get. It needs to be in the YYYY-MM_DD format | | clientHeaders | Object | Optional | If you want to inject additional headers in the calls | | clientBody | Object | Optional | If you want to inject additional body params in the calls |

  ba.data.getTransactions(accountID, "2020-01-01", "2020-02-01")
    .then(transactionsResponse => {
          if(transactionsResponse.status === "done") {
            console.dir(transactionsResponse)
          } else {
            console.error("API Responded with an error")
            console.dir(transactionsResponse)
          }
        })
        .catch(error => {
            console.dir(error)
        })

Get Card Transactions - Access the card transactions of a given card. More info on this endpoint can be found here https://dapi-api.readme.io/docs/get-transactions

| Parameter | Type | Description | | ------------- | ------------------- | -------------------------------------------------------------------------------------------- | | cardID | String | The id of a particular card. Note: You can get this from calling getCards function | | startDate | String | The start date of the transaction you want to get. It needs to be in the YYYY-MM_DD format | | endDate | String | The end date of the transaction you want to get. It needs to be in the YYYY-MM_DD format | | clientHeaders | Object | Optional | If you want to inject additional headers in the calls | | clientBody | Object | Optional | If you want to inject additional body params in the calls |

  ba.data.getCardTransactions(cardID, "2020-01-01", "2020-02-01")
    .then(transactionsResponse => {
          if(transactionsResponse.status === "done") {
            console.dir(transactionsResponse)
          } else {
            console.error("API Responded with an error")
            console.dir(transactionsResponse)
          }
        })
        .catch(error => {
            console.dir(error)
        })

Metadata Endpoints

Get Accounts - Access the bank's metadata object. More info on this endpoint can be found here https://dapi-api.readme.io/docs/get-account-metadata

| Parameter | Type | Description | | ------------- | ------------------- | --------------------------------------------------------- | | clientHeaders | Object | Optional | If you want to inject additional headers in the calls | | clientBody | Object | Optional | If you want to inject additional body params in the calls |

  ba.metadata.getAccounts()
     .then(metadataAccountsResponse => {
          if(metadataAccountsResponse.status === "done") {
            console.dir(metadataAccountsResponse)
          } else {
            console.error("API Responded with an error")
            console.dir(metadataAccountsResponse)
          }
        })
        .catch(error => {
            console.dir(error)
        })

Payment Endpoints

Transfer Autoflow - Send money to a particular beneficiary https://dapi-api.readme.io/docs/transfer-auto-flow

| Parameter | Type | Description | | ------------- | ------------------- | --------------------------------------------------------- | | transfer | Object | Transfer Object | | clientHeaders | Object | Optional | If you want to inject additional headers in the calls | | clientBody | Object | Optional | If you want to inject additional body params in the calls |

Transfer Object Param

| Parameter | Type | Description | | ----------- | -------- | ------------------------------------------------------------------------------------------------ | | senderID | String | This is the id of a particular sub account. You can get this from calling getAccounts funtion | | beneficiary | Object | Its params can be found here https://dapi-api.readme.io/docs/transfer-auto-flow | | amount | Number | This is the amount you want to send | | remarks | String | This is the id you can use to track |

  var transfer = {
    senderID: "",
    amount: 0,
    remarks: "",
    beneficiary: {
      name: "4 Mohammad Omar Amr",
      iban: "DAPIBANKAELIV1619116273261987517393",
      accountNumber: "1619116273261987517393",
      swiftCode: "DAPIBANK_AE_LIV",
      address: {
          line1: "Maryam Street",
          line2: "Abu Dhabi",
          line3: "United Arab Emirates"
      },
      country: "AE",
      branchAddress: "Dubai Mall",
      branchName: "Main Branch"  
    }
  }
  ba.payment.transferAutoflow(transfer)
    .then(createBenefResponse => {
          if(createBenefResponse.status === "done") {
            console.dir(createBenefResponse)
          } else {
            console.error("API Responded with an error")
            console.dir(createBenefResponse)
          }
        })
        .catch(error => {
            console.dir(error)
        })

Note: If you are not going to use the transfer autoflow endpoint, then you would have to handle the bank exceptions yourself. Dapi recommends to use transfer autoflow endpoint instead

Get Beneficiaries - Access the bank account's beneficiaries array. More info on this endpoint can be found here https://dapi-api.readme.io/docs/get-beneficiaries

| Parameter | Type | Description | | ------------- | ------------------- | --------------------------------------------------------- | | clientHeaders | Object | Optional | If you want to inject additional headers in the calls | | clientBody | Object | Optional | If you want to inject additional body params in the calls |

  ba.payment.getBeneficiaries()
    .then(benefResponse => {
          if(benefResponse.status === "done") {
            console.dir(benefResponse)
          } else {
            console.error("API Responded with an error")
            console.dir(benefResponse)
          }
        })
        .catch(error => {
            console.dir(error)
        })

Create Beneficiary - Create a beneficiary on this endpoint. More info on this endpoint can be found here https://dapi-api.readme.io/docs/create-beneficiary

| Parameter | Type | Description | | ------------- | ------------------- | ----------------------------------------------------------------------------------------------------- | | beneficiary | Object | Beneficiary Object. Its params can be found here https://dapi-api.readme.io/docs/create-beneficiary | | clientHeaders | Object | Optional | If you want to inject additional headers in the calls | | clientBody | Object | Optional | If you want to inject additional body params in the calls |

  var beneficiary = {
      name: "4 Mohammad Omar Amr",
      iban: "DAPIBANKAELIV1619116273261987517393",
      accountNumber: "1619116273261987517393",
      type: "local",
      swiftCode: "DAPIBANK_AE_LIV",
      address: {
          line1: "Maryam Street",
          line2: "Abu Dhabi",
          line3: "United Arab Emirates"
      },
      country: "United Arab Emirates",
      branchAddress: "Dubai Mall",
      branchName: "Main Branch"  
  }
  ba.payment.createBeneficiary(beneficiary)
    .then(benefResponse => {
          if(benefResponse.status === "done") {
            console.dir(benefResponse)
          } else {
            console.error("API Responded with an error")
            console.dir(benefResponse)
          }
        })
        .catch(error => {
            console.dir(error)
        })

Create Transfer - Send money to a particular beneficiary. More info on this endpoint can be found here https://dapi-api.readme.io/docs/create-transfer

| Parameter | Type | Description | | ------------- | ------------------- | ----------------------------------------------------------------------------------------------- | | transfer | Object | Transfer Object. Its params can be found here https://dapi-api.readme.io/docs/create-transfer | | clientHeaders | Object | Optional | If you want to inject additional headers in the calls | | clientBody | Object | Optional | If you want to inject additional body params in the calls |

Transfer Object Param

| Parameter | Type | Description | | ------------- | -------- | ----------------------------------------------------------------------------------------------------- | | senderID | String | This is the id of a particular sub account. You can get this from calling getAccounts funtion | | receiverID | String | This is the id of a particular sub account. You can get this from calling getBeneficiaries funtion | | accountNumber | String | This is the accountNumber of a new beneficiary you want to send money to. Some banks require it | | iban | String | This is the iban of a new beneficiary you want to send money to. Some banks require it | | amount | Number | This is the amount you want to send | | remarks | String | This is the id you can use to track |

  var transfer = {
    senderID: "",
    receiverID: "",
    accountNumber: "",
    name: "",
    iban: "",
    amount: 0,
    remarks: "",
  }
  
  ba.payment.createTransfer(transfer)
    .subscribe({
      next(transferResponse) { 
        if(transferResponse.status === "done") {
          console.dir(transferResponse)
        } else {
          console.error("API Responded with an error")
          console.dir(transferResponse)
        }
      },
      error(err) {},
    })

Caching

Since the web sdk does support local caching, you can get access to all the connected accounts on a particular clientUserID. Note: The clientUserID needs to be unique per user on your app. Otherwise you will get access to all the bank accounts connected on that browser.

const bankAccounts = Dapi.getCachedBankAccounts("CLIENT_USER_ID")
const bankAccountParams = bankAccounts.map(bankAccount => bankAccount.flush())
// You can save this bankAccountParams on your server side

After you got access to these bankAccounts, you can optionally save them on your server for later use. For future initialization you can get these from your server and initialize them one by one again.

//get bankAccountParams from your server
//initialize DapiBankAccount based on a bankAccountParam
var dapiBA = DapiBankAccount(bankAccountParams[0])

You can then call the data and payment endpoints on dapiBA variable