0.0.5 • Published 1 year ago
dcolonv-elements4 v0.0.5
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.