iBranch Invoice Trigger Library

💡

Invoice triggers are intended to work with the iBranch. Make sure you have iBranch integrated first.

PayLater Button.mov

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.

HTML

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

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 onlick 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('partner_bill_uuid');
	};
</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>

Related Recipes

🦉

iBranch Invoice Trigger

Open Recipe