Clofe / nordigen-bank-ui

Nordigen Bank UI library

Nordigen Bank UI

Installation

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

• CSS: https://unpkg.com/nordigen-bank-ui@1.0.1/package/src/selector.min.css

• JS: https://unpkg.com/nordigen-bank-ui@1.0.1/package/src/selector.js

Examples

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 class="institution-content-wrapper">
        <div id="institution-modal-content">
            <header class="institution-modal-header ">
                <span class="institution-modal-close">&times;</span>
                <h2>Select your bank:</h2>
            </header>
        </div>
    </div>

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

Next step is to fetch aspsp 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": [
            "GB"
        ],
        "logo": "https://cdn.nordigen.com/ais/ABNAMRO_FTSBDEFAXXX.png"
    },
    {
        "id": "BBVAUK_BBVAGB2L",
        "name": "BBVA",
        "bic": "BBVAGB2L",
        "transaction_total_days": "730",
        "countries": [
            "GB"
        ],
        "logo": "https://cdn.nordigen.com/ais/BBVABE_BBVABEBB.png"
    },
];

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 aspsp
const config = {
    redirectUrl: 'https://www.example.com',
	logoUrl: 'https://cdn.nordigen.com/ais/Nordigen_Logo_Black.svg'
};


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