Invoice Component

What is the Invoice component?

Overview

The Invoice component is an important addition to your customer's sales invoice journey. When implemented, it's embedded in your invoice page throughout its lifecycle, from being created to being sent. It will provide actionable insights which are highly valuable when addressing invoices.
This is where your customers will be able to see if their invoices have the option to be paid online, available payment methods, limitations (if they exist) and even select a specific payment method for specific invoice.

Why you should implement this component

  1. With a minimal implementation effort, the Invoice component provides your customers with a great deal of value. Customers will quickly understand if an online payment is available for every invoice, remove limitations (in case their onboarding is incomplete) and select specific payment methods for that invoice.
  2. Implementing this component saves your team a significant amount of integration time.
3508 940

What does the Invoice component include?

Invoice component enabled/disabled indication

This indication is important for your customers - it lets them know whether or not this invoice can be paid online using your embedded payment solution. If an action is required to enable the payment solution, this section will prompt your customers to take it.

Payment methods

The Payment methods section states which payment methods are available for this invoice. These include Instant bank transfers (via Open Banking), credit cards and APMs.

Onboarding status

A dynamic section that appears only if the vendor registration process has not been completed yet. It notifies your customers about any limitations that might apply to payment collection, and prompts customers to lift these limitations by completing the registration.

Component zero state

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

940

Where should I implement this component in my product?

The Invoice component should be implemented throughout the invoice journey, i.e. the component should appear on the invoice creation screen, on the invoice viewing screen (after saving), on the invoice editing screen, and on the invoice sending screen (if applicable).
The component will have slightly different functionalities, based on where it located throughout the invoice journey. UNIPaaS will handle these functionalities in the various states, based on parameters you provide us.

Before you begin implementation

  1. If you have not set up UNIPaaS components, please complete all the steps in the UNIPaaS Components guide before moving forward.

  2. Allocate the following space for this component:

  • Width - 470 pixels (minimum).
  • Height - 250 pixels.
    For mobile:
  • Width - min 300 px
  • Height - 250 px
  1. Required scopes:

How to implement this component?

To use the Invoice component, 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 Invoice 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="invoice"></div>

To use the Invoice component, 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 Invoice and mount it to the container DOM node, use the following code:

const config = {
  mode: 'create', //mandatory: create, edit and view
    paymentsEnabled: true, //mandatory: is UNIPaaS set as a default payment provider
  invoiceId: 'INV-3673', //conditional - provide if invoice created (edit/view)
  customerId: '5367458', //conditional - provide once customer is selected
  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 Invoice config type
const invoice = components.create("invoice", config);
invoice.mount("#invoice");

The Invoice component will dynamically render itself into the empty DOM element that you have provided. As the customer goes through the onboarding process, the Invoice component will retrieve the necessary data.

Important - in order to ensure the proper functionality of the component, the following parameters must be provided:

  • Invoice mode (create / edit / view):
    • Create mode - all modes before a sales invoice is saved (once it is saved, it will be reported to UNIPaaS via the Invoice Endpoint). This mode can apply when a user creates an invoice, views it as a draft, or edits a draft.
    • Edit mode - after the user saves the sales invoice and opens it again to edit details.
    • View mode - after the user saves the sales invoice and opens it again for viewing.
  • Is the UNIPaaS payment solution set as the default payment solution (True / False).
  • Invoice ID (once available - for Edit and View modes only).
  • Customer ID:
    • For Edit and View modes - as a client parameter.
    • For Create mode - once a customer is selected / changed on the invoice.

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

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

  • startOnboarding - mandatory
  • completeOnboarding - mandatory
  • enablePayments - mandatory
  • sessionExpired - optional
  • generalError - optional

Go Next

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