react-nomba-checkout-sdk 1.0.3 → 2.0.1

package/dist/index.js

@@ -4038,40 +4038,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*/];
         }
     });
 }); };
@@ -4079,9 +4073,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);
@@ -4098,26 +4092,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);
     };
@@ -4133,7 +4142,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;
 }(React.Component));