react-nomba-checkout-sdk 2.0.5 → 2.0.8

package/package.json

@@ -1,7 +1,10 @@
 {
 	"name": "react-nomba-checkout-sdk",
-	"version": "2.0.5",
+	"version": "2.0.8",
 	"main": "dist/index.js",
+	"files": [
+		"dist"
+	],
 	"module": "dist/index.esm.js",
 	"types": "dist/index.d.ts",
 	"scripts": {
@@ -11,7 +14,9 @@
 		"lint": "eslint .",
 		"lint:fix": "npm run lint -- --fix",
 		"test": "jest --env=jsdom",
-		"test:watch": "jest --watch --verbose --env=jsdom"
+		"test:watch": "jest --watch --verbose --env=jsdom",
+		"example": "npm run build && cd example && npm install && npm run dev",
+		"example:dev": "cd example && npm run dev"
 	},
 	"keywords": [],
 	"author": "Israel Itua",

package/babel.config.js

@@ -1,13 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      "@babel/preset-env",
-      {
-        targets: {
-          node: "current",
-        },
-      },
-    ],
-    "@babel/preset-typescript",
-  ],
-};

package/rollup.config.js

@@ -1,43 +0,0 @@
-import typescript from "rollup-plugin-typescript2";
-import commonjs from "@rollup/plugin-commonjs";
-import external from "rollup-plugin-peer-deps-external";
-import resolve from "@rollup/plugin-node-resolve";
-import postcss from "rollup-plugin-postcss";
-import json from "@rollup/plugin-json";
-import pkg from "./package.json";
-
-export default {
-  input: "src/index.tsx",
-  output: [
-    {
-      file: pkg.main,
-      format: "cjs",
-      exports: "named",
-      sourcemap: true,
-    },
-    {
-      file: pkg.module,
-      format: "es",
-      exports: "named",
-      sourcemap: true,
-    },
-  ],
-  plugins: [
-    external(),
-    resolve({
-      browser: true,
-      preferBuiltins: false,
-    }),
-    json(),
-    typescript({
-      clean: true,
-    }),
-    commonjs(),
-    postcss({
-      extract: true,
-      modules: true,
-      minimize: true,
-      sourceMap: true,
-    }),
-  ],
-};

package/src/apis/handleNombaApiCall.ts

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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,35 +0,0 @@
-import { handleVendorApiCall } from "./handleVendorApiCall";
-
-interface CardCheckoutPayload {
-  orderReference: string;
-  cardDetails: string;
-  saveCard?: boolean;
-  accountId?: string;
-}
-
-export const useCardCheckout = async (payload: CardCheckoutPayload) => {
-  try {
-    const response = await handleVendorApiCall(
-      "/checkout/checkout-card-detail",
-      "POST",
-      {
-        ...payload,
-        key: "",
-        deviceInformation: {
-          httpBrowserLanguage: navigator.language,
-          httpBrowserJavaEnabled: "true",
-          httpBrowserJavaScriptEnabled: "true",
-          httpBrowserColorDepth: window.screen.colorDepth.toString(),
-          httpBrowserScreenHeight: window.screen.height.toString(),
-          httpBrowserScreenWidth: window.screen.width.toString(),
-          httpBrowserTimeDifference: new Date().getTimezoneOffset().toString(),
-          userAgentBrowserValue: navigator.userAgent,
-          deviceChannel: "Browser",
-        },
-      }
-    );
-    return response.data;
-  } catch (error: any) {
-    return error;
-  }
-};

package/src/apis/useCardCheckoutOtp.ts

@@ -1,21 +0,0 @@
-import { handleVendorApiCall } from "./handleVendorApiCall";
-
-interface OtpRequest {
-  otp: string;
-  orderReference: string | undefined;
-  transactionId?: string | undefined;
-  accountId?: string;
-}
-
-export const useCardCheckoutOtp = async (payload: OtpRequest) => {
-  try {
-    const response = await handleVendorApiCall(
-      "/checkout/checkout-card-otp",
-      "POST",
-      payload
-    );
-    return response.data;
-  } catch (error: any) {
-    return error;
-  }
-};

package/src/apis/useFetchUssdBanks.ts

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

package/src/apis/useGenerateQrCode.ts

@@ -1,13 +0,0 @@
-import { handleVendorApiCall } from "./handleVendorApiCall";
-
-export const useGenerateQrCode = async (orderReference: string) => {
-  try {
-    const response = await handleVendorApiCall(
-      `/checkout/qr/${orderReference}`,
-      "GET"
-    );
-    return response.data;
-  } catch (error: any) {
-    return error;
-  }
-};

package/src/apis/useGenerateToken.ts

@@ -1,30 +0,0 @@
-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,13 +0,0 @@
-import { handleVendorApiCall } from "./handleVendorApiCall";
-
-export const useGetOrder = async (orderReference: string) => {
-  try {
-    const response = await handleVendorApiCall(
-      `/checkout/order/${orderReference}`,
-      "GET"
-    );
-    return response.data;
-  } catch (error: any) {
-    return error;
-  }
-};

package/src/apis/useGetUssdCode.ts

