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

1npm install --save @oatfi/react-js

BNPL

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

Minimal example

1import React from "react";
2import ReactDOM from "react-dom";
3import { BNPL, OatFiProvider } from "@oatfi/react-js";
4
5// Obtain token authenticating in the api with your PK and Business Id
6const partnerId = "629fe7c0f15794e7fe7e73d8";
7const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....";
8const invoiceExternalId = "2260c633-56e6-482b-ae88-a54af97a8587";
9const payorExternalId = "f89449d7-fdfb-4151-a5d9-20da5f5eae92";
10const supportEmail="support@email.com"
11
12const App = () => (
13  <OatFiProvider token={token} partnerId={partnerId} supportEmail={supportEmail}>
14    <BNPL
15      payorExternalId={payorExternalId}
16      invoiceExternalId={invoiceExternalId}
17    />
18  </OatFiProvider>
19);
20
21ReactDOM.render(<App />, document.body);

Stage example

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

1import React from "react";
2import ReactDOM from "react-dom";
3import { BNPL, OatFiProvider } from "@oatfi/react-js";
4
5// Obtain token authenticating in the api with your PK and Business Id
6const partnerId = "629fe7c0f15794e7fe7e73d8";
7const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....";
8const invoiceExternalId = "2260c633-56e6-482b-ae88-a54af97a8587";
9const payorExternalId = "f89449d7-fdfb-4151-a5d9-20da5f5eae92";
10
11const App = () => (
12  <OatFiProvider token={token} partnerId={partnerId} sandbox>
13    <BNPL
14      payorExternalId={payorExternalId}
15      invoiceExternalId={invoiceExternalId}
16    />
17  </OatFiProvider>
18);
19
20ReactDOM.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

1 <BNPL
2  payorExternalId={payorExternalId}
3  invoiceExternalId={invoiceExternalId}
4  steps={{fund:false}}
5/>

Theme example

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

1import React from "react";
2import ReactDOM from "react-dom";
3import { BNPL, OatFiProvider } from "@oatfi/react-js";
4
5// Obtain token authenticating in the api with your PK and Business Id
6const partnerId = "629fe7c0f15794e7fe7e73d8";
7const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....";
8const invoiceExternalId = "2260c633-56e6-482b-ae88-a54af97a8587";
9const payorExternalId = "f89449d7-fdfb-4151-a5d9-20da5f5eae92";
10
11const theme = {
12  colors: {
13    primary: "blue",
14  },
15};
16
17const App = () => (
18  <OatFiProvider token={token} partnerId={partnerId} theme={theme}>
19    <BNPL
20      payorExternalId={payorExternalId}
21      invoiceExternalId={invoiceExternalId}
22    />
23  </OatFiProvider>
24);
25
26ReactDOM.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:

1import { BNPL, OatFiProvider, BNPL_EVENTS } from '@oatfi/react-js';
2
3const eventCallback = (event: BNPL_EVENTS, data: any) => {
4  switch (event) {
5    case BNPL_EVENTS.CLOSE_DRAWER: //DO SOMETHING
6      break;
7    case BNPL_EVENTS.UNDER_WRITTING: //DO SOMETHING
8      break;
9    case BNPL_EVENTS.DEFER: //DO SOMETHING
10      break;
11    case BNPL_EVENTS.DEFER_ERROR: //DO SOMETHING
12      break;
13  }
14};
15
16<BNPL
17  payorExternalId={payorExternalId}
18  invoiceExternalId={invoiceExternalId}
19  eventCallback={eventCallback}
20/>

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)

1
2<BNPL
3  payorExternalId={payorExternalId}
4  invoiceExternalId={invoiceExternalId}
5  subtitle='Custom subt'
6/>

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.