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
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">×</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 APIinstitution-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);