@oatfi/web-js

oatfi-web

A framework-free OatFi Web Components library that provides drop in components, written in TypeScript.

Installation

Use npm to install the Oatfi-Web-JS module:

npm install --save @oatfi/web-js

or you can add our cdn script into your website like this:

<script
  src="https://d1h8jcgjihlgjp.cloudfront.net/index.umd.min.js"
  type="text/javascript"
></script>

When imported this will create the custom-elements that will be available on your website for usage.

<oatfi-bnpl /> <oatfi-factoring /> <oatfi-onboarding />

Env overrides

On the components the prop sandbox is available in case the developer wants to hit the sandbox environment this can be used by adding the prop as true.

<oatfi-bnpl sandbox="true" ...></oatfi-bnpl>
<oatfi-factoring sandbox="true" ...></oatfi-factoring>
<oatfi-onboarding sandbox="true" ...></oatfi-onboarding>

CTA text

A attribute ctaText is available in order to customize the text shown in the main CTA of the elements.

Example:

<oatfi-onboarding ctaText="true" ... />

BNPL

<oatfi-bnpl
  token="yourAuthToken"
  partnerId="partnerId"
  supportEmail="supportEmail"
  payorExternalId="payorExternalId"
  invoiceExternalId="invoiceExternalId"
/>

Callback logic

BNPL component will trigger events according to what happened in the flow. In order to listen to these events a document event listener is required.

document.addEventListener('OATFI_BNPL', function (event) {
  switch (event.detail.event) {
    case OATFI_EVENTS.CLOSE_DRAWER:
      console.log(event.detail.data, 'Close');
      break;
    case OATFI_EVENTS.UNDERWRITING:
      console.log(event.detail.data, 'Underwriting');
      break;
    case OATFI_EVENTS.UNDERWRITING_ERROR:
      console.log(event.detail.data, 'Underwriting error');
      break;
    case OATFI_EVENTS.DEFER:
      console.log(event.detail.data, 'Defer');
      break;
    case OATFI_EVENTS.DEFER_ERROR:
      console.log(event.detail.data, 'Defer error');
      break;
    case OATFI_EVENTS.ERROR:
      console.log(event.detail.data, 'General error');
      break;
  }
});

Note: event triggered will have the prop detail that contains event and data

BNPL Events

Event	Data
CLOSE_DRAWER (triggers on closing the drawer)	{}
UNDERWRITING (triggers after underwriting was executed)	{ creditLimit: number }
UNDERWRITING_ERROR (triggers after underwriting was executed but it was an error)	{ creditLimit?: number, error: string }
DEFER (triggers after funding is executed)	{ businessExternalId: string, loanId: string, amount: number, availableCredit: number, type: "BNPL"}
DEFER_ERROR (triggers after funding is executed but it was an error)	{ error: string }
ERROR (triggers after a general error occurs)	{ error: string }

Subtitle prop

A prop subtitle is available to override the text below the cta for BNPL. (to not display a subtitle send a "" empty text)

<oatfi-bnpl
  token="yourAuthToken"
  partnerId="partnerId"
  supportEmail="supportEmail"
  payorExternalId="payorExternalId"
  invoiceExternalId="invoiceExternalId"
  subtitle="Custom subt"
/>

Steps configuration

BNPL component support steps configuration (in a form of a JSON object) to adapt the flow to the requirements of the client the options are:

Step	Pre-requisite
onboarding	None
contactInfo	None
underWriting	None
presentOffer	underWritting is required
fund	presentOffer is required

By default all steps are enabled.

Usage example

<oatfi-bnpl
  token="yourAuthToken"
  partnerId="partnerId"
  supportEmail="supportEmail"
  payorExternalId="payorExternalId"
  invoiceExternalId="invoiceExternalId"
  steps='{"onboarding":false}'
/>

Factoring

<oatfi-factoring token="yourAuthToken" partnerId="partnerId" payeeExternalId="payeeExternalId" />

Factoring Managed Marketpplace

If managed marketplace flag is indicated managedMarketplace="true", then payorExternalId is used instead of payeeExternalId

<oatfi-factoring
  token="yourAuthToken"
  partnerId="partnerId"
  managedMarketplace="true"
  payorExternalId="payorExternalId"
/>

Callback logic

Factoring component will trigger events according to what happened in the flow. In order to listen to these events a document event listener is required.

document.addEventListener('OATFI_FACTORING', function (event) {
  switch (event.detail.event) {
    case OATFI_EVENTS.CLOSE_DRAWER:
      console.log(event.detail.data, 'Close');
      break;
    case OATFI_EVENTS.UNDERWRITING:
      console.log(event.detail.data, 'Underwriting');
      break;
    case OATFI_EVENTS.UNDERWRITING_ERROR:
      console.log(event.detail.data, 'Underwriting error');
      break;
    case OATFI_EVENTS.PRESENT_LOAN_OFFER:
      console.log(event.detail.data, 'Present loan offer');
      break;
    case OATFI_EVENTS.FUNDING_LOAN:
      console.log(event.detail.data, 'Funding loan');
      break;
    case OATFI_EVENTS.SUMMARY_OFFER:
      console.log(event.detail.data, 'Summary offer');
      break;
    case OATFI_EVENTS.ERROR:
      console.log(event.detail.data, 'General error');
      break;
  }
});

