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";
10
11const App = () => (
12  <OatFiProvider token={token} partnerId={partnerId}>
13    <BNPL
14      payorExternalId={payorExternalId}
15      invoiceExternalId={invoiceExternalId}
16    />
17  </OatFiProvider>
18);
19
20ReactDOM.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);

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);

Go to Theming section for more information

TypeScript support

OatFi React JS is packaged with TypeScript declarations.