@embedded-banking-fundr/pbl-uat

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-pbl@stable

Attributes/Properties

Use these properties to configure the Rabo widget and pass them to the widget via the initRaboWidget function. The initRaboWidget returns a cleanup function that should be run everytime the widgets gets removed from the dom. This is to make sure all data in the store gets reset and nothing stays behind.

Property	Description	Type	Example	Required
apiKey	Identifier for the partner widget.	String	"DLS_Widget"	x
partnerId	Identifier for the partner widget.	String	"DLS_Widget"	x
mode	Mode of the widget.	String	"sandbox" / "production"
contactDetails	Contact person's details.	Object
contactDetails.name	Contact person's name.	String	"John"
contactDetails.phone	Contact person's phone number.	String	"123-456-7890"
contactDetails.email	Contact person's email address.	String	"[e-mail]"
contactDetails.surname	Contact person's surname.	String	"Doe"
kvkNumber	KVK number for the company.	String	"33236408"
campaignId	Campaign name.	String
loanAmount	Desired amount for the loan	String	"10.000"

Usage in Different Frameworks

REACT

import { initRaboWidget } from '@embedded-banking-fundr/rabobank-pbl';
const config = {
  apiKey: 'API_KEY',
  mode: 'sandbox' | 'production',
  partnerId: 'PARTNER_ID',
  //... other config props
}

const cleanupWidget = initRaboWidget(config);

const PblWrapper = () => {
  return (
    <rabobank-pbl></rabobank-pbl>
  );
};

export default PblWrapper;

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 { initRaboWidget } from '@embedded-banking-fundr/rabobank-pbl';

@Component({
  selector: 'app-rabobank-pbl-wrapper',
  template:
    '<rabobank-pbl></rabobank-pbl>',
})
export class PblWrapperComponent {
  @ViewChild('rabobank-pbl') pbl: ElementRef | undefined;
  config = {
    apiKey: 'API_KEY',
    mode: 'sandbox' | 'production',
    partnerId: 'PARTNER_ID',
    //... other config props
  }
  constructor() {
    cleanupWidget = initRaboWidget(config);
  }
}

VUE

<script setup>
import { initRaboWidget } from '@embedded-banking-fundr/rabobank-pbl';
const config = {
  apiKey: 'API_KEY',
  mode: 'sandbox' | 'production',
  partnerId: 'PARTNER_ID',
  //... other config props
};
const cleanupWidget = initRaboWidget(config);
</script>

<template>  
  <rabobank-pbl></rabobank-pbl>
</template>

Styling

Adjust the component's appearance through CSS variables:

<style>
  rabobank-pbl {
    --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-pbl';

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

Event Name	Description	Data
started	Emitted when user starts the journey.	{ partnerId, caseId }
abandon	Emitted when a user abandons the invoice process, or on time out	{ partnerId, caseId, invoiceId? }
concluded	Emitted when the invoice finance process is completed and the user closes the widget.	{ partnerId, caseId, invoiceId? }
exit	Emitted after both abandon and concluded.	{ partnerId, caseId, invoiceId? }

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