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 |