Lendica iBranch Triggers

FundNow and PayLater button web component to open invoice payment term offers in iBranch.

Installation

Option 1. Install from npm package

npm i @lendica/ibranchtrigger

Option 2. Include the CDN script

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

Usage

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

import '@lendica/ibranchtrigger';

Use the component as native HTML tags:

<!-- Pass bill id and invoice id as strings -->

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

Overriding texts

<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 onlick handler as follows:

<!-- 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('partner_bill_uuid');
	};
</script>
<paylater-trigger onclick="handlePaylaterClick"></paylater-trigger>

Overriding primary color

<!-- 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

<!-- Pass the regular css styles to data-style attribute. Styles applied to the button only -->

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