Customizing the 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.

📘
If you need help with this document, or need access to the UI elements, please submit the request form here.

Initialization API

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

Init input schema

Param	Key	Value type	Default value	Required	Explanation
initCredentials	company_name	String	n/a	true	Company account name of your client.
	partner_company_uuid	String	n/a	true	Company account id of your client.
	partner_name	String	n/a	true	Your organization's name defined on our backend.
initConfig	showSideButton	Boolean	true	false	Option to hide the side button on the right edge of the screen.
	buttonPositionPercentage	Number	50	false	Side 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

Status	Message	Details
`success`	`Successfully initialized with credentials.`	Returned when authenticated successfully with given credentials
`error`	This will be the error occurred during auth.	Returned when error occurred during the authentication.
`waitlist`	`No credentials provided`	Returned 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 exit event and handle specific event name
lendica.subscribe('exit', (event)=> {
  if (event.eventName === "IBRANCH_CLOSED") {
    console.log(e.displayMessage)
    // handle iBranch close 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

type	eventName	displayMessage	explanation
success	`DEAL_ACTIVATED`	`Deal activated successfully.`	PayLater or FundNow deal was activated successfully.
exit	`IBRANCH_CLOSED`	`iBranch has been closed.`	User closed iBranch. Triggered whenever iBranch open state has changed from true to false.
	`APPLICATION_PENDING`	`Your application is under review. Please check your email for further instructions.`	User submitted application and triggered manual review, waiting for approval
	`APPLICATION_REJECTED`	`Sorry, your application was not approved at this time.`	Application was rejected.
	`DEAL_EXCEEDS_LIMIT`	`Deal amount exceeds available credit.`	User application was approved but invoice amount exceeded the available credit limit.
	`PRODUCT_PENDING`	`Your product activation request is under review. We will get back to you shortly.`	User submitted a product activation request, waiting for approval.
	`INTERNAL_SERVER_ERROR`	`Something went wrong. Please try again later.`	Any type of error on backend.