@embedded-banking-fundr/rabobank-invoice-finance-uat v0.0.23

Rabobank Invoice Finance Component

Install

To incorporate the Rabobank Invoice Finance component into your project, install it using npm or yarn:

NPM

npm i @embedded-banking-fundr/rabobank-invoice-finance@stable

Attributes/Properties

Use these attributes and properties to identify the partner and pre-fill information into the widget:

Usage in Different Frameworks

REACT

import React from 'react';
import { authenticateRaboWidget } from '@embedded-banking-fundr/rabobank-invoice-finance/lib';

authenticateRaboWidget('API_KEY');

const InvoiceFinanceWrapper = ({ kvkNumber, contactDetails, invoices, invoiceDocuments }) => {
  const partnerId = 'partnerId';
  return (
    <div>
      <invoice-finance
        partner-id={partnerId}
        kvk-number={kvkNumber}
        contact-details={contactDetails}
        invoices={invoices}
        invoice-documents={invoiceDocuments}
      ></invoice-finance>
    </div>
  );
};

export default InvoiceFinanceWrapper;

ANGULAR

Update your app.module.ts to include "CUSTOM_ELEMENTS_SCHEMA":

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
...

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent],
    schemas:[CUSTOM_ELEMENTS_SCHEMA]
})

Then, define your component:

import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { authenticateRaboWidget } from '@embedded-banking-fundr/rabobank-invoice-finance/lib';

@Component({
  selector: 'app-invoice-finance-wrapper',
  template:
    '<invoice-finance #invoiceFinance partner-id="{{partnerId}}" kvk-number="{{kvkNumber}}" campaign="{{campaign}}" contact-details="{{contactDetails}}" invoices="{{invoices}}" invoice-documents="{{invoiceDocuments}}"></invoice-finance>',
})
export class InvoiceFinanceWrapperComponent {
  @ViewChild('invoice-finance') invoiceFinance: ElementRef | undefined;
  constructor() {
    authenticateRaboWidget('apiKey');
  }
  partnerId: string = 'partnerId';
  @Input() kvkNumber: string | undefined;
  @Input() campaign: string | undefined;
  @Input() contactDetails: string | undefined;
  @Input() invoices: string | undefined;
  @Input() invoiceDocuments: string | undefined;
}

VUE

Coming soon.

Styling

Adjust the component's appearance through CSS variables:

<style>
  invoice-finance {
    --rabobank-color-primary: #123456;
    --rabobank-color-secondary: #abcdef;
    --rabobank-svg-primary: #123456;
    --rabobank-svg-primary-light: rgba(18, 52, 86, 0.69);
    --rabobank-svg-secondary: #abcdef;
  }
</style>

Event Handling

The component emits several events that you can subscribe to for notifications about various interactions and states. Below is a list of events with their descriptions:

Subscribing to Events

To react to these events, you can subscribe to them anywhere in your application using the subscribeToEvent function. Here's how you can subscribe and handle an event:

import { subscribeToEvent } from '@embedded-banking-fundr/rabobank-invoice-finance/lib';

// Example: Subscribing to the 'started' event
const subscription = subscribeToEvent('started', (data) => {
  console.log('Invoice finance process started', data);
});

// Remember to unsubscribe when you're done listening to the event
subscription.unsubscribe();

Available Events and Data

This event handling system allows you to monitor and react to various states and interactions within the invoice finance process.