react-nomba-checkout-sdk 1.0.3 → 2.0.1

package/README.md

@@ -1,25 +1,28 @@
-# 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
-
-```bash
+```jsx
 import { useState } from 'react';
 import {
   useNombaCheckout,
@@ -27,7 +30,7 @@ import {
 } from 'react-nomba-checkout-sdk';
 import './App.css';
 
-//initialize nomba checkout
+// Initialize Nomba Checkout on app load
 InitializeNombaCheckout();
 
 function App() {
@@ -37,49 +40,76 @@ function App() {
     setIsLoading(true);
 
     const res = await useNombaCheckout({
-      accountId: 'accountid',
-      clientId: 'clientid',
-      clientSecret: 'clientsecret',
+      accountId: 'your-account-id',
+      clientId: 'your-client-id',
       order: {
-        callbackUrl: 'samplecallbackurl',
-        customerEmail: 'abcde@gmail.com',
-        amount: '10000.00',
+        callbackUrl: 'sample-url',
+        customerEmail: 'sample-email@gmail.com',
+        amount: '10.00',
         currency: 'NGN',
         splitRequest: {
           splitType: 'PERCENTAGE',
           splitList: [
             {
-              accountId: 'sample accountid',
+              accountId: 'your-account-id',
               value: '65.45',
             },
           ],
         },
       },
       tokenizeCard: 'true',
-      onSuccess: (orderReference) => {
-        //handle success
-        setIsLoading(false);
+      onCreateOrder: (orderReference) => {
+        console.log('Function called after the order is created');
         console.log({ orderReference });
+        setIsLoading(false);
       },
       onFailure: (err) => {
-        //handle failure
-        setIsLoading(false);
+        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>Vite pay checkout</h1>
-
+      <h1>Pay with Nomba</h1>
       <button onClick={handleCheckout}>
-        {isLoading ? 'Please wait...' : 'Pay with Nomba checkout'}
+        {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/useNombaCheckout.d.ts

@@ -19,12 +19,12 @@ 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 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

@@ -5,6 +5,7 @@ interface NombaCheckoutModalState {
     isLoading: boolean;
     isOpen: boolean;
     onClose: () => void;
+    onPaymentSuccess: (e: any) => void;
     environment: string;
 }
 declare class NombaCheckoutModal extends Component<{}, NombaCheckoutModalState> {
@@ -12,6 +13,7 @@ declare class NombaCheckoutModal extends Component<{}, NombaCheckoutModalState>
     handleOpen: (orderId: string) => void;
     handleClose: () => void;
     handleIframeLoad: () => void;
+    handleMessage: (event: MessageEvent) => void;
     componentDidMount(): void;
     componentWillUnmount(): void;
     render(): React.JSX.Element | null;

package/dist/index.d.ts

@@ -1,12 +1,12 @@
-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 };
+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, };

package/dist/index.esm.js

@@ -4036,40 +4036,34 @@ var EventBus = /** @class */ (function () {
 var eventBus = new EventBus();
 
 var useNombaCheckout = function (payload) { return __awaiter(undefined, undefined, undefined, function () {
-    var tokenResponse, response, error_1;
-    var _a, _b, _c, _d, _e;
-    return __generator(this, function (_f) {
-        switch (_f.label) {
+    var response, error_1;
+    var _a, _b, _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
             case 0:
-                _f.trys.push([0, 3, , 4]);
-                return [4 /*yield*/, useGenerateToken({
-                        clientId: payload.clientId,
-                        clientSecret: payload.clientSecret,
-                        accountId: payload.accountId,
-                        environment: payload.environment,
-                    })];
-            case 1:
-                tokenResponse = _f.sent();
+                _d.trys.push([0, 2, , 3]);
                 return [4 /*yield*/, handleNombaApiCall('/checkout/order', 'POST', {
                         order: __assign(__assign({}, payload.order), { accountId: payload.accountId }),
                         tokenizeCard: payload.tokenizeCard,
                     }, {
-                        Authorization: "Bearer ".concat((_b = (_a = tokenResponse === null || tokenResponse === undefined ? undefined : tokenResponse.data) === null || _a === undefined ? undefined : _a.data) === null || _b === undefined ? undefined : _b.access_token),
                         accountId: payload.accountId,
+                        public_key: payload.clientId,
+                        'X-Nomba-Integration': 'react-sdk',
                     }, payload.environment)];
-            case 2:
-                response = _f.sent();
+            case 1:
+                response = _d.sent();
                 eventBus.emit('openModal', {
-                    orderId: (_d = (_c = response === null || response === undefined ? undefined : response.data) === null || _c === undefined ? undefined : _c.data) === null || _d === undefined ? undefined : _d.orderReference,
+                    orderId: (_b = (_a = response === null || response === undefined ? undefined : response.data) === null || _a === undefined ? undefined : _a.data) === null || _b === undefined ? undefined : _b.orderReference,
                     onClose: payload.onClose,
+                    onPaymentSuccess: payload.onPaymentSuccess,
                     environment: payload.environment,
                 });
-                return [2 /*return*/, response.data];
-            case 3:
-                error_1 = _f.sent();
-                (_e = payload.onFailure) === null || _e === undefined ? undefined : _e.call(payload, error_1);
+                return [2 /*return*/, payload.onCreateOrder(response.data)];
+            case 2:
+                error_1 = _d.sent();
+                (_c = payload.onFailure) === null || _c === undefined ? undefined : _c.call(payload, error_1);
                 return [2 /*return*/, error_1];
-            case 4: return [2 /*return*/];
+            case 3: return [2 /*return*/];
         }
     });
 }); };
@@ -4077,9 +4071,9 @@ var useNombaCheckout = function (payload) { return __awaiter(undefined, undefine
 var Loader = function () { return (React.createElement("svg", { width: "18", height: "21", viewBox: "0 0 18 21", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     React.createElement("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" }))); };
 
-var CloseIcon = function () { return (React.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("rect", { width: "32", height: "32", rx: "16", fill: "#F2F2F2", "fill-opacity": "0.64" }),
-    React.createElement("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" }))); };
+var CloseIcon = function () { return (React.createElement("svg", { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("rect", { width: '32', height: '32', rx: '16', fill: '#F2F2F2', fillOpacity: '0.64' }),
+    React.createElement("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' }))); };
 
 var NombaCheckoutModal = /** @class */ (function (_super) {
     __extends(NombaCheckoutModal, _super);
@@ -4096,26 +4090,41 @@ var NombaCheckoutModal = /** @class */ (function (_super) {
         _this.handleIframeLoad = function () {
             _this.setState({ isLoading: false });
         };
+        _this.handleMessage = function (event) {
+            var _a, _b, _c;
+            if (((_a = event.data) === null || _a === undefined ? undefined : _a.type) === 'onSuccess') {
+                (_b = _this.state) === null || _b === undefined ? undefined : _b.onPaymentSuccess((_c = event.data) === null || _c === undefined ? undefined : _c.orderDetails);
+            }
+        };
         _this.state = {
             orderId: '',
             isLoading: true,
             isOpen: false,
             onClose: function () { },
+            onPaymentSuccess: function () { },
             environment: 'live',
         };
         return _this;
     }
     NombaCheckoutModal.prototype.componentDidMount = function () {
         var _this = this;
+        window.addEventListener('message', this.handleMessage);
         eventBus.on('openModal', function (_a) {
-            var orderId = _a.orderId, onClose = _a.onClose, environment = _a.environment;
-            _this.setState({ isOpen: true, orderId: orderId, onClose: onClose, environment: environment });
+            var orderId = _a.orderId, onClose = _a.onClose, environment = _a.environment, onPaymentSuccess = _a.onPaymentSuccess;
+            _this.setState({
+                isOpen: true,
+                orderId: orderId,
+                onClose: onClose,
+                environment: environment,
+                onPaymentSuccess: onPaymentSuccess,
+            });
         });
         eventBus.on('closeModal', function () {
             _this.setState({ isOpen: false });
         });
     };
     NombaCheckoutModal.prototype.componentWillUnmount = function () {
+        window.removeEventListener('message', this.handleMessage);
         eventBus.off('openModal', this.handleOpen);
         eventBus.off('closeModal', this.handleClose);
     };
@@ -4131,7 +4140,7 @@ var NombaCheckoutModal = /** @class */ (function (_super) {
                         React.createElement(Loader, null))),
                     React.createElement("button", { style: modalStyles.closeButton, onClick: this.handleClose },
                         React.createElement(CloseIcon, null)),
-                    React.createElement("iframe", { src: "https://checkout.nomba.com/".concat(this.state.environment === 'sandbox' ? 'sandbox' : 'pay', "/").concat(orderId), allow: 'clipboard-write clipboard-read', width: '100%', height: '80vh', style: modalStyles.iframe, title: 'Nomba checkout', onLoad: this.handleIframeLoad })))));
+                    React.createElement("iframe", { src: "https://checkout.nomba.com/".concat(this.state.environment === 'sandbox' ? 'sandbox' : 'pay', "/").concat(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' })))));
     };
     return NombaCheckoutModal;
 }(Component));