@embedded-banking-fundr/pbl-playground v0.0.1

Rabobank Payment Based Lending Web Component

Install

To incorporate the Rabobank Payment Based Lending Web 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.

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('lending origination 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 lending process.