This page contains instructions on how to use WebComponent, a javascript library that builds open banking connectivity within your website. To implement the WebComponent, follow four simple steps:

1. Set Allowed Origins in Developer panel
2. Retrieve access token
3. Retrieve javascript url
4. Embed WebComponent to your website

Once the steps are completed the customer journey will look as follows:

Below you can find code that integrates Planky's Web Component on your website. Both front and back end code is provided. To begin, simply select the language you wish to work in (on the left) then hit "Edit". This will open a new window in codesandbox.io where you can live test the code and view its output.

Back-end

Node

Edit

Front-end

Vanilla JSReactVueAngular

Edit

In the following, we provide a detailed step-by-step guide to integrating the WebComponent software into your website

By default, WebComponent origin is set to localhost on port 3000. If you want to run WebComponent on a different host and port you must set a new origin in the Developer Console.

To use the Planky API you need to authorise yourself. You can do that by retrieving access token by using your client_id and client_secret. The example below shows you how to make a request to obtain an access token. The token is needed to make authorised requests to the server. The API requests example will be perform using cURL.

Obtain your client_id and client_secret from Planky API keys.

Invalid client_id or client_secret

Invalid client_credentials

A one-time url is used to render the Planky WebComponent inside HTML.

Follow the two simple steps to embed WebComponent:

1. Create an HTML element with id fs-component to control the location where the component will be displayed
2. Create a script tag with src pointing to the one time javascript url

You can copy the template below and paste into your html page.

Events are triggered in the following situations: