Pay Portal Component

What is the Pay Portal component?

Overview

The Pay Portal component is the main user view for all payment-related topics within your platform.
This is where your customers will get full visibility into their payment options, statuses and admin settings.

Why you should implement this component

  1. With a minimal implementation effort, the Pay Portal provides your customers with a great deal of value in a single view. This saves your customers time in being redirected between various areas in the platform and lets them get a single source of truth for all payment-related options and settings.
  2. Implementing this component saves your team a significant amount of integration time.
3508 2660

What does the Pay Portal component include?

Account Balance

The Account Balance is the fastest and easiest way to show your customer's account within your UI.

Show the customer's account embedded within your platform, while UNIPaaS handles all of the account's financial states with respect to the customer's balance and registration status.

The Account Balance will:

  • Show the customer's balances
  • Ask for verification documents and information when needed
  • Handle payouts to the customer's bank account.

Payment Reports

The Payment Reports are the source of truth for all successful transaction made from your customer's account via UNIPaaS.

In this view, your customer will:

  • See all transactions and related relevant information.
  • Be able to go to all relevant invoices within your platform.
  • Get complete transparency into the fees they pay.
  • Be able to apply smart filtering on transactions.

Component zero state

For platform users who have yet to sign up to your payments solution, the Pay Portal 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.

1958

Where should I implement this component in my product?

The Pay Portal component should be implemented as a top-level menu item in your platform, with a dedicated full page that opens when the menu item is selected. This means that the Pay Portal should be accessible from a main navigation menu. When the Pay Portal menu item is selected by the user, the Pay Portal component should be displayed in a full page view, taking up the entire screen or browser window.

Before you begin implementation

  1. Prior to starting your Pay portal component integration, please make sure you have completed all the steps required to prepare your platform for UNIPaaS Components before moving forward.

  2. Allocate the following minimal space for this component:

  • Width - 970 pixels (minimum).
  • Height - 900 pixels (minimum).
  1. Required scopes for Access token:
  • portal_read
  • portal_write

How to implement this component?

To use the Pay Portal 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 Pay Portal 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="pay_portal"></div>

To use the Pay Portal component, you will 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 Pay Portal and mount it to the container DOM node please use the following code below UNIPaaS Components script:

<script type="text/javascript">
const config = {
    theme: {
        colors: { //optional
            primaryColor: "#2F80ED", //optional
            secondaryColor: "#687B97", //optional
            accentTextColor: "#2F80ED", //optional
            primaryButtonColor: "#2F80ED" //optional
        },
        fontFamily: "inherit", //optional
        boxShadow: "0px 3px 15px rgba(27, 79, 162, 0.11)" //optional
    }
}; // UNIPaaS Components Pay Portal config type
const payPortal = components.create("payPortal", config);
payPortal.mount("#pay_portal");
</script>

A full code sample is available on UNIPaaS Github

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

You can customize the appearance of the Pay Portal 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 Pay Portal component, such as colors and fonts, so that it fits seamlessly into your platform's design.

Pay Portal events:
The Pay Portal will interact by firing events on your platform. In order to make the Pay Portal fully functional, please make sure to listen to the the following component events. This step should be completed when preparing your platform form the UNIPaaS Components integration.

  • invoicePage - mandatory
  • startOnboarding - mandatory
  • sessionExpired - optional
  • generalError - optional

Go Next

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