Invoice triggers are intended to work with the iBranch. Make sure you have iBranch integrated first.
Installation
Option 1. Install from npm package
npm i @lendica/ibranchtrigger
Option 2. Install by including 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';
Then use the component as native HTML tags. The bill or invoice uuid will the corresponding unique identifier of the product.
<!-- 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>
![PayLater trigger for iBranch](https://files.readme.io/77a049a-paylater-trigger.png)
![FundNow trigger for iBranch](https://files.readme.io/379a648-fundnow-trigger.png)
Overriding texts
You may override the text in the button or the copy in the tooltip.
<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
You may override the colors as follows:
<!-- 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
<paylater-trigger data-style="border-radius: 0;"></paylater-trigger>
![](https://files.readme.io/1d4d1e4-custom-button-style.png)
Related Recipes
🦉
iBranch Invoice Trigger
Open Recipe