Financial Widget

The Dojah platform has a smooth widget that enables your users to authorize access to their accounts. This widget works effortlessly across various browsers and devices of all sizes.

How to Generate Widget

Using the Dojah CDN-hosted Javascript client library, you can install the Dojah widget into your application by simply adding a script tag to your HTML document and insert basic configuration parameters.

Step 1: Add the Client Javascript Library

Add the script tag before the end of the closing body tag of your desired HTML page where you desire to give users the ability to authorize access to a financial institution.

<script src="https://widget.dojah.io/widget.js"></script>

πŸ“˜

Adding the async attribute can cause the inline code to return undefined because the library may not be available at that moment. So avoid the use of async and defer for now.

Step 2: Configure the Javascript Client Library

At this stage, you can now create a Dojah widget object by passing in your public key one javascript object representing your preferred configuration options.

const options = {
  app_id: "xxxxxxxxxxxxxxx",
  p_key: "prod_pk_xxxxxxxxxxxxxx",
  type: 'link', // 'payment', 'identification', 'verification', 'liveness'
  // Ensure to verify the amount paid using the reference (response.data.reference)
  onSuccess: function (response) {},
  onError: function (err) {},
  onClose: function () {}
}

new Connect(options);

Public key (string, required)

This is Dojah public key, you can find this on the App page

Options

This is an optional no-arguments callback function. As soon as the client library is done initializing, the function is called. The callback contains codes you wish to run as soon as the library is executed.

  • OnSuccess (function, required)*

This is called when your user has successfully completed enrollment with their preferred institution.

OnClose (function, required)

This is called when your user leaves the Dojah widget.

Step 3: Handle a Successful Enrollment

On successful enrollment, the onSuccess callback function that you supplied is called by the client library. We then return the connected account code to your server.

{
  // A unique code for the enrolled account.
  'code': '[email protected]#[email protected]$%Sda2452SDf',
}

Dojah Widget Example Script:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dojah Widget Sample Script</title>
</head>

<body>
    <button id="btn-connect">Connect</button>

    <script src="https://widget.dojah.io/widget.js"></script>
    <script>
        var options = {
            app_id: "xxxxxxxxxx",
            p_key: "test_pk_xxxxxxxxxxxx",
            type: 'link', // 'payment', 'identification', 'verification', 'liveness'
            onSuccess: function (response) {
               // Ensure to verify the amount paid using the reference (response.data.reference) 
                console.log(response)
            },
            onError: function (err) {
                console.log(err)
            },
            onClose: function () {
                console.log("Widget closed")
            }
        }

        const connect = new Connect(options);

        const connectBtn = document.querySelector('#btn-connect');
        connectBtn.addEventListener('click', function() {
            connect.setup();
            connect.open();
        });
    </script>
</body>

</html>

WIDGET TEST CREDENTIALS

When testing the widget, you can use the following keys to successfully login to the test bank (GTBank)

  1. Username: [email protected]
  2. Password: password

Did this page help you?