@@ -1,28 +0,0 @@
-import { handleVendorApiCall } from "./handleVendorApiCall";
-
-interface UssdCodeRequest {
-  ussdBankId: string;
-  bankName: string;
-  bankCode: string;
-  processor: string;
-  processorCodeName: string;
-  ussdCodeFormat: string;
-  enabled: boolean;
-  promptMessage: string;
-}
-
-export const useGetUssdCode = async (payload: {
-  ussdCode: UssdCodeRequest;
-  orderId: string;
-}) => {
-  try {
-    const response = await handleVendorApiCall(
-      `/checkout/ussd/code`,
-      "POST",
-      payload
-    );
-    return response.data;
-  } catch (error: any) {
-    return error;
-  }
-};

package/src/apis/useNombaCheckout.ts

@@ -1,68 +0,0 @@
-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;
-				},
-			];
-		};
-		orderMetaData?: {
-			[key: string]: any;
-		};
-	};
-	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 {
-		console.log('🔗 Using LOCAL SDK version!', payload.order.orderMetaData);
-		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,12 +0,0 @@
-import { handleVendorApiCall } from "./handleVendorApiCall";
-
-export const useResendOtp = async (orderReference: string) => {
-  try {
-    const response = await handleVendorApiCall("/checkout/resend-otp", "POST", {
-      orderReference,
-    });
-    return response.data;
-  } catch (error: any) {
-    return error;
-  }
-};

package/src/apis/useVerifyOrderStatus.ts

@@ -1,14 +0,0 @@
-import { handleVendorApiCall } from "./handleVendorApiCall";
-
-export const useVerifyOrderStatus = async (orderReference: string) => {
-  try {
-    const response = await handleVendorApiCall(
-      "/checkout/confirm-transaction-receipt",
-      "POST",
-      { orderReference }
-    );
-    return response.data;
-  } catch (error: any) {
-    return error;
-  }
-};

package/src/assets/CloseIcon.tsx

@@ -1,19 +0,0 @@
-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'
-  >
-    <rect width='32' height='32' rx='16' fill='#F2F2F2' fillOpacity='0.64' />
-    <path
-      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/assets/Loader.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-
-const Loader = () => (
-  <svg
-    width="18"
-    height="21"
-    viewBox="0 0 18 21"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10.3203 8.49095L12.002 7.47669L13.6836 6.46243L15.3652 5.44817L17.0468 4.43393V0.545959L15.3652 1.56021L13.6836 2.57447L12.002 3.58872L10.3203 4.60297L8.63871 5.6172V7.56118L6.95709 6.54697L5.27546 5.53271L3.50974 4.51845L1.82811 3.5042L0.146484 2.48994V6.37789L1.82811 7.39215L3.50974 8.40641L5.19136 9.42067L6.87298 10.4349L8.5546 11.4492L6.87298 12.4634L5.19136 13.4777L3.50974 14.4919L1.82811 15.5062L0.146484 16.3514V20.2394L1.82811 19.2251L3.50974 18.2108L5.19136 17.1966L6.87298 16.1824L8.5546 15.1681V13.2241L10.2362 14.2383L11.9179 15.2526L13.5995 16.2669L15.2811 17.2811L16.9628 18.2954V14.4074L15.2811 13.3932L13.5995 12.3789L11.9179 11.3646L10.2362 10.3504L8.5546 9.33613L10.3203 8.49095Z"
-      fill="#121212"
-    />
-  </svg>
-);
-
-export default Loader;

package/src/components/NombaCheckoutModal.tsx

@@ -1,183 +0,0 @@
-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<{}, 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.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 { isLoading, isOpen, orderId } = this.state;
-
-    if (!isOpen) return null;
-
-    return (
-      <div style={modalStyles.overlay} onClick={this.handleClose}>
-        <div style={modalStyles.modal} onClick={(e) => e.stopPropagation()}>
-          <div style={modalStyles.content}>
-            {isLoading && (
-              <div style={modalStyles.loader}>
-                <div className='spinner'></div>
-                <Loader />
-              </div>
-            )}
-            <button style={modalStyles.closeButton} onClick={this.handleClose}>
-              <CloseIcon />
-            </button>
-
-            <iframe
-              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'
-              onLoad={this.handleIframeLoad}
-              id='checkout-sdk-iframe'
-              name='react-sdk'
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-const modalStyles: { [key: string]: React.CSSProperties } = {
-  overlay: {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    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',
-
-    ...(window.innerWidth <= 768 ? { width: '98vw', maxWidth: '98vw' } : {}),
-  },
-
-  header: {
-    position: 'relative',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  closeButton: {
-    position: 'absolute',
-    top: '16px',
-    right: '16px',
-    border: 'none',
-    background: 'transparent',
-  },
-  content: {
-    position: 'relative',
-  },
-  iframe: {
-    border: 'none',
-    borderRadius: '8px',
-    width: '100%',
-    maxHeight: '95vh',
-    height: '600px',
-    display: 'block',
-  },
-  loader: {
-    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',
-  },
-};
-
-export { NombaCheckoutModal };

package/src/eventBus.ts

@@ -1,25 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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>
-    );
-};