Using the iBranch

Open an Invoice or Bill In-App

Now that you have installed the iBranch, it’s time to include In-App triggers. The easiest way to do so is through PayLater and FundNow triggers.

By clicking on a PayLater button or FundNow button, the iBranch can open to an initial offer (for those yet to be approved) or directly to the bill or invoice the customer is seeking to finance.

Recommended Method

The preferred method is to use the Lendica iBranch invoice trigger library:

Installation

Option 1. Install from npm package

JavaScript

npm i @lendica/ibranchtrigger

Option 2. Install by including the CDN script

HTML

<script src="https://static.golendica.com/v2/ibranch-trigger.js" defer></script>

Usage

If you’re using the npm package, import the library first.

JavaScript

import '@lendica/ibranchtrigger';

Then use the component as native HTML tags. The bill or invoice uuid will the corresponding unique identifier of the product. If you choose to pass in the optional total amount, the preview sample offers returned will be based on this amount only, and the real invoice data will not be retrieved until user reviewed the sample offers and gives consent.

HTML

<!-- Pass bill id and invoice id as strings
Pass optional total for previewing offer based on total only  -->

<paylater-trigger bill-id="partner_bill_uuid" total="1234.50"></paylater-trigger>
<fundnow-trigger invoice-id="partner_invoice_uuid" total="1234.50"></fundnow-trigger>

Overriding texts

You may override the text in the button or the copy in the tooltip.

HTML

<paylater-trigger bill-id="partner_bill_uuid">
	<span slot="button-text">Override button text</span>
	<span slot="info">Override info tooltip content</span>
</paylater-trigger>

Overriding button onclick handler

If you wish to add additional logic prior to opening the ibranch, you can pass an onclick handler as follows:

HTML

<!-- Default onclick checks if lendica is ready, takes the bill or invoice id provided and opens 
	the offer terms in iBranch. Override to implement additional logic.
	Refer to iBranch API for all available methods. -->

<script>
	const handlePaylaterClick = () => {
		// ...apply additional logic
		console.log('override onclick!');
		lendica.ibranch.openPayLater(billId='partner_bill_uuid', total="1234.50");
	};
</script>
<paylater-trigger onclick="handlePaylaterClick"></paylater-trigger>

Overriding primary color

You may override the colors as follows:

HTML

<!-- Pass regular CSS color codes to override the primary color for the button and info icon fill
Currently supporting filled button style only -->

<paylater-trigger color="#58A10E"></paylater-trigger>
<fundnow-trigger color="green"></fundnow-trigger>

Advanced styling

Overriding individual button styles

HTML

<paylater-trigger data-style="border-radius: 0;"></paylater-trigger>

Alternate Method

Alternatively, you can also open the invoice or bill programmatically. Refer to the next section for customizing the iBranch.