Note: event triggered will have the prop detail that contains event and data

Factoring Events

Event	Data
CLOSE_DRAWER (triggers on closing the drawer)	{}
UNDERWRITING (triggers after underwriting was executed)	{ creditLimit: number }
UNDERWRITING_ERROR (triggers after underwriting was executed but it was an error)	{ creditLimit?: number, error: string }
PRESENT_LOAN_OFFER (triggers after an offer is presented)
{ businessExternalId: string, totalAvailableToFactor: number, invoices: [{ externalId: string, invoiceAmount: number, paidAmount: number, invoiceDate: number, dueDate: number, termsLink: string, payor: string, principalAmount: number, feeAmount: number, totalAmount: number }] }
FUNDING_LOAN (triggers after all funding attemps are executed)	{ funding: [{ businessExternalId: string, loanId: string, amount: number, availableCredit: number, type: 'FACTORING', transactionId: string }], total: number }
SUMMARY_OFFER (triggers after all funding is confirmed by the user)	{ funding: [{ businessExternalId: string, loanId: string, amount: number, availableCredit: number, type: 'FACTORING', transactionId: string }], total: number }
ERROR (triggers after a general error occurs)	{ error: string }

Subtitle prop

A prop confirmationMessages is available to override the text on the confirmation page. It accepts an array of strings with the template var {{amount}} will be replaced with total to factor formatted as currency value

<oatfi-factoring
  token="yourAuthToken"
  partnerId="partnerId"
  payeeExternalId="payeeExternalId"
  confirmationMessages='["You will receive <b>{{amount}}</b> deposited to your bank account on the next business day.", "We will schedule an ACH debit of <b>{{amount}}</b> from your bank account 30 days after the invoice due date to repay the factored amount plus fees."]'
/>

Onboarding

<oatfi-onboarding token="yourAuthToken" partnerid="partnerId" supportemail="supportEmail" />

The onboarding element offers 2 options, updating an existing business or creating one here are the examples of bot scenarios:

Updating

<oatfi-onboarding
  token="yourAuthToken"
  partnerid="partnerId"
  payorExternalId="payorExternalId"
  supportemail="supportEmail"
/>

Creating

In order to be able to create the business the token should be generated using the body (with the identifier set as partner)

{
  "businessExternalId": "externalId",
  "identifier": "partner"
}

<oatfi-onboarding token="yourAuthToken" partnerid="" supportemail="supportEmail" />

Product onboarding

In order to onboard a business for a specific product, it should be indicated with parameter productType="BNPL", possible values are "BNPL", "AR", "FACTORING", and "EWC", default value remains EWC

<oatfi-onboarding
  token="yourAuthToken"
  partnerid=""
  supportemail="supportEmail"
  productType="BNPL"
/>

Business General Info Conditional Fields

Approximate Monthly Spend

In order to make the field Approximate Monthly Spend required in Business form, you should pass the prop monthlySpendRequired="true"

<oatfi-onboarding
  token="yourAuthToken"
  partnerid=""
  supportemail="supportEmail"
  monthlySpendRequired="true"
/>

Annual Revenue

In order to make the field Annual Revenue required in Business form, you should pass the prop annualRevenueRequired="true"

<oatfi-onboarding
  token="yourAuthToken"
  partnerid=""
  supportemail="supportEmail"
  annualRevenueRequired="true"
/>

Underwriting at the end of the process

Onboarding has the option to execute underwriting at the end of the process, simply by setting the flag underwriting="true"

<oatfi-onboarding
  token="yourAuthToken"
  partnerid=""
  supportemail="supportEmail"
  underwriting="true"
/>

NOTE: Use with React and Typescript

If you are using custom-components with React along with Typescript, you should declare the incorporation of the custom-components into JSX IntrinsicElements interface

import * as React from 'react';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'oatfi-factoring': React.DetailedHTMLProps<any>;
      'oatfi-bnpl': React.DetailedHTMLProps<any>;
    }
  }
}

THEMING

Our component accepts a theme prop to override some colors on the UI, this needs to be pased as a stringify JSON object.

<oatfi-bnpl
  token="yourAuthToken"
  partnerId="partnerId"
  supportEmail="supportEmail"
  payorExternalId="payorExternalId"
  invoiceExternalId="invoiceExternalId"
  theme='{"colors":{"primary":"green"}}'
/>

Theme options

Property Name	Usage
primary	Used as the primary color, main CTA background and primary buttons
primaryHover	Used to set the background on hover of the primary elements
primaryPressed	Used to set the background on pressed of the primary elements
textPrimary	Used to set the color of the overall app text
textSecondary	Used to set the color of the subtitle of the cta
success	Used to set the color of success icon
successBackground	Used to set the color of success background Feedback card
warning	Used to set the color of warning icon
warningBackground	Used to set the color of warning background Feedback card
danger	Used to set the color of danger icon
dangerBackground	Used to set the color of danger background Feedback card
neutral300	Used to set the color of the disabled button
neutral200	Used to set the background of the disabled button
info	Used to set the background of the defered tag
tooltipColor	Used to set font color of the tooltips
tooltipBackground	Used to set the background of the tooltips