Oatfi React-js

React JS components that enables OatFi flows to defer payments.

Requirements

The minimum supported version of React is v16.8. If you use an older version, upgrade React to use this library

Getting started

First Install OatFi-React-JS

npm install --save @oatfi/react-js

BNPL

Our package relies on our OatFiProvider that will handle our context for Oatfi transactions

Minimal example

import React from "react";
import ReactDOM from "react-dom";
import { BNPL, OatFiProvider } from "@oatfi/react-js";

// Obtain token authenticating in the api with your PK and Business Id
const partnerId = "629fe7c0f15794e7fe7e73d8";
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....";
const invoiceExternalId = "2260c633-56e6-482b-ae88-a54af97a8587";
const payorExternalId = "f89449d7-fdfb-4151-a5d9-20da5f5eae92";
const supportEmail="[email protected]"

const App = () => (
  <OatFiProvider token={token} partnerId={partnerId} supportEmail={supportEmail}>
    <BNPL
      payorExternalId={payorExternalId}
      invoiceExternalId={invoiceExternalId}
    />
  </OatFiProvider>
);

ReactDOM.render(<App />, document.body);

Stage example

OatFiProvider component accepts a sandbox prop to run the service over our stage environment

import React from "react";
import ReactDOM from "react-dom";
import { BNPL, OatFiProvider } from "@oatfi/react-js";

// Obtain token authenticating in the api with your PK and Business Id
const partnerId = "629fe7c0f15794e7fe7e73d8";
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....";
const invoiceExternalId = "2260c633-56e6-482b-ae88-a54af97a8587";
const payorExternalId = "f89449d7-fdfb-4151-a5d9-20da5f5eae92";

const App = () => (
  <OatFiProvider token={token} partnerId={partnerId} sandbox>
    <BNPL
      payorExternalId={payorExternalId}
      invoiceExternalId={invoiceExternalId}
    />
  </OatFiProvider>
);

ReactDOM.render(<App />, document.body);

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 | | underWriting | None | | presentOffer | underWritting is required | | fund | presentOffer is required |

By default all steps are enabled.

Usage example

 <BNPL
  payorExternalId={payorExternalId}
  invoiceExternalId={invoiceExternalId}
  steps={{fund:false}}
/>

Theme example

OatFiProvider component accepts a theme prop to override some colors on the UI

import React from "react";
import ReactDOM from "react-dom";
import { BNPL, OatFiProvider } from "@oatfi/react-js";

// Obtain token authenticating in the api with your PK and Business Id
const partnerId = "629fe7c0f15794e7fe7e73d8";
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....";
const invoiceExternalId = "2260c633-56e6-482b-ae88-a54af97a8587";
const payorExternalId = "f89449d7-fdfb-4151-a5d9-20da5f5eae92";

const theme = {
  colors: {
    primary: "blue",
  },
};

const App = () => (
  <OatFiProvider token={token} partnerId={partnerId} theme={theme}>
    <BNPL
      payorExternalId={payorExternalId}
      invoiceExternalId={invoiceExternalId}
    />
  </OatFiProvider>
);

ReactDOM.render(<App />, document.body);

Callback logic

BNPL component receives a prop name eventCallback this is a function that needs to have the signature eventCallback(event,data) the package exports a enum of possible events called BNPL_EVENTS. usage example:

import { BNPL, OatFiProvider, BNPL_EVENTS } from '@oatfi/react-js';

const eventCallback = (event: BNPL_EVENTS, data: any) => {
  switch (event) {
    case BNPL_EVENTS.CLOSE_DRAWER: //DO SOMETHING
      break;
    case BNPL_EVENTS.UNDER_WRITTING: //DO SOMETHING
      break;
    case BNPL_EVENTS.DEFER: //DO SOMETHING
      break;
    case BNPL_EVENTS.DEFER_ERROR: //DO SOMETHING
      break;
  }
};

<BNPL
  payorExternalId={payorExternalId}
  invoiceExternalId={invoiceExternalId}
  eventCallback={eventCallback}
/>

BNPL Events

| Event | data | |----------------------------------------------------------------------------------|------------------------------------------------------------------------------| | CLOSE_DRAWER (triggers on closing the drawer) | {} | | UNDER_WRITTING (triggers on closing drawer after flow without running funding) | {} | | DEFER (triggers on closing drawer after funding) | { invoiceExternalId, amount, payInvoiceOnDate, totalAmount,repaymentDate } | | DEFER_ERROR (triggers on closing drawer after funding with error) | { error } |

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)

<BNPL
  payorExternalId={payorExternalId}
  invoiceExternalId={invoiceExternalId}
  subtitle='Custom subt'
/>

THEMING

OatFiProvider component accepts a theme prop to override some colors on the UI

const theme = {
  colors: {
    primary: "blue"
  }
};

<OatFiProvider token={auth.accessToken} partnerId={auth.partnerId} theme={theme}>
  ...
</OatFiProvider>
  

Result:

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 |

TypeScript support

OatFi React JS is packaged with TypeScript declarations.

License

MIT License

Copyright (c) 2024 Oat Financial, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.