@oatfi/web-js v1.7.0

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

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:

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

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