react-nomba-checkout-sdk 1.0.0 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-nomba-checkout-sdk",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/src/apis/handleNombaApiCall.ts

@@ -0,0 +1,26 @@
+import axios from 'axios';
+
+export const handleNombaApiCall = async (
+  url: string,
+  method: string,
+  body?: {} | null,
+  customHeaders?: { [key: string]: string },
+  environment?: string
+) => {
+  const baseUrl =
+    environment === 'sandbox'
+      ? 'https://sandbox.nomba.com/v1'
+      : 'https://api.nomba.com/v1';
+
+  const options = {
+    method: method,
+    headers: {
+      'content-type': 'application/json',
+      ...customHeaders,
+    },
+    data: body && body,
+    url: `${baseUrl}${url}`,
+  };
+  const response = await axios(options);
+  return response;
+};

package/src/apis/handleVendorApiCall.ts

@@ -0,0 +1,26 @@
+import axios from 'axios';
+
+export const handleVendorApiCall = async (
+  url: string,
+  method: string,
+  body?: {} | null,
+  customHeaders?: { [key: string]: string },
+  environment?: string
+) => {
+  const baseUrl =
+    environment === 'sandbox'
+      ? 'https://sandbox.nomba.com/v1'
+      : 'https://api.nomba.com/v1';
+
+  const options = {
+    method: method,
+    headers: {
+      'content-type': 'application/json',
+      ...customHeaders,
+    },
+    data: body && body,
+    url: `${baseUrl}${url}`,
+  };
+  const response = await axios(options);
+  return response;
+};

package/src/apis/useCardCheckout.ts

