oatfi-web

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

Usage

To use the framework you need to 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.

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.

Note: The only way to hit the prod environment if with the specific cdn link provided by our team.

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

BNPL

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

Callback logic

BNPL component will trigger events on closing the drawer 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 BNPL_EVENTS.CLOSE_DRAWER:
      console.log(event.detail.data, "Close");
      break;
    case BNPL_EVENTS.DEFER:
      console.log(event.detail.data, "Defer");
      break;
    case BNPL_EVENTS.DEFER_ERROR:
      console.log(event.detail.data, "Defer error");
      break;
    case BNPL_EVENTS.UNDERWRITING_ERROR:
      console.log(event.detail.data, "Underwriting 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) | {} | | UNDER_WRITING_ERROR (triggers on closing drawer after a error on underwriting) | {message} | | DEFER (triggers on closing drawer after funding) | { invoiceExternalId, amount, payInvoiceOnDate, totalAmount,repaymentDate } | | DEFER_ERROR (triggers on closing drawer after funding with error) | { message, cause } |

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'
/>

Factoring

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