UI Widgets

This widget provides the possibility to display to an end user terms of the service and acquire their consent before redirecting them to tilisy.enablebanking.com for authorization of the requested access in an ASPSP.

In order to use the widget, the following is needed.

  1. Load the widgets library https://tilisy.enablebanking.com/lib/widgets.umd.min.js on the page where it is going to be used.
<script src="https://tilisy.enablebanking.com/lib/widgets.umd.min.js"></script>
  1. Put the custom element enablebanking-consent registered by the widgets library into the place on the page where the widget needs to be shown.
<enablebanking-consent
  id="enablebanking-consent"
  authorization="a8bfe9f4-dfdf-4c86-9a94-9db7660bd4bd"
  locale="SV"
  can-cancel
  sandbox></enablebanking-consent>

The element enablebanking-consent has the following attributes:

  • authorization (required), should contain authorization ID received from POST /auth API call;
  • locale (optional), language in which the widget content should be presented. Supported languages: DA, EN, ET, FI, FR, LT, LV, NL, NO, PL, RU, SV;
  • can-cancel (optional), when present the “Cancel” button will be displayed, which will emit cancel event when pressed;
  • sandbox (optional), to be used when authorization was initiated with an application registered to sandbox environment;
  • origin (optional), to be provided in case a custom/dedicated environment is used, the default value is https://tilisy.enablebanking.com;
  • no-redirect (optional), to be used if the end user should not be automatically redirected to tilisy.enablebanking.com for authorization of the access in an ASPSP; in this case redirect is to be performed when confirmed event is triggered.

Using event listener function

<script>
  document.getElementById("enablebanking-consent").addEventListener("confirmed", function(e) {
    console.log(e)
  });
</script>

The element produces the following events:

  • error, if an error occurs,
  • ready, when the widget is fully loaded,
  • confirmed, after a user has confirmed the consent,
  • cancelled, if the “Cancel” button was pressed.

The events can be listened similarly to standard Javascript events using addEventListener method called for the enablebanking-consent element.

The widget does not include any CSS, it will use the styles present on the page where included.

The widget can be used only on the websites with origins whitelisted for the application used to initiate end user authorization.

# ASPSP selection

This widget provides a method to present on a web page the list of available ASPSPs (i.e. banks and similar financial institutions) and let an end-user to select the one, which they want to proceed with.

The following code is needed in the html file.

  1. Load the widgets library https://tilisy.enablebanking.com/lib/widgets.umd.min.js and the default CSS https://tilisy.enablebanking.com/lib/widgets.css on the page where it is going to be used.
<script src="https://tilisy.enablebanking.com/lib/widgets.umd.min.js"></script>
<link href="https://tilisy.enablebanking.com/lib/widgets.css" rel="stylesheet">
  1. Put the custom element enablebanking-aspsp-list registered by the widgets library into the place on the page where the widget needs to be shown.
<enablebanking-aspsp-list
	country="FI"
	psu-type="personal"
	service="AIS"
>
</enablebanking-aspsp-list>
  1. Add an event listener, which would trigger authorisation of access to account information or payment initiation.
<script>
  document.getElementById("enablebanking-aspsp-list").addEventListener("selected", function(e) {
    console.log(e.detail)
  });
</script>

When an end-user clicks one of the ASPSP cards, the event selected will be triggered and the detail field value is like this:

{
    "beta": false,
    "country": "SE",
    "name": "Ekeby Sparbank",
    "psuType": "personal",
    "sandbox": true,
    "service": "AIS"
}

The element enablebanking-aspsp-list has the following attributes:

  • country (required), two-letter country code determining which ASPSPs will be displayed;
  • psu-type (required), either personal or business determining the type of user, which will grant authorisation;
  • service (required), either AIS or PIS determining whether account information or payment initiation service will be used;
  • sandbox (optional), to be provided in case sandbox authorisation will take place in the sandbox environment;
  • origin (optional), to be provided in case a custom/dedicated environment is used, the default value is https://tilisy.enablebanking.com;
  • search-term (optional), can be used to filter ASPSPs by name;
  • logo-transform (optional), can be used change dimentions of the logo image (for example, -/resize/320x/-/crop/440x340/center/, for full list of possible transformations, please refer to https://uploadcare.com/docs/transformations/image/resize-crop/).

The element produces the following events:

  • error, if an error occurs;
  • ready, when the widget is fully loaded or them the list of ASPSP is updated;
  • selected, after a user has selected an ASPSP.