@@ -1,4 +1,4 @@
-import { handleApiCall } from "./handleApiCall";
+import { handleVendorApiCall } from "./handleVendorApiCall";
 
 interface CardCheckoutPayload {
   orderReference: string;
@@ -9,7 +9,7 @@ interface CardCheckoutPayload {
 
 export const useCardCheckout = async (payload: CardCheckoutPayload) => {
   try {
-    const response = await handleApiCall(
+    const response = await handleVendorApiCall(
       "/checkout/checkout-card-detail",
       "POST",
       {

package/src/apis/useCardCheckoutOtp.ts

@@ -1,4 +1,4 @@
-import { handleApiCall } from "./handleApiCall";
+import { handleVendorApiCall } from "./handleVendorApiCall";
 
 interface OtpRequest {
   otp: string;
@@ -9,7 +9,7 @@ interface OtpRequest {
 
 export const useCardCheckoutOtp = async (payload: OtpRequest) => {
   try {
-    const response = await handleApiCall(
+    const response = await handleVendorApiCall(
       "/checkout/checkout-card-otp",
       "POST",
       payload

package/src/apis/useFetchUssdBanks.ts

@@ -1,8 +1,8 @@
-import { handleApiCall } from "./handleApiCall";
+import { handleVendorApiCall } from "./handleVendorApiCall";
 
 export const useFetchUssdBanks = async () => {
   try {
-    const response = await handleApiCall(`/checkout/ussd/banks`, "GET");
+    const response = await handleVendorApiCall(`/checkout/ussd/banks`, "GET");
     return response.data;
   } catch (error: any) {
     return error;

package/src/apis/useGenerateQrCode.ts

@@ -1,8 +1,8 @@
-import { handleApiCall } from "./handleApiCall";
+import { handleVendorApiCall } from "./handleVendorApiCall";
 
 export const useGenerateQrCode = async (orderReference: string) => {
   try {
-    const response = await handleApiCall(
+    const response = await handleVendorApiCall(
       `/checkout/qr/${orderReference}`,
       "GET"
     );

package/src/apis/useGenerateToken.ts

@@ -0,0 +1,30 @@
+import { handleNombaApiCall } from './handleNombaApiCall';
+
+interface GenerateTokenPayload {
+  clientId: string;
+  clientSecret: string;
+  accountId: string;
+  environment?: string;
+}
+
+export const useGenerateToken = async (payload: GenerateTokenPayload) => {
+  try {
+    const response = await handleNombaApiCall(
+      '/auth/token/issue',
+      'POST',
+      {
+        grant_type: 'client_credentials',
+        client_id: payload.clientId,
+        client_secret: payload.clientSecret,
+      },
+      {
+        accountId: payload.accountId,
+      },
+      payload.environment
+    );
+
+    return response;
+  } catch (error: any) {
+    return error;
+  }
+};

package/src/apis/useGetOrder.ts

@@ -1,8 +1,8 @@
-import { handleApiCall } from "./handleApiCall";
+import { handleVendorApiCall } from "./handleVendorApiCall";
 
 export const useGetOrder = async (orderReference: string) => {
   try {
-    const response = await handleApiCall(
+    const response = await handleVendorApiCall(
       `/checkout/order/${orderReference}`,
       "GET"
     );

package/src/apis/useGetUssdCode.ts

@@ -1,4 +1,4 @@
-import { handleApiCall } from "./handleApiCall";
+import { handleVendorApiCall } from "./handleVendorApiCall";
 
 interface UssdCodeRequest {
   ussdBankId: string;
@@ -16,7 +16,7 @@ export const useGetUssdCode = async (payload: {
   orderId: string;
 }) => {
   try {
-    const response = await handleApiCall(
+    const response = await handleVendorApiCall(
       `/checkout/ussd/code`,
       "POST",
       payload

package/src/apis/useNombaCheckout.ts

@@ -0,0 +1,70 @@
+import eventBus from '../eventBus';
+import { handleNombaApiCall } from './handleNombaApiCall';
+import { useGenerateToken } from './useGenerateToken';
+
+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;
+  clientSecret: string;
+  accountId: string;
+  environment?: string;
+  onSuccess: (orderReference: string) => void;
+  onFailure: (e: any) => void;
+  onClose: () => {};
+}
+
+export const useNombaCheckout = async (payload: CheckoutPayload) => {
+  try {
+    const tokenResponse = await useGenerateToken({
+      clientId: payload.clientId,
+      clientSecret: payload.clientSecret,
+      accountId: payload.accountId,
+      environment: payload.environment,
+    });
+
+    const response = await handleNombaApiCall(
+      '/checkout/order',
+      'POST',
+      {
+        order: {
+          ...payload.order,
+          accountId: payload.accountId,
+        },
+        tokenizeCard: payload.tokenizeCard,
+      },
+      {
+        Authorization: `Bearer ${tokenResponse?.data?.data?.access_token}`,
+        accountId: payload.accountId,
+      },
+      payload.environment
+    );
+
+    eventBus.emit('openModal', {
+      orderId: response?.data?.data?.orderReference,
+      onClose: payload.onClose,
+      environment: payload.environment,
+    });
+    return response.data;
+  } catch (error: any) {
+    payload.onFailure?.(error);
+    return error;
+  }
+};

package/src/apis/useResendOtp.ts

@@ -1,8 +1,8 @@
-import { handleApiCall } from "./handleApiCall";
+import { handleVendorApiCall } from "./handleVendorApiCall";
 
 export const useResendOtp = async (orderReference: string) => {
   try {
-    const response = await handleApiCall("/checkout/resend-otp", "POST", {
+    const response = await handleVendorApiCall("/checkout/resend-otp", "POST", {
       orderReference,
     });
     return response.data;

package/src/apis/useVerifyOrderStatus.ts

@@ -1,8 +1,8 @@
-import { handleApiCall } from "./handleApiCall";
+import { handleVendorApiCall } from "./handleVendorApiCall";
 
 export const useVerifyOrderStatus = async (orderReference: string) => {
   try {
-    const response = await handleApiCall(
+    const response = await handleVendorApiCall(
       "/checkout/confirm-transaction-receipt",
       "POST",
       { orderReference }

package/src/components/NombaCheckoutModal.tsx

@@ -1,39 +1,72 @@
-import React, { Component } from "react";
-import "../styles.css";
-import Loader from "../assets/Loader";
-import { CloseIcon } from "../assets/CloseIcon";
-
-interface NombaCheckoutModalProps {
-  orderId: string;
-  onClose: () => void;
-}
+import React, { Component } from 'react';
+import '../styles.css';
+import Loader from '../assets/Loader';
+import { CloseIcon } from '../assets/CloseIcon';
+import eventBus from '../eventBus';
 
 interface NombaCheckoutModalState {
+  orderId: string;
   isLoading: boolean;
+  isOpen: boolean;
+  onClose: () => void;
+  environment: string;
 }
 
-class NombaCheckoutModal extends Component<
-  NombaCheckoutModalProps,
-  NombaCheckoutModalState
-> {
-  constructor(props: NombaCheckoutModalProps) {
+class NombaCheckoutModal extends Component<{}, NombaCheckoutModalState> {
+  constructor(props: {}) {
     super(props);
     this.state = {
+      orderId: '',
       isLoading: true,
+      isOpen: false,
+      onClose: () => {},
+      environment: 'live',
     };
   }
 
+  handleOpen = (orderId: string) => {
+    this.setState({ isOpen: true, orderId });
+  };
+
   handleClose = () => {
-    this.props.onClose?.();
+    this.state.onClose?.();
+    this.setState({ isOpen: false });
   };
 
   handleIframeLoad = () => {
     this.setState({ isLoading: false });
   };
 
+  componentDidMount() {
+    eventBus.on(
+      'openModal',
+      ({
+        orderId,
+        onClose,
+        environment,
+      }: {
+        orderId: string;
+        onClose: () => void;
+        environment: string;
+      }) => {
+        this.setState({ isOpen: true, orderId, onClose, environment });
+      }
+    );
+
+    eventBus.on('closeModal', () => {
+      this.setState({ isOpen: false });
+    });
+  }
+
+  componentWillUnmount() {
+    eventBus.off('openModal', this.handleOpen);
+    eventBus.off('closeModal', this.handleClose);
+  }
+
   render() {
-    const { orderId } = this.props;
-    const { isLoading } = this.state;
+    const { isLoading, isOpen, orderId } = this.state;
+
+    if (!isOpen) return null;
 
     return (
       <div style={modalStyles.overlay} onClick={this.handleClose}>
@@ -41,7 +74,7 @@ class NombaCheckoutModal extends Component<
           <div style={modalStyles.content}>
             {isLoading && (
               <div style={modalStyles.loader}>
-                <div className="spinner"></div>
+                <div className='spinner'></div>
                 <Loader />
               </div>
             )}
@@ -51,12 +84,12 @@ class NombaCheckoutModal extends Component<
             </button>
 
             <iframe
-              src={`https://checkout.nomba.com/pay/${orderId}`}
-              allow="clipboard-write clipboard-read"
-              width="100%"
-              height="80vh"
+              src={`https://checkout.nomba.com/${this.state.environment === 'sandbox' ? 'sandbox' : 'pay'}/${orderId}`}
+              allow='clipboard-write clipboard-read'
+              width='100%'
+              height='80vh'
               style={modalStyles.iframe}
-              title="Nomba checkout"
+              title='Nomba checkout'
               onLoad={this.handleIframeLoad}
             />
           </div>
@@ -68,64 +101,64 @@ class NombaCheckoutModal extends Component<
 
 const modalStyles: { [key: string]: React.CSSProperties } = {
   overlay: {
-    position: "fixed",
+    position: 'fixed',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     zIndex: 9999,
   },
   modal: {
-    backgroundColor: "white",
-    width: "100%",
-    maxWidth: "60vw",
-    borderRadius: "8px",
-    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
-    position: "relative",
-    height: "600px",
-    maxHeight: "95vh",
+    backgroundColor: 'white',
+    width: '100%',
+    maxWidth: '60vw',
+    borderRadius: '8px',
+    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+    position: 'relative',
+    height: '600px',
+    maxHeight: '95vh',
   },
   header: {
-    position: "relative",
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
   },
   closeButton: {
-    position: "absolute",
-    top: "16px",
-    right: "16px",
-    border: "none",
-    background: "transparent",
+    position: 'absolute',
+    top: '16px',
+    right: '16px',
+    border: 'none',
+    background: 'transparent',
   },
   content: {
-    position: "relative",
+    position: 'relative',
   },
   iframe: {
-    border: "none",
-    borderRadius: "8px",
-    width: "100%",
-    maxHeight: "95vh",
-    height: "600px",
-    display: "block",
+    border: 'none',
+    borderRadius: '8px',
+    width: '100%',
+    maxHeight: '95vh',
+    height: '600px',
+    display: 'block',
   },
   loader: {
-    position: "absolute",
+    position: 'absolute',
     top: 0,
     left: 0,
-    width: "100%",
-    height: "100%",
-    backgroundColor: "rgba(255, 255, 255, 0.8)",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "18px",
-    fontWeight: "bold",
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '18px',
+    fontWeight: 'bold',
   },
 };
 

package/src/eventBus.ts

@@ -0,0 +1,25 @@
+class EventBus {
+  private events: { [key: string]: Array<(data: any) => void> } = {};
+
+  on(event: string, listener: (data: any) => void): void {
+    if (!this.events[event]) {
+      this.events[event] = [];
+    }
+    this.events[event].push(listener);
+  }
+
+  emit(event: string, data: any): void {
+    if (this.events[event]) {
+      this.events[event].forEach(listener => listener(data));
+    }
+  }
+
+  off(event: string, listener: (data: any) => void): void {
+    if (this.events[event]) {
+      this.events[event] = this.events[event].filter(l => l !== listener);
+    }
+  }
+}
+
+const eventBus = new EventBus();
+export default eventBus;

package/src/helpers/InitializeNombaCheckout.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { NombaCheckoutModal } from "../components/NombaCheckoutModal";
+
+let root: ReactDOM.Root | null = null;
+
+export const InitializeNombaCheckout = () => {
+  const modalDivId = "nomba-checkout-modal";
+
+  let modalContainer = document.getElementById(modalDivId);
+  if (!modalContainer) {
+    modalContainer = document.createElement("div");
+    modalContainer.id = modalDivId;
+    document.body.appendChild(modalContainer);
+  }
+
+  if (!root) {
+    root = ReactDOM.createRoot(modalContainer);
+  }
+
+    root!.render(
+      <div>
+        <NombaCheckoutModal />
+      </div>
+    );
+};

package/src/index.tsx

@@ -1,6 +1,3 @@
-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";
@@ -9,10 +6,11 @@ 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 {
-  NombaCheckoutButton,
-  NombaCheckoutModal,
   useGetOrder,
   useCardCheckout,
   useCardCheckoutOtp,
@@ -21,4 +19,7 @@ export {
   useVerifyOrderStatus,
   useFetchUssdBanks,
   useGetUssdCode,
+  useGenerateToken,
+  useNombaCheckout,
+  InitializeNombaCheckout
 };

package/dist/apis/handleApiCall.d.ts

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

package/dist/components/NombaCheckoutButton.d.ts

@@ -1,17 +0,0 @@
-import React, { Component } from "react";
-interface NombaCheckoutButtonProps {
-    orderId: string;
-    buttonText?: string;
-    buttonStyle?: React.CSSProperties;
-    children?: React.ReactNode;
-    onClose: () => void;
-}
-interface NombaCheckoutButtonState {
-    showModal: boolean;
-}
-declare class NombaCheckoutButton extends Component<NombaCheckoutButtonProps, NombaCheckoutButtonState> {
-    constructor(props: NombaCheckoutButtonProps);
-    handleClose: () => void;
-    render(): React.JSX.Element;
-}
-export { NombaCheckoutButton };

package/src/apis/handleApiCall.ts

@@ -1,20 +0,0 @@
-import axios from "axios";
-
-export const handleApiCall = async (
-  url: string,
-  method: string,
-  body?: {} | null,
-  customHeaders?: { [key: string]: string }
-) => {
-  const options = {
-    method: method,
-    headers: {
-      "content-type": "application/json",
-      ...customHeaders,
-    },
-    data: body && body,
-    url: `https://vendor-api.kudi.ai/v1${url}`,
-  };
-  const response = await axios(options);
-  return response;
-};