react-nomba-checkout-sdk 1.0.0 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
+ var ReactDOM = require('react-dom/client');
4
5
 
5
6
  /******************************************************************************
6
7
  Copyright (c) Microsoft Corporation.
@@ -87,144 +88,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
87
88
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
88
89
  };
89
90
 
90
- 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" },
91
- 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" }))); };
92
-
93
- 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" },
94
- React.createElement("rect", { width: "32", height: "32", rx: "16", fill: "#F2F2F2", "fill-opacity": "0.64" }),
95
- 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" }))); };
96
-
97
- var NombaCheckoutModal = /** @class */ (function (_super) {
98
- __extends(NombaCheckoutModal, _super);
99
- function NombaCheckoutModal(props) {
100
- var _this = _super.call(this, props) || this;
101
- _this.handleClose = function () {
102
- var _a, _b;
103
- (_b = (_a = _this.props).onClose) === null || _b === undefined ? undefined : _b.call(_a);
104
- };
105
- _this.handleIframeLoad = function () {
106
- _this.setState({ isLoading: false });
107
- };
108
- _this.state = {
109
- isLoading: true,
110
- };
111
- return _this;
112
- }
113
- NombaCheckoutModal.prototype.render = function () {
114
- var orderId = this.props.orderId;
115
- var isLoading = this.state.isLoading;
116
- return (React.createElement("div", { style: modalStyles.overlay, onClick: this.handleClose },
117
- React.createElement("div", { style: modalStyles.modal, onClick: function (e) { return e.stopPropagation(); } },
118
- React.createElement("div", { style: modalStyles.content },
119
- isLoading && (React.createElement("div", { style: modalStyles.loader },
120
- React.createElement("div", { className: "spinner" }),
121
- React.createElement(Loader, null))),
122
- React.createElement("button", { style: modalStyles.closeButton, onClick: this.handleClose },
123
- React.createElement(CloseIcon, null)),
124
- React.createElement("iframe", { src: "https://checkout.nomba.com/pay/".concat(orderId), allow: "clipboard-write clipboard-read", width: "100%", height: "80vh", style: modalStyles.iframe, title: "Nomba checkout", onLoad: this.handleIframeLoad })))));
125
- };
126
- return NombaCheckoutModal;
127
- }(React.Component));
128
- var modalStyles = {
129
- overlay: {
130
- position: "fixed",
131
- top: 0,
132
- left: 0,
133
- right: 0,
134
- bottom: 0,
135
- backgroundColor: "rgba(0, 0, 0, 0.5)",
136
- display: "flex",
137
- justifyContent: "center",
138
- alignItems: "center",
139
- zIndex: 9999,
140
- },
141
- modal: {
142
- backgroundColor: "white",
143
- width: "100%",
144
- maxWidth: "60vw",
145
- borderRadius: "8px",
146
- boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
147
- position: "relative",
148
- height: "600px",
149
- maxHeight: "95vh",
150
- },
151
- header: {
152
- position: "relative",
153
- display: "flex",
154
- justifyContent: "space-between",
155
- alignItems: "center",
156
- },
157
- closeButton: {
158
- position: "absolute",
159
- top: "16px",
160
- right: "16px",
161
- border: "none",
162
- background: "transparent",
163
- },
164
- content: {
165
- position: "relative",
166
- },
167
- iframe: {
168
- border: "none",
169
- borderRadius: "8px",
170
- width: "100%",
171
- maxHeight: "95vh",
172
- height: "600px",
173
- display: "block",
174
- },
175
- loader: {
176
- position: "absolute",
177
- top: 0,
178
- left: 0,
179
- width: "100%",
180
- height: "100%",
181
- backgroundColor: "rgba(255, 255, 255, 0.8)",
182
- display: "flex",
183
- flexDirection: "column",
184
- alignItems: "center",
185
- justifyContent: "center",
186
- fontSize: "18px",
187
- fontWeight: "bold",
188
- },
189
- };
190
-
191
- var NombaCheckoutButton = /** @class */ (function (_super) {
192
- __extends(NombaCheckoutButton, _super);
193
- function NombaCheckoutButton(props) {
194
- var _this = _super.call(this, props) || this;
195
- _this.handleClose = function () {
196
- var _a, _b;
197
- _this.setState({ showModal: false });
198
- (_b = (_a = _this.props).onClose) === null || _b === undefined ? undefined : _b.call(_a);
199
- };
200
- _this.state = {
201
- showModal: false,
202
- };
203
- return _this;
204
- }
205
- NombaCheckoutButton.prototype.render = function () {
206
- var _this = this;
207
- var _a = this.props, orderId = _a.orderId, children = _a.children, buttonStyle = _a.buttonStyle, buttonText = _a.buttonText;
208
- var showModal = this.state.showModal;
209
- return (React.createElement("div", null,
210
- React.createElement("button", { style: buttonStyle || styles.button, onClick: showModal
211
- ? function () { return _this.handleClose(); }
212
- : function () { return _this.setState({ showModal: true }); } }, children || buttonText || "Pay with Nomba"),
213
- showModal && (React.createElement(NombaCheckoutModal, { orderId: orderId, onClose: this.handleClose }))));
214
- };
215
- return NombaCheckoutButton;
216
- }(React.Component));
217
- var styles = {
218
- button: {
219
- height: "48px",
220
- width: "100%",
221
- background: "#ffcc00",
222
- fontSize: "16px",
223
- fontWeight: 500,
224
- borderRadius: "8px",
225
- },
226
- };
227
-
228
91
  function bind(fn, thisArg) {
229
92
  return function wrap() {
230
93
  return fn.apply(thisArg, arguments);
@@ -3928,16 +3791,17 @@ axios.HttpStatusCode = HttpStatusCode;
3928
3791
 
3929
3792
  axios.default = axios;
3930
3793
 
3931
- var handleApiCall = function (url, method, body, customHeaders) { return __awaiter(undefined, undefined, undefined, function () {
3932
- var options, response;
3794
+ var handleVendorApiCall = function (url, method, body, customHeaders, environment) { return __awaiter(undefined, undefined, undefined, function () {
3795
+ var baseUrl, options, response;
3933
3796
  return __generator(this, function (_a) {
3934
3797
  switch (_a.label) {
3935
3798
  case 0:
3799
+ baseUrl = 'https://api.nomba.com/v1';
3936
3800
  options = {
3937
3801
  method: method,
3938
- headers: __assign({ "content-type": "application/json" }, customHeaders),
3802
+ headers: __assign({ 'content-type': 'application/json' }, customHeaders),
3939
3803
  data: body && body,
3940
- url: "https://vendor-api.kudi.ai/v1".concat(url),
3804
+ url: "".concat(baseUrl).concat(url),
3941
3805
  };
3942
3806
  return [4 /*yield*/, axios(options)];
3943
3807
  case 1:
@@ -3953,7 +3817,7 @@ var useGetOrder = function (orderReference) { return __awaiter(undefined, undefi
3953
3817
  switch (_a.label) {
3954
3818
  case 0:
3955
3819
  _a.trys.push([0, 2, , 3]);
3956
- return [4 /*yield*/, handleApiCall("/checkout/order/".concat(orderReference), "GET")];
3820
+ return [4 /*yield*/, handleVendorApiCall("/checkout/order/".concat(orderReference), "GET")];
3957
3821
  case 1:
3958
3822
  response = _a.sent();
3959
3823
  return [2 /*return*/, response.data];
@@ -3971,7 +3835,7 @@ var useCardCheckout = function (payload) { return __awaiter(undefined, undefined
3971
3835
  switch (_a.label) {
3972
3836
  case 0:
3973
3837
  _a.trys.push([0, 2, , 3]);
3974
- return [4 /*yield*/, handleApiCall("/checkout/checkout-card-detail", "POST", __assign(__assign({}, payload), { key: "", deviceInformation: {
3838
+ return [4 /*yield*/, handleVendorApiCall("/checkout/checkout-card-detail", "POST", __assign(__assign({}, payload), { key: "", deviceInformation: {
3975
3839
  httpBrowserLanguage: navigator.language,
3976
3840
  httpBrowserJavaEnabled: "true",
3977
3841
  httpBrowserJavaScriptEnabled: "true",
@@ -3999,7 +3863,7 @@ var useCardCheckoutOtp = function (payload) { return __awaiter(undefined, undefi
3999
3863
  switch (_a.label) {
4000
3864
  case 0:
4001
3865
  _a.trys.push([0, 2, , 3]);
4002
- return [4 /*yield*/, handleApiCall("/checkout/checkout-card-otp", "POST", payload)];
3866
+ return [4 /*yield*/, handleVendorApiCall("/checkout/checkout-card-otp", "POST", payload)];
4003
3867
  case 1:
4004
3868
  response = _a.sent();
4005
3869
  return [2 /*return*/, response.data];
@@ -4017,7 +3881,7 @@ var useGenerateQrCode = function (orderReference) { return __awaiter(undefined,
4017
3881
  switch (_a.label) {
4018
3882
  case 0:
4019
3883
  _a.trys.push([0, 2, , 3]);
4020
- return [4 /*yield*/, handleApiCall("/checkout/qr/".concat(orderReference), "GET")];
3884
+ return [4 /*yield*/, handleVendorApiCall("/checkout/qr/".concat(orderReference), "GET")];
4021
3885
  case 1:
4022
3886
  response = _a.sent();
4023
3887
  return [2 /*return*/, response.data];
@@ -4035,7 +3899,7 @@ var useVerifyOrderStatus = function (orderReference) { return __awaiter(undefine
4035
3899
  switch (_a.label) {
4036
3900
  case 0:
4037
3901
  _a.trys.push([0, 2, , 3]);
4038
- return [4 /*yield*/, handleApiCall("/checkout/confirm-transaction-receipt", "POST", { orderReference: orderReference })];
3902
+ return [4 /*yield*/, handleVendorApiCall("/checkout/confirm-transaction-receipt", "POST", { orderReference: orderReference })];
4039
3903
  case 1:
4040
3904
  response = _a.sent();
4041
3905
  return [2 /*return*/, response.data];
@@ -4053,7 +3917,7 @@ var useResendOtp = function (orderReference) { return __awaiter(undefined, undef
4053
3917
  switch (_a.label) {
4054
3918
  case 0:
4055
3919
  _a.trys.push([0, 2, , 3]);
4056
- return [4 /*yield*/, handleApiCall("/checkout/resend-otp", "POST", {
3920
+ return [4 /*yield*/, handleVendorApiCall("/checkout/resend-otp", "POST", {
4057
3921
  orderReference: orderReference,
4058
3922
  })];
4059
3923
  case 1:
@@ -4073,7 +3937,7 @@ var useFetchUssdBanks = function () { return __awaiter(undefined, undefined, und
4073
3937
  switch (_a.label) {
4074
3938
  case 0:
4075
3939
  _a.trys.push([0, 2, , 3]);
4076
- return [4 /*yield*/, handleApiCall("/checkout/ussd/banks", "GET")];
3940
+ return [4 /*yield*/, handleVendorApiCall("/checkout/ussd/banks", "GET")];
4077
3941
  case 1:
4078
3942
  response = _a.sent();
4079
3943
  return [2 /*return*/, response.data];
@@ -4091,7 +3955,7 @@ var useGetUssdCode = function (payload) { return __awaiter(undefined, undefined,
4091
3955
  switch (_a.label) {
4092
3956
  case 0:
4093
3957
  _a.trys.push([0, 2, , 3]);
4094
- return [4 /*yield*/, handleApiCall("/checkout/ussd/code", "POST", payload)];
3958
+ return [4 /*yield*/, handleVendorApiCall("/checkout/ussd/code", "POST", payload)];
4095
3959
  case 1:
4096
3960
  response = _a.sent();
4097
3961
  return [2 /*return*/, response.data];
@@ -4103,14 +3967,264 @@ var useGetUssdCode = function (payload) { return __awaiter(undefined, undefined,
4103
3967
  });
4104
3968
  }); };
4105
3969
 
4106
- exports.NombaCheckoutButton = NombaCheckoutButton;
4107
- exports.NombaCheckoutModal = NombaCheckoutModal;
3970
+ var handleNombaApiCall = function (url, method, body, customHeaders, environment) { return __awaiter(undefined, undefined, undefined, function () {
3971
+ var baseUrl, options, response;
3972
+ return __generator(this, function (_a) {
3973
+ switch (_a.label) {
3974
+ case 0:
3975
+ baseUrl = environment === 'sandbox'
3976
+ ? 'https://sandbox.nomba.com/v1'
3977
+ : 'https://api.nomba.com/v1';
3978
+ options = {
3979
+ method: method,
3980
+ headers: __assign({ 'content-type': 'application/json' }, customHeaders),
3981
+ data: body && body,
3982
+ url: "".concat(baseUrl).concat(url),
3983
+ };
3984
+ return [4 /*yield*/, axios(options)];
3985
+ case 1:
3986
+ response = _a.sent();
3987
+ return [2 /*return*/, response];
3988
+ }
3989
+ });
3990
+ }); };
3991
+
3992
+ var useGenerateToken = function (payload) { return __awaiter(undefined, undefined, undefined, function () {
3993
+ var response, error_1;
3994
+ return __generator(this, function (_a) {
3995
+ switch (_a.label) {
3996
+ case 0:
3997
+ _a.trys.push([0, 2, , 3]);
3998
+ return [4 /*yield*/, handleNombaApiCall('/auth/token/issue', 'POST', {
3999
+ grant_type: 'client_credentials',
4000
+ client_id: payload.clientId,
4001
+ client_secret: payload.clientSecret,
4002
+ }, {
4003
+ accountId: payload.accountId,
4004
+ }, payload.environment)];
4005
+ case 1:
4006
+ response = _a.sent();
4007
+ return [2 /*return*/, response];
4008
+ case 2:
4009
+ error_1 = _a.sent();
4010
+ return [2 /*return*/, error_1];
4011
+ case 3: return [2 /*return*/];
4012
+ }
4013
+ });
4014
+ }); };
4015
+
4016
+ var EventBus = /** @class */ (function () {
4017
+ function EventBus() {
4018
+ this.events = {};
4019
+ }
4020
+ EventBus.prototype.on = function (event, listener) {
4021
+ if (!this.events[event]) {
4022
+ this.events[event] = [];
4023
+ }
4024
+ this.events[event].push(listener);
4025
+ };
4026
+ EventBus.prototype.emit = function (event, data) {
4027
+ if (this.events[event]) {
4028
+ this.events[event].forEach(function (listener) { return listener(data); });
4029
+ }
4030
+ };
4031
+ EventBus.prototype.off = function (event, listener) {
4032
+ if (this.events[event]) {
4033
+ this.events[event] = this.events[event].filter(function (l) { return l !== listener; });
4034
+ }
4035
+ };
4036
+ return EventBus;
4037
+ }());
4038
+ var eventBus = new EventBus();
4039
+
4040
+ var useNombaCheckout = function (payload) { return __awaiter(undefined, undefined, undefined, function () {
4041
+ var tokenResponse, response, error_1;
4042
+ var _a, _b, _c, _d, _e;
4043
+ return __generator(this, function (_f) {
4044
+ switch (_f.label) {
4045
+ case 0:
4046
+ _f.trys.push([0, 3, , 4]);
4047
+ return [4 /*yield*/, useGenerateToken({
4048
+ clientId: payload.clientId,
4049
+ clientSecret: payload.clientSecret,
4050
+ accountId: payload.accountId,
4051
+ environment: payload.environment,
4052
+ })];
4053
+ case 1:
4054
+ tokenResponse = _f.sent();
4055
+ return [4 /*yield*/, handleNombaApiCall('/checkout/order', 'POST', {
4056
+ order: __assign(__assign({}, payload.order), { accountId: payload.accountId }),
4057
+ tokenizeCard: payload.tokenizeCard,
4058
+ }, {
4059
+ 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),
4060
+ accountId: payload.accountId,
4061
+ }, payload.environment)];
4062
+ case 2:
4063
+ response = _f.sent();
4064
+ eventBus.emit('openModal', {
4065
+ orderId: (_d = (_c = response === null || response === undefined ? undefined : response.data) === null || _c === undefined ? undefined : _c.data) === null || _d === undefined ? undefined : _d.orderReference,
4066
+ onClose: payload.onClose,
4067
+ environment: payload.environment,
4068
+ });
4069
+ return [2 /*return*/, response.data];
4070
+ case 3:
4071
+ error_1 = _f.sent();
4072
+ (_e = payload.onFailure) === null || _e === undefined ? undefined : _e.call(payload, error_1);
4073
+ return [2 /*return*/, error_1];
4074
+ case 4: return [2 /*return*/];
4075
+ }
4076
+ });
4077
+ }); };
4078
+
4079
+ 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" },
4080
+ 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" }))); };
4081
+
4082
+ 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" },
4083
+ React.createElement("rect", { width: "32", height: "32", rx: "16", fill: "#F2F2F2", "fill-opacity": "0.64" }),
4084
+ 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" }))); };
4085
+
4086
+ var NombaCheckoutModal = /** @class */ (function (_super) {
4087
+ __extends(NombaCheckoutModal, _super);
4088
+ function NombaCheckoutModal(props) {
4089
+ var _this = _super.call(this, props) || this;
4090
+ _this.handleOpen = function (orderId) {
4091
+ _this.setState({ isOpen: true, orderId: orderId });
4092
+ };
4093
+ _this.handleClose = function () {
4094
+ var _a, _b;
4095
+ (_b = (_a = _this.state).onClose) === null || _b === undefined ? undefined : _b.call(_a);
4096
+ _this.setState({ isOpen: false });
4097
+ };
4098
+ _this.handleIframeLoad = function () {
4099
+ _this.setState({ isLoading: false });
4100
+ };
4101
+ _this.state = {
4102
+ orderId: '',
4103
+ isLoading: true,
4104
+ isOpen: false,
4105
+ onClose: function () { },
4106
+ environment: 'live',
4107
+ };
4108
+ return _this;
4109
+ }
4110
+ NombaCheckoutModal.prototype.componentDidMount = function () {
4111
+ var _this = this;
4112
+ eventBus.on('openModal', function (_a) {
4113
+ var orderId = _a.orderId, onClose = _a.onClose, environment = _a.environment;
4114
+ _this.setState({ isOpen: true, orderId: orderId, onClose: onClose, environment: environment });
4115
+ });
4116
+ eventBus.on('closeModal', function () {
4117
+ _this.setState({ isOpen: false });
4118
+ });
4119
+ };
4120
+ NombaCheckoutModal.prototype.componentWillUnmount = function () {
4121
+ eventBus.off('openModal', this.handleOpen);
4122
+ eventBus.off('closeModal', this.handleClose);
4123
+ };
4124
+ NombaCheckoutModal.prototype.render = function () {
4125
+ var _a = this.state, isLoading = _a.isLoading, isOpen = _a.isOpen, orderId = _a.orderId;
4126
+ if (!isOpen)
4127
+ return null;
4128
+ return (React.createElement("div", { style: modalStyles.overlay, onClick: this.handleClose },
4129
+ React.createElement("div", { style: modalStyles.modal, onClick: function (e) { return e.stopPropagation(); } },
4130
+ React.createElement("div", { style: modalStyles.content },
4131
+ isLoading && (React.createElement("div", { style: modalStyles.loader },
4132
+ React.createElement("div", { className: 'spinner' }),
4133
+ React.createElement(Loader, null))),
4134
+ React.createElement("button", { style: modalStyles.closeButton, onClick: this.handleClose },
4135
+ React.createElement(CloseIcon, null)),
4136
+ 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 })))));
4137
+ };
4138
+ return NombaCheckoutModal;
4139
+ }(React.Component));
4140
+ var modalStyles = {
4141
+ overlay: {
4142
+ position: 'fixed',
4143
+ top: 0,
4144
+ left: 0,
4145
+ right: 0,
4146
+ bottom: 0,
4147
+ backgroundColor: 'rgba(0, 0, 0, 0.5)',
4148
+ display: 'flex',
4149
+ justifyContent: 'center',
4150
+ alignItems: 'center',
4151
+ zIndex: 9999,
4152
+ },
4153
+ modal: {
4154
+ backgroundColor: 'white',
4155
+ width: '100%',
4156
+ maxWidth: '60vw',
4157
+ borderRadius: '8px',
4158
+ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
4159
+ position: 'relative',
4160
+ height: '600px',
4161
+ maxHeight: '95vh',
4162
+ },
4163
+ header: {
4164
+ position: 'relative',
4165
+ display: 'flex',
4166
+ justifyContent: 'space-between',
4167
+ alignItems: 'center',
4168
+ },
4169
+ closeButton: {
4170
+ position: 'absolute',
4171
+ top: '16px',
4172
+ right: '16px',
4173
+ border: 'none',
4174
+ background: 'transparent',
4175
+ },
4176
+ content: {
4177
+ position: 'relative',
4178
+ },
4179
+ iframe: {
4180
+ border: 'none',
4181
+ borderRadius: '8px',
4182
+ width: '100%',
4183
+ maxHeight: '95vh',
4184
+ height: '600px',
4185
+ display: 'block',
4186
+ },
4187
+ loader: {
4188
+ position: 'absolute',
4189
+ top: 0,
4190
+ left: 0,
4191
+ width: '100%',
4192
+ height: '100%',
4193
+ backgroundColor: 'rgba(255, 255, 255, 0.8)',
4194
+ display: 'flex',
4195
+ flexDirection: 'column',
4196
+ alignItems: 'center',
4197
+ justifyContent: 'center',
4198
+ fontSize: '18px',
4199
+ fontWeight: 'bold',
4200
+ },
4201
+ };
4202
+
4203
+ var root = null;
4204
+ var InitializeNombaCheckout = function () {
4205
+ var modalDivId = "nomba-checkout-modal";
4206
+ var modalContainer = document.getElementById(modalDivId);
4207
+ if (!modalContainer) {
4208
+ modalContainer = document.createElement("div");
4209
+ modalContainer.id = modalDivId;
4210
+ document.body.appendChild(modalContainer);
4211
+ }
4212
+ if (!root) {
4213
+ root = ReactDOM.createRoot(modalContainer);
4214
+ }
4215
+ root.render(React.createElement("div", null,
4216
+ React.createElement(NombaCheckoutModal, null)));
4217
+ };
4218
+
4219
+ exports.InitializeNombaCheckout = InitializeNombaCheckout;
4108
4220
  exports.useCardCheckout = useCardCheckout;
4109
4221
  exports.useCardCheckoutOtp = useCardCheckoutOtp;
4110
4222
  exports.useFetchUssdBanks = useFetchUssdBanks;
4111
4223
  exports.useGenerateQrCode = useGenerateQrCode;
4224
+ exports.useGenerateToken = useGenerateToken;
4112
4225
  exports.useGetOrder = useGetOrder;
4113
4226
  exports.useGetUssdCode = useGetUssdCode;
4227
+ exports.useNombaCheckout = useNombaCheckout;
4114
4228
  exports.useResendOtp = useResendOtp;
4115
4229
  exports.useVerifyOrderStatus = useVerifyOrderStatus;
4116
4230
  //# sourceMappingURL=index.js.map