react-nomba-checkout-sdk 1.0.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-nomba-checkout-sdk",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "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,64 @@
+import eventBus from '../eventBus';
+import { handleNombaApiCall } from './handleNombaApiCall';
+
+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 const useNombaCheckout = async (payload: CheckoutPayload) => {
+  try {
+    const response = await handleNombaApiCall(
+      '/checkout/order',
+      'POST',
+      {
+        order: {
+          ...payload.order,
+          accountId: payload.accountId,
+        },
+        tokenizeCard: payload.tokenizeCard,
+      },
+      {
+        accountId: payload.accountId,
+        public_key: payload.clientId,
+        'X-Nomba-Integration': 'react-sdk',
+      },
+      payload.environment
+    );
+
+    eventBus.emit('openModal', {
+      orderId: response?.data?.data?.orderReference,
+      onClose: payload.onClose,
+      onPaymentSuccess: payload.onPaymentSuccess,
+      environment: payload.environment,
+    });
+    return payload.onCreateOrder(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/assets/CloseIcon.tsx

@@ -1,19 +1,19 @@
-import React from "react";
+import React from 'react';
 
 export const CloseIcon = () => (
   <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    width='32'
+    height='32'
+    viewBox='0 0 32 32'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
   >
-    <rect width="32" height="32" rx="16" fill="#F2F2F2" fill-opacity="0.64" />
+    <rect width='32' height='32' rx='16' fill='#F2F2F2' fillOpacity='0.64' />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M11.7646 11.7646C11.8948 11.6344 12.1059 11.6344 12.236 11.7646L16.0003 15.5289L19.7646 11.7646C19.8948 11.6344 20.1059 11.6344 20.236 11.7646C20.3662 11.8948 20.3662 12.1059 20.236 12.236L16.4717 16.0003L20.236 19.7646C20.3662 19.8948 20.3662 20.1059 20.236 20.236C20.1059 20.3662 19.8948 20.3662 19.7646 20.236L16.0003 16.4717L12.236 20.236C12.1059 20.3662 11.8948 20.3662 11.7646 20.236C11.6344 20.1059 11.6344 19.8948 11.7646 19.7646L15.5289 16.0003L11.7646 12.236C11.6344 12.1059 11.6344 11.8948 11.7646 11.7646Z"
-      fill="#0D0D0D"
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M11.7646 11.7646C11.8948 11.6344 12.1059 11.6344 12.236 11.7646L16.0003 15.5289L19.7646 11.7646C19.8948 11.6344 20.1059 11.6344 20.236 11.7646C20.3662 11.8948 20.3662 12.1059 20.236 12.236L16.4717 16.0003L20.236 19.7646C20.3662 19.8948 20.3662 20.1059 20.236 20.236C20.1059 20.3662 19.8948 20.3662 19.7646 20.236L16.0003 16.4717L12.236 20.236C12.1059 20.3662 11.8948 20.3662 11.7646 20.236C11.6344 20.1059 11.6344 19.8948 11.7646 19.7646L15.5289 16.0003L11.7646 12.236C11.6344 12.1059 11.6344 11.8948 11.7646 11.7646Z'
+      fill='#0D0D0D'
     />
   </svg>
 );

package/src/components/NombaCheckoutModal.tsx

@@ -1,39 +1,86 @@
-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;
+  onPaymentSuccess: (e: any) => 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: () => {},
+      onPaymentSuccess: () => {},
+      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 });
   };
 
+  handleMessage = (event: MessageEvent) => {
+    if (event.data?.type === 'onSuccess') {
+      this.state?.onPaymentSuccess(event.data?.orderDetails);
+    }
+  };
+
+  componentDidMount() {
+    window.addEventListener('message', this.handleMessage);
+
+    eventBus.on(
+      'openModal',
+      ({
+        orderId,
+        onClose,
+        environment,
+        onPaymentSuccess,
+      }: NombaCheckoutModalState) => {
+        this.setState({
+          isOpen: true,
+          orderId,
+          onClose,
+          environment,
+          onPaymentSuccess,
+        });
+      }
+    );
+
+    eventBus.on('closeModal', () => {
+      this.setState({ isOpen: false });
+    });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('message', this.handleMessage);
+    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,23 +88,23 @@ class NombaCheckoutModal extends Component<
           <div style={modalStyles.content}>
             {isLoading && (
               <div style={modalStyles.loader}>
-                <div className="spinner"></div>
+                <div className='spinner'></div>
                 <Loader />
               </div>
             )}
-
             <button style={modalStyles.closeButton} onClick={this.handleClose}>
               <CloseIcon />
             </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}
+              id='checkout-sdk-iframe'
             />
           </div>
         </div>
@@ -68,64 +115,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,18 +1,16 @@
-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";
+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 {
-  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 };