@embedded-banking-fundr/rabobank-invoice-finance v0.0.36

Rabobank Invoice Finance Component

Install

To install the Rabobank Invoice Finance component, you can use either npm or yarn. Run the following command depending on your package manager:

NPM

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

Attribute/Property

Here are the attributes and properties used to identify the partner and pre-fill information into the widget:

REACT

import React from 'react';
import '@embedded-banking-fundr/rabobank-invoice-finance-uat/invoice-finance';

// define available props
const InvoiceFinanceWrapper = ({ kvkNumber }) => {
  const partnerId = 'partnerId';

  return (
    <div>
      <invoice-finance partnerId={partnerId} kvkNumber={kvkNumber}></invoice-finance>
    </div>
  );
};

export default InvoiceFinanceWrapper;

ANGULAR

Add "CUSTOM_ELEMENTS_SCHEMA" to the schema's in the app.module.ts

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


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

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

@Component({
  selector: 'app-invoice-finance-wrapper',
  template: '<div><invoice-finance partnerId="{{partnerId}}" kvkNumber="{{kvkNumber}}" ></invoice-finance></div>',
})
export class InvoiceFinanceWrapperComponent {
  partnerId: string = 'partnerId';
  // define available props
  @Input() kvkNumber: string | undefined;
}

VUE

<script setup>
import '@embedded-banking-fundr/rabobank-invoice-finance-uat/invoice-finance';

const partnerId = 'partnerId';

// define available props
const { kvkNumber } = defineProps(['kvkNumber']);
</script>

<template>
  <div>
    <invoice-finance :partnerId="partnerId" :kvkNumber="kvkNumber"></invoice-finance>
  </div>
</template>

Styling Adjust the component's styling by modifying the CSS variables:

<style>
  invoice-finance {
    --rabobank-color-primary: #231f20;
    --rabobank-color-secondary: #ee3632;
    --rabobank-svg-primary: #231f20;
    --rabobank-svg-primary-light: rgba(35, 31, 32, 0.69);
    --rabobank-svg-secondary: #ee3632;
  }
</style>

To use the invoice finance component in your project, include the HTML snippet and CSS styles mentioned above. Customize the CSS variables as needed to match the partner's platform styling.