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