dcolonv-elements5 v0.0.15

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 App = () => (
  <OatFiProvider token={token} partnerId={partnerId}>
    <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);

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

Go to Theming section for more information

TypeScript support

OatFi React JS is packaged with TypeScript declarations.