Invoice status button web component and example integration in javascript Frameworks

Lendica Invoice Button API

Invoice status button web component and example integration in javascript Frameworks

❗ Lendica invoice button is only intended to be used alongside Lendica iTab

Installation

1. Include the iTab CDN script

Before you can use the button component, you need to install the itab script. To begin, include the IIFE bundle directly into the html page(s) you’d like to install the iTab.

<script src="https://static.golendica.com/itab.js"></script>

Or programmatically include the script in your application.

let lendicaScript = document.createElement('script');
lendicaScript.setAttribute('src', 'https://static-idev.golendica.com/itab.js');
document.head.appendChild(lendicaScript);

2. Install the invoice button component

npm i @lendica/invoicebutton

Usage

Once you have set up a module bundler to resolve ECMAScript import, you can start by importing the component in javascript.

import '@lendica/invoicebutton';

Then you can use the component as native HTML tags:

<!-- Pass your platform's invoice identifier to the button component -->
<invoice-button invoiceId="123456"></invoice-button>

Full Integration Examples in Frameworks

Vue.js (Vue 3)

Code in App.vue:

/* App.vue */
<template>
  <div>
    <p>Example loading invoice buttons in a table in Vue</p>
    <table id="invoiceTable">
      <thead>
        <tr>
          <th>Invoice ID</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.invoiceId" :ref="setInvoiceButtonRef">
          <td>{{row.invoiceId}}</td>
          <td><invoice-button v-bind:invoiceid="row.invoiceId"></invoice-button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import '@lendica/invoicebutton';

export default {
    data(){
        return{
            // Pass the invoice identifiers
            rows: [
                {
                    invoiceId: 10001,
                },
                {
                    invoiceId: 10002,
                },
                {
                    invoiceId: 10003,
                },
            ],
            invoiceButtonRefs: []
        }
    },
    methods:{
        setInvoiceButtonRef(el) {
            if (el) {
                this.invoiceButtonRefs.push(el);
            }
        }
    },
    beforeUpdate() {
        this.invoiceButtonRefs = []
    },
    updated() {
        // do something with this.invoiceButtonRefs
    },
    async created(){
        // Programmatically add the iTab script
        let lendicaScript = document.createElement('script');
        lendicaScript.setAttribute('src', 'https://static-idev.golendica.com/itab.js');
        document.head.appendChild(lendicaScript);

        // Using iTab and invoice button
        // Required partner and user credentials, replace with your own
        const lendicaCredentials = {
            partner_name: 'partner', // Technology vendor name
            company_id: '123456', // Unique client id in technology vendor's system
            company_name: 'Test Corp.', // Client's business name
            company_access_token: '**********' // Token/key to retrieve client data from vendor's API
        };
        // Optional configuration
        const lendicaConfig = {
            access_type: 'ADMIN', // User access type, default is 'ADMIN' if not specified, currently supporting 'VIEW_ONLY' or 'ADMIN'
            environment: 'SANDBOX' // Default environment is 'SANDBOX' if not specified, currently supporting 'SANDBOX' or 'PRODUCTION'
        };
        // Initialize iTab and invoice button
        lendicaScript.onload = async ()  => {
            await window.lendica.init(lendicaCredentials, lendicaConfig);
            for (let i = 0; i < this.invoiceButtonRefs.length; i++) {
                this.invoiceButtonRefs[i].querySelector("invoice-button").lendicaready = true;
            }
        };
    },
}
</script>

Run example: Change the credentials in App.vue and

cd Vue
npm install
npm run serve

Refer to Vue and Web Components for more information on using custom elements in Vue.js.

React

Coming soon

More APIs

Please refer to the API documentation for more information.

License

LGPL-3.0-or-later

GitHub

View Github