1.5.3 • Public • Published

Nordigen Bank UI

Nordigen Bank UI


To install library, you can use npm or yarn

$ npm install --save nordigen-bank-ui
$ yarn add nordigen-bank-ui

Or add package via script tag using CDN


Full example can be found in a demo folder.

Create index.html

<link href="./node_modules/nordigen-bank-ui/package/src/selector.min.css" rel="stylesheet" />

    <div id="institution-content-wrapper"></div>

<script src="./node_modules/nordigen-bank-ui/package/src/selector.min.js"></script>

Next step is to fetch institutions list from Nordigen API

// Assume this is response from the API
const exampleList = [
        "id": "ABNAMRO_ABNAGB2LXXX",
        "name": "ABN AMRO Bank Commercial",
        "bic": "ABNAGB2LXXX",
        "transaction_total_days": "540",
        "countries": [
        "logo": ""
        "id": "BBVAUK_BBVAGB2L",
        "name": "BBVA",
        "bic": "BBVAGB2L",
        "transaction_total_days": "730",
        "countries": [
        "logo": ""

Create institutionSelector instance and pass following parameters:

  • exampleList - list of aspsp fetched from Nordigen API
  • institution-modal-content - div where all banks will be appended
  • configs object
// Pass your redirect link after user has been authorized in institution
const config = {
    // Redirect URL that is being used when modal is being closed.
    redirectUrl: '',
    // Text that will be displayed on the left side under the logo. Text is limited to 100 characters, and rest will be truncated.
    text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean mavdvd",
    // Logo URL that will be shown below the modal form.
    logoUrl: '',
    // Will display country list with corresponding institutions. When `countryFilter` is set to `false`, only list of institutions will be shown.
    countryFilter: false,
    // style configs
    styles: {
        // Primary
        // Link to google font
        fontFamily: '',
        fontSize: '15',
        backgroundColor: '#F2F2F2',
        textColor: '#222',
        headingColor: '#222',
        linkColor: '#8d9090',
        // Modal
        modalTextColor: '#1B2021',
        modalBackgroundColor: '#fff',
        // Button
        buttonColor: '#3A53EE',
        buttonTextColor: '#fff'

new institutionSelector(exampleList, 'institution-modal-content', config);

To use internalization pass query parameter lang with appropriate language in ISO 639-1 format lang=de

If custom redirect flow is required with institution_id in URL

const institutionList = Array.from(document.querySelectorAll('.ob-list-institution > a'));

institutionList.forEach((institution) => {
    institution.addEventListener('click', (e) => {
        const institutionId = institution.getAttribute('data-institution');
        window.location.href = `${institutionId}`


Minify and add vendor prefixes before pushing CSS and JS changes

npm run build

To test fully working example application, consider checking the following repositories and their corresponding examples:

Package Sidebar


npm i nordigen-bank-ui

Weekly Downloads






Unpacked Size

257 kB

Total Files


Last publish


  • nordigen-lv