Dashboard Component

What is the Dashboard component?

Overview

The Dashboard component provides your users with a high-level, intuitive overview of their payment-related status within your platform.
This is where your customers will get visibility into their balance, payable funds, and pending funds, as well as be able to view and adjust their payout settings.

Why you should implement this component

  1. With a minimal implementation effort, the Dashboard component provides your customers with a great deal of value. It provides them with a high-level overview of their finances within your platform.
  2. Implementing this component saves your team a significant amount of integration time.
3508 862

What does the Dashboard component include?

Balance

The Balance shows your customer what funds they have in their account, as well as the status of these funds (payable/pending).

Onboarding status

This section shows your users what their onboarding status is. When relevant, it can redirect to the onboarding flow in order to complete it and add required documents, if these are necessary.

Payout

The Payout section shows your customer when their next payout is scheduled, as well as lets them configure payout scheduling.

Component zero state

For platform users who have yet to sign up to your payments solution, the Dashboard embedded component will show in a "zero state" view. This view's goal is to emphasize your payment solution's value and showcase its core features to potential users.

The "zero state" includes a prominent CTA and messages, incentivising your users to sign up to your payments solution. Additionally, it allows users learn more about it.

Triggering the "zero state" view
The "zero state" will automatically trigger once an access token is created without a vendor ID, meaning the user is not registered with UNIPaaS.

Where should I implement this component in my product?

The Dashboard component should be implemented as part of your platform's dashboard/overview (if one exists). This is normally the high-level page where the user sees a preview of their status within your platform, and through which they can decide to dive into further details.

Before you begin implementation

  1. If you have not set up UNIPaaS Components, please go to the UNIPaaS Components page before moving forward.

  2. Required scopes for the access token:

  • ewallet_read
  • payout_write
  1. Allocate the following minimal space for this component:
  • Width - 350 pixels (minimum).
  • Height - 350 pixels (minimum).

How to implement this component?

To use the Dashboard component, you will need to create an empty DOM node (also known as a container) in your page and give it a unique ID. This will be the place where the Dashboard component will be mounted. Make sure to assign a unique ID to the container so that it can be easily identified and accessed.

<div id="account"></div>

To use the Dashboard component, you will need to create an instance of it and mount it to the container DOM node in your page. This should be done after the previous div has finished loading. To create an instance of the Dashboard and mount it to the container DOM node, you can use the following code:

const config = {
  theme: {
    colors: { //optional
      primaryColor: "#2F80ED", //optional
      secondaryColor: "#687B97", //optional
      accentTextColor: "#2F80ED", //optional
      primaryButtonColor: "#2F80ED" //optional
    },
    fontFamily: "roboto", //optional
    boxShadow: "0px 3px 15px rgba(27, 79, 162, 0.11)" //optional
  }
}; // UNIPaaS Components Dashboard config type
const dashboard = components.create("account", config);
dashboard.mount("#account");

The Dashboard component will dynamically render itself into the empty DOM element that you have provided. As the customer goes through the onboarding process, the Dashboard will retrieve the necessary data and update the relevant child components accordingly.

You can customize the appearance of the Dashboard component to match the design of your platform by passing a theme object into the options when using the create method.

This will allow you to specify custom styles for the Dashboard component, such as colors and fonts, so that it fits seamlessly into your platform's design.

Dashboard events:
The Dashboard should interact with events that are on the platform side. In order to make the Dashboard fully functional, please implement the following component events (see further event details on the UNIPaaS Components page.

  • onboardingStart - mandatory
  • sessionExpired - optional
  • generalError - optional

Go Next

Make sure your platform is ready to begin the UNIPaaS Components integration