UI configuration and API triggers for iBranch

UI Config

Side button settings

The Side Button is the default method by which the customer opens the iBranch.

To adjust the position of the Side Button, set the buttonPositionPercentage to your preferred relative window height. The default is 50 which is at the center.

In some cases, our partners opt to customize the Side Button by building their own component or even completely removing the side button and including a lending menu item or callout. Examples of these customizations can be found below.

To customize the Side Button, set the showSideButton to false. You can then build your own component or menu item and simple call lendica.ibranch.open() to launch the iBranch.

Example - Configure side button position

// Optional config
const config = { 
  buttonPositionPercentage: 30, // This will put the side button at the 30% of the window height, default is 50%
};

lendica.init(credentials, config).then(({ status, message }) => {
  if (status === "success") {
  	lendica.ibranch.render();
  }
});

Example - Hide side button and open iBranch programmatically

const config = { 
  showSideButton: false, // Option to hide the side button to open iBranch, default to true
};

lendica.init(credentials, config).then(({ status, message }) => {
  if (status === "success") {
  	lendica.ibranch.render();
  }
});

// ...on custom buttons or links, provide onClick function to open Lendica iBranch
lendica.ibranch.open(); // See below complete API for opening iBranch on specific page.

Example open trigger customization

Button or link example*Method**When to use


lendica.ibranch.open()Provide a link on your top level navigation or as a menu item to introduce the new lending feature. This will open Lendica's landing page on iBranch for general information.
lendica.apply()If you have a marketplace for integrated services, use this method to provide a way to let your customers apply directly.
lendica.ibranch.openpaylater(partner_bill_uuid, total, onSuccess, onExit)Place a PayLater button on each row of the bill table to allow customers to preview offer, apply and get funded.
lendica.ibranch.openfundnow(partner_invoice_uuid, total, onSuccess, onExit)Place a FundNow button on each row of the invoice table to allow customers to preview offer, apply and get funded.
lendica.ibranch.open('wallet')For approved customers with active lines of credit, you can build an account summary with our Backend API, and provide link to open wallet page for account balances and deals.

*The PayLater and FundNow buttons are available as NPM packages. The other UI components are for illustrative purpose only, you can build them using our Backend API. We may release more pre-built UI components in the future.

**See below Complete API for detailed information on the functions.


Initialization API

Following are the complete input and response schema for lendica.init(initCredentials, initConfig) function.

Init input schema

ParamKeyValue typeDefault valueRequiredExplanation
initCredentialscompany_nameStringn/atrueCompany account name of your client.
partner_company_uuidStringn/atrueCompany account id of your client.
partner_nameStringn/atrueYour organization's name defined on our backend.
initConfigshowSideButtonBooleantruefalseOption to hide the side button on the right edge of the screen.
buttonPositionPercentageNumber50falseSide button position percentage to the top, relative to the window height.

Init response schema

// These are available for all statuses including error.
{
  status: "string",
  message: "string"
}

Example:

// Check if Lendica auth is successful before proceeding with rendering UI
lendica.init(credentials, config).then(({ status, message }) => {
  if (status === "success") {
	  lendica.ibranch.render();
  }
}).catch(error => {
  console.log(error.status, error.message);
});

Init response statuses and messages

StatusMessageDetails
successSuccessfully initialized with credentials.Returned when authenticated successfully with given credentials
errorThis will be the error occurred during auth.Returned when error occurred during the authentication.
waitlistNo credentials providedReturned when no credentials were provided.

Complete iBranch API

If you wish to customize the usage of iBranch, you can build your own triggers to open iBranch programmatically with the following routes.

Open an invoice or bill in-app

Open an invoice in FundNow

// Make sure ibranch is already initialized and rendered
...
// Pass in partner_invoice_uuid and open invoice FundNow
// Pass in the optional invoice total to get marketing offer based on the total amount only
lendica.ibranch.openFundNow(partner_invoice_uuid, total, onSuccess, onExit);

Open a bill in PayLater

// Pass in partner_bill_uuid
// Pass in the optional bill total to get marketing offer based on the total amount only
lendica.ibranch.openPayLater(partner_bill_uuid, total, onSuccess, onExit);

onSuccess and onExit event handlers

onSuccess = (event) => {
  // handle deal activation success event
  // event.eventName: "DEAL_ACTIVATED"
  // event.displayMessage: "Deal activated successfully."
};

onExit = (event) => {
  // Handle exit events triggered when deal activation flow is ended by following events
  // See below for a list of exit events
};

See last section for list of exit events available.

Triggers to open iBranch

Neutral route to open iBranch programmatically.

// iBranch will display the last page that the user visited
lendica.ibranch.open();

You can also open ibranch on specific pages.

// Available routes

// Account summary with total credit available and deals table
lendica.ibranch.open('wallet');

// Product pages with credit available and invoice table
lendica.ibranch.open('paylater'); // if PayLater is available for the partner
lendica.ibranch.open('fundnow'); // if FundNow is available for the partner

// Upcoming payment schedules and transaction history
lendica.ibranch.open('activity-center');

// Download reports
lendica.ibranch.open('reports');

// Account settings page, with company contact info, and ability to add new bank accounts
lendica.ibranch.open('account');

// Learn more information page
lendica.ibranch.open('learn-more');

Open application

Neutral route to open ibranch on application page. If customer has already been approved, it will redirect to Wallet page.

lendica.apply();

Remove iBranch

Remove iBranch from DOM.

lendica.ibranch.destroy();

After removing, you can call render again to remount iBranch to DOM.

//...after ibranch removed
lendica.ibranch.render();

Subscribe to events

Subscribe to and handle all events. See last section for list of events available.

// Subscribe to specific event type, currently available event types are 'success' and 'exit'
lendica.subscribe("success", (event) => {});

// Subscribe to all events
lendica.subscribe("*", (type, event) => {});

// Unsubscribe
lendica.unsubscribe("success", (event) => {});

// Clear all event listeners
lendica.unsubscribeAll();

Event object schema

{
  "eventName": "EVENT_NAME",
  "displayMessage": "Detailed message about the event."
}

List of events available

typeeventNamedisplayMessageexplanation
successDEAL_ACTIVATEDDeal activated successfully.paylater or fundnow deal has activated successfully
exitAPPLICATION_PENDINGYour application is under review. Please check your email for further instructions.user submitted application and triggered manual review, waiting for approval
APPLICATION_REJECTEDSorry, your application was not approved at this time.application rejected
DEAL_EXCEEDS_LIMITDeal amount exceeds available credit.user approved but invoice amount exceeded the available credit limit
PRODUCT_PENDINGYour product activation request is under review. We will get back to you shortly.user submitted a product activation request, waiting for approval
INTERNAL_SERVER_ERRORSomething went wrong. Please try again later.any type of error on backend