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/README.md +85 -0
- package/dist/apis/handleNombaApiCall.d.ts +3 -0
- package/dist/apis/handleVendorApiCall.d.ts +3 -0
- package/dist/apis/useGenerateToken.d.ts +8 -0
- package/dist/apis/useNombaCheckout.d.ts +30 -0
- package/dist/components/NombaCheckoutModal.d.ts +12 -9
- package/dist/eventBus.d.ts +8 -0
- package/dist/helpers/InitializeNombaCheckout.d.ts +1 -0
- package/dist/index.d.ts +4 -3
- package/dist/index.esm.js +264 -151
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +266 -152
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/apis/handleNombaApiCall.ts +26 -0
- package/src/apis/handleVendorApiCall.ts +26 -0
- package/src/apis/useCardCheckout.ts +2 -2
- package/src/apis/useCardCheckoutOtp.ts +2 -2
- package/src/apis/useFetchUssdBanks.ts +2 -2
- package/src/apis/useGenerateQrCode.ts +2 -2
- package/src/apis/useGenerateToken.ts +30 -0
- package/src/apis/useGetOrder.ts +2 -2
- package/src/apis/useGetUssdCode.ts +2 -2
- package/src/apis/useNombaCheckout.ts +70 -0
- package/src/apis/useResendOtp.ts +2 -2
- package/src/apis/useVerifyOrderStatus.ts +2 -2
- package/src/components/NombaCheckoutModal.tsx +95 -62
- package/src/eventBus.ts +25 -0
- package/src/helpers/InitializeNombaCheckout.tsx +26 -0
- package/src/index.tsx +6 -5
- package/dist/apis/handleApiCall.d.ts +0 -3
- package/dist/components/NombaCheckoutButton.d.ts +0 -17
- package/src/apis/handleApiCall.ts +0 -20
- package/src/components/NombaCheckoutButton.tsx +0 -67
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
|
|
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({
|
|
3802
|
+
headers: __assign({ 'content-type': 'application/json' }, customHeaders),
|
|
3939
3803
|
data: body && body,
|
|
3940
|
-
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*/,
|
|
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*/,
|
|
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*/,
|
|
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*/,
|
|
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*/,
|
|
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*/,
|
|
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*/,
|
|
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*/,
|
|
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
|
-
|
|
4107
|
-
|
|
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
|