react-nomba-checkout-sdk 1.0.1 → 2.0.0

package/README.md

@@ -1,35 +1,115 @@
-# React Nomba Checkout SDK
+# 🚀 React Nomba Checkout SDK
 
-The `react-nomba-checkout-sdk` is a lightweight JavaScript library designed to simplify payment processing and checkout experiences in your react web applications.
+The **`react-nomba-checkout-sdk`** is a lightweight React SDK designed to simplify payment processing and checkout integration using [Nomba's](https://nomba.com/) secure and reliable infrastructure.
 
-## 🚀 Getting Started
+> Built with ❤️ by **Israel Itua**
 
-To install the SDK, use npm or yarn:
+---
+
+## 📦 Installation
+
+You can install the SDK using npm or yarn:
 
 ```bash
 npm install react-nomba-checkout-sdk
 # or
 yarn add react-nomba-checkout-sdk
+```
 
-## Usage
+---
 
-Here’s how to integrate the SDK into your project:
+## ⚡ Quick Start
 
-```
+Here’s how to integrate the SDK into your React project:
 
-## 📖 Usage
+```jsx
+import { useState } from 'react';
+import {
+  useNombaCheckout,
+  InitializeNombaCheckout,
+} from 'react-nomba-checkout-sdk';
+import './App.css';
 
-```bash
-import { NombaCheckoutButton } from "react-nomba-checkout-sdk";
-
-const CheckoutPage = ({orderId}) => {
-    return (
-        <div>
-         <NombaCheckoutButton orderId={orderId} onClose = {onClose}/>
-        </div>
-    );
-}
+// Initialize Nomba Checkout on app load
+InitializeNombaCheckout();
+
+function App() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleCheckout = async () => {
+    setIsLoading(true);
 
-export default CheckoutPage;
+    const res = await useNombaCheckout({
+      accountId: 'your-account-id',
+      clientId: 'your-client-id',
+      order: {
+        callbackUrl: 'sample-url',
+        customerEmail: 'sample-email@gmail.com',
+        amount: '10.00',
+        currency: 'NGN',
+        splitRequest: {
+          splitType: 'PERCENTAGE',
+          splitList: [
+            {
+              accountId: 'your-account-id',
+              value: '65.45',
+            },
+          ],
+        },
+      },
+      tokenizeCard: 'true',
+      onCreateOrder: (orderReference) => {
+        console.log('Function called after the order is created');
+        console.log({ orderReference });
+        setIsLoading(false);
+      },
+      onFailure: (err) => {
+        console.log('Function called if error occurs while creating order.');
+        console.log(err);
+        setIsLoading(false);
+      },
+      onClose: () => {
+        console.log('Function called when modal is closed.');
+        setIsLoading(false);
+      },
+      onPaymentSuccess: (successResponse) => {
+        console.log('Function called on payment success.');
+        console.log({ successResponse });
+      },
+    });
+  };
+
+  return (
+    <>
+      <h1>Pay with Nomba</h1>
+      <button onClick={handleCheckout}>
+        {isLoading ? 'Please wait...' : 'Pay with Nomba Checkout'}
+      </button>
+    </>
+  );
+}
 
+export default App;
 ```
+
+---
+
+## 🔍 API Reference
+
+### `InitializeNombaCheckout()`
+
+Initializes the SDK. Call once when your app loads.
+
+---
+
+### `useNombaCheckout(options)`
+
+Launches the Nomba checkout modal. |
+
+---
+
+## 👤 Author
+
+**Israel Itua**  
+Frontend Engineer  
+[GitHub](https://github.com/the-israelItua/) •

package/dist/apis/handleNombaApiCall.d.ts

@@ -0,0 +1,3 @@
+export declare const handleNombaApiCall: (url: string, method: string, body?: {} | null, customHeaders?: {
+    [key: string]: string;
+}, environment?: string) => Promise<import("axios").AxiosResponse<any, any>>;

package/dist/apis/handleVendorApiCall.d.ts

@@ -0,0 +1,3 @@
+export declare const handleVendorApiCall: (url: string, method: string, body?: {} | null, customHeaders?: {
+    [key: string]: string;
+}, environment?: string) => Promise<import("axios").AxiosResponse<any, any>>;

package/dist/apis/useGenerateToken.d.ts

@@ -0,0 +1,8 @@
+interface GenerateTokenPayload {
+    clientId: string;
+    clientSecret: string;
+    accountId: string;
+    environment?: string;
+}
+export declare const useGenerateToken: (payload: GenerateTokenPayload) => Promise<any>;
+export {};

package/dist/apis/useNombaCheckout.d.ts

@@ -0,0 +1,30 @@
+interface CheckoutPayload {
+    order: {
+        orderReference: string;
+        customerId: string;
+        callbackUrl: string;
+        customerEmail: string;
+        amount: string;
+        currency: string;
+        accountId: string;
+        splitRequest?: {
+            splitType: string;
+            splitList: [
+                {
+                    accountId: string;
+                    value: number;
+                }
+            ];
+        };
+    };
+    tokenizeCard: boolean;
+    clientId: string;
+    accountId: string;
+    environment?: string;
+    onCreateOrder: (orderReference: string) => void;
+    onFailure: (e: any) => void;
+    onClose: () => {};
+    onPaymentSuccess: (order: any) => {};
+}
+export declare const useNombaCheckout: (payload: CheckoutPayload) => Promise<any>;
+export {};

package/dist/assets/CloseIcon.d.ts

@@ -1,2 +1,2 @@
-import React from "react";
+import React from 'react';
 export declare const CloseIcon: () => React.JSX.Element;

package/dist/components/NombaCheckoutModal.d.ts

@@ -1,16 +1,21 @@
-import React, { Component } from "react";
-import "../styles.css";
-interface NombaCheckoutModalProps {
-    orderId: string;
-    onClose: () => void;
-}
+import React, { Component } from 'react';
+import '../styles.css';
 interface NombaCheckoutModalState {
+    orderId: string;
     isLoading: boolean;
+    isOpen: boolean;
+    onClose: () => void;
+    onPaymentSuccess: (e: any) => void;
+    environment: string;
 }
-declare class NombaCheckoutModal extends Component<NombaCheckoutModalProps, NombaCheckoutModalState> {
-    constructor(props: NombaCheckoutModalProps);
+declare class NombaCheckoutModal extends Component<{}, NombaCheckoutModalState> {
+    constructor(props: {});
+    handleOpen: (orderId: string) => void;
     handleClose: () => void;
     handleIframeLoad: () => void;
-    render(): React.JSX.Element;
+    handleMessage: (event: MessageEvent) => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element | null;
 }
 export { NombaCheckoutModal };

package/dist/eventBus.d.ts

@@ -0,0 +1,8 @@
+declare class EventBus {
+    private events;
+    on(event: string, listener: (data: any) => void): void;
+    emit(event: string, data: any): void;
+    off(event: string, listener: (data: any) => void): void;
+}
+declare const eventBus: EventBus;
+export default eventBus;

package/dist/helpers/InitializeNombaCheckout.d.ts

@@ -0,0 +1 @@
+export declare const InitializeNombaCheckout: () => void;

package/dist/index.d.ts

@@ -1,11 +1,12 @@
-import { NombaCheckoutButton } from "./components/NombaCheckoutButton";
-import { NombaCheckoutModal } from "./components/NombaCheckoutModal";
-import { useGetOrder } from "./apis/useGetOrder";
-import { useCardCheckout } from "./apis/useCardCheckout";
-import { useCardCheckoutOtp } from "./apis/useCardCheckoutOtp";
-import { useGenerateQrCode } from "./apis/useGenerateQrCode";
-import { useVerifyOrderStatus } from "./apis/useVerifyOrderStatus";
-import { useResendOtp } from "./apis/useResendOtp";
-import { useFetchUssdBanks } from "./apis/useFetchUssdBanks";
-import { useGetUssdCode } from "./apis/useGetUssdCode";
-export { NombaCheckoutButton, NombaCheckoutModal, useGetOrder, useCardCheckout, useCardCheckoutOtp, useResendOtp, useGenerateQrCode, useVerifyOrderStatus, useFetchUssdBanks, useGetUssdCode, };
+import { useGetOrder } from './apis/useGetOrder';
+import { useCardCheckout } from './apis/useCardCheckout';
+import { useCardCheckoutOtp } from './apis/useCardCheckoutOtp';
+import { useGenerateQrCode } from './apis/useGenerateQrCode';
+import { useVerifyOrderStatus } from './apis/useVerifyOrderStatus';
+import { useResendOtp } from './apis/useResendOtp';
+import { useFetchUssdBanks } from './apis/useFetchUssdBanks';
+import { useGetUssdCode } from './apis/useGetUssdCode';
+import { useGenerateToken } from './apis/useGenerateToken';
+import { useNombaCheckout } from './apis/useNombaCheckout';
+import { InitializeNombaCheckout } from './helpers/InitializeNombaCheckout';
+export { useGetOrder, useCardCheckout, useCardCheckoutOtp, useResendOtp, useGenerateQrCode, useVerifyOrderStatus, useFetchUssdBanks, useGetUssdCode, useGenerateToken, useNombaCheckout, InitializeNombaCheckout, };