Getting Started Sample Application

We have provided a sample application - Angular or Vue 3- which shows how you can use our web components to view and link bank accounts well as viewing transactions for the linked accounts. The sample application uses the bootstrap css framework but this is not a requirement of the components. All of the components can be styled so that they match your pages/branding.

The easiest way to understand how everything works is to play with the application as we make use of events to allow components to communicate which each other.

This guide assumes that you have pulled one of the sample applications and installed dependencies using yarn or npm.

We provide versions of the web components for each environment e.g.

https://cdn.certua.io/ux-elements/daas-elements/{Environment}/{Version}/certua-daas.es6.js

Start

This is the starting point of the application and it is here that you will get the necessary tokens and configuration in order to use the web components. Depending on what Certua Environments you have access to you may have to change the 2 api endpoint urls that are used on the start component/view, please speak to your Certua contact to confirm.

First you will need to use your username and password to get an Access token which provides you access to the Certua Open Banking API.
Next using this Access Token you will need to get a Context Token, this allows you to provide a user reference which is how you identify a user in your system. So this will then allow you to do everything in the context of this user reference.
Once you have a context token you have everything you need to provide the apiConfig which is needed by the web components. The apiConfig is a simple JSON object that contains the URL and the Context Token.

{ "url": "https://iqdevdaas.certua.io/api", "token": "50ABC27D6C9400A40834F3BCDCE1381C" }
Now you have the config you are able to add/link a bank account. Clicking the Accounts button will take you view the linked accounts. (accounts.component or accounts.vue)

View Accounts

To view the connected accounts we use the <certua-ob-institution-management> web component

<certua-ob-institution-management 
  :apiConfig="apiConfig"
  successUrl="http://c51d-54-76-172-136.eu.ngrok.io/refresh/success"
  failureUrl="http://c51d-54-76-172-136.eu.ngrok.io/refresh/failure"
  >
</certua-ob-institution-management>

^{This is showing the Vue implementation.}

The apiConfig is a string version of the apiConfig JSON object mentioned above containing the url and context token. All of the web components take the apiConfig in the same format.
The success and failure urls are where Certua will redirect the user back to if they choose refresh their connection. We recommend using ngrok when developing locally as this will mean that you do not need to create public urls.
When you have everything in place you will be presented with a view of the accounts that you have linked (which initially will be none) but this does confirm that the component is working.
From the accounts screen you can then add more accounts, revoke access to a bank or renew a connection to a bank. (links to descriptions of this functionality to be added)
Clicking Add Account will take you through the process of linking a new account (connect.component or connect.vue)

Add Bank Account

We first have to link one or more accounts in order to have access to the transactions. Linking bank accounts is done by selecting the Banking Institution that you have an account with where you will then be redirected to their site to authenticate and choose which account(s) you want to provide access to.

For this we use the <certua-ob-institution-selection> web component, this will present the banking institutions that we can provide access to - please note that depending on the environment that you are using you will see different institutions.

  <certua-ob-institution-selection
        :apiConfig="apiConfig"
        successUrl=" http://8261-54-76-172-136.eu.ngrok.io/success"
        failureUrl=" http://8261-54-76-172-136.eu.ngrok.io/failure"
      ></certua-ob-institution-selection>

The success and failure urls are where Certua will redirect the user back to once the attempt to link a bank account is complete. We recommend using ngrok when developing locally as this will mean that you do not need to create public urls.
On selecting a bank the user will be shown a consent screen where they have to confirm that they are happy to proceed. This will then redirect them to the banking providers login screen where they can login and select which accounts they want to link.

^{The consent screen can be customised}
For development we recommend using Allied Irish as there is no authentication needed to connect an account which will allow you to quickly validate that everything is working. Royal Bank of Scotland can be used and Certua can provide you connection details.
Once you have gone through the security process you will be taken to the success or failure url. If you then go back to the accounts screen (then as long as everything was successful) you will see you linked bank

Transactions

Once you have linked accounts you can then use the <certua-ob-transaction-list> component which will show a list of the transactions for the linked accounts and provides options to filter these.

What next

The sample application shows how we use events to prompt the host to show/close dialogs etc. More information about this can be found here. To help you with the implementation of the linking of bank accounts we also provide a <certua-ob-utility-shell> component which helps with the display and selection of bank accounts where a banking provider provides more than 1 bank account type where they might provide different ways for you to authenticate (web or mobile app)