react-nomba-checkout-sdk 1.0.3 → 2.0.1

package/package.json

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

package/src/apis/useNombaCheckout.ts

@@ -1,6 +1,5 @@
 import eventBus from '../eventBus';
 import { handleNombaApiCall } from './handleNombaApiCall';
-import { useGenerateToken } from './useGenerateToken';
 
 interface CheckoutPayload {
   order: {
@@ -23,23 +22,16 @@ interface CheckoutPayload {
   };
   tokenizeCard: boolean;
   clientId: string;
-  clientSecret: string;
   accountId: string;
   environment?: string;
-  onSuccess: (orderReference: string) => void;
+  onCreateOrder: (orderReference: string) => void;
   onFailure: (e: any) => void;
   onClose: () => {};
+  onPaymentSuccess: (order: any) => {};
 }
 
 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',
@@ -51,8 +43,9 @@ export const useNombaCheckout = async (payload: CheckoutPayload) => {
         tokenizeCard: payload.tokenizeCard,
       },
       {
-        Authorization: `Bearer ${tokenResponse?.data?.data?.access_token}`,
         accountId: payload.accountId,
+        public_key: payload.clientId,
+        'X-Nomba-Integration': 'react-sdk',
       },
       payload.environment
     );
@@ -60,9 +53,10 @@ export const useNombaCheckout = async (payload: CheckoutPayload) => {
     eventBus.emit('openModal', {
       orderId: response?.data?.data?.orderReference,
       onClose: payload.onClose,
+      onPaymentSuccess: payload.onPaymentSuccess,
       environment: payload.environment,
     });
-    return response.data;
+    return payload.onCreateOrder(response.data);
   } catch (error: any) {
     payload.onFailure?.(error);
     return error;

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

@@ -9,6 +9,7 @@ interface NombaCheckoutModalState {
   isLoading: boolean;
   isOpen: boolean;
   onClose: () => void;
+  onPaymentSuccess: (e: any) => void;
   environment: string;
 }
 
@@ -20,6 +21,7 @@ class NombaCheckoutModal extends Component<{}, NombaCheckoutModalState> {
       isLoading: true,
       isOpen: false,
       onClose: () => {},
+      onPaymentSuccess: () => {},
       environment: 'live',
     };
   }
@@ -37,19 +39,30 @@ class NombaCheckoutModal extends Component<{}, NombaCheckoutModalState> {
     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,
-      }: {
-        orderId: string;
-        onClose: () => void;
-        environment: string;
-      }) => {
-        this.setState({ isOpen: true, orderId, onClose, environment });
+        onPaymentSuccess,
+      }: NombaCheckoutModalState) => {
+        this.setState({
+          isOpen: true,
+          orderId,
+          onClose,
+          environment,
+          onPaymentSuccess,
+        });
       }
     );
 
@@ -59,6 +72,7 @@ class NombaCheckoutModal extends Component<{}, NombaCheckoutModalState> {
   }
 
   componentWillUnmount() {
+    window.removeEventListener('message', this.handleMessage);
     eventBus.off('openModal', this.handleOpen);
     eventBus.off('closeModal', this.handleClose);
   }
@@ -78,7 +92,6 @@ class NombaCheckoutModal extends Component<{}, NombaCheckoutModalState> {
                 <Loader />
               </div>
             )}
-
             <button style={modalStyles.closeButton} onClick={this.handleClose}>
               <CloseIcon />
             </button>
@@ -91,6 +104,8 @@ class NombaCheckoutModal extends Component<{}, NombaCheckoutModalState> {
               style={modalStyles.iframe}
               title='Nomba checkout'
               onLoad={this.handleIframeLoad}
+              id='checkout-sdk-iframe'
+              name='react-sdk'
             />
           </div>
         </div>

package/src/index.tsx

@@ -1,14 +1,14 @@
-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"
+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,
@@ -21,5 +21,5 @@ export {
   useGetUssdCode,
   useGenerateToken,
   useNombaCheckout,
-  InitializeNombaCheckout
+  InitializeNombaCheckout,
 };