@pinerohit11/testwidget 0.1.33 → 0.1.35
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.cjs +11 -1186
- package/dist/index.d.cts +1 -9
- package/dist/index.d.ts +1 -9
- package/dist/index.js +12 -1184
- package/package.json +2 -3
- package/dist/index.css +0 -544
package/dist/index.js
CHANGED
@@ -1,1187 +1,15 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
8
|
-
var __spreadValues = (a, b) => {
|
9
|
-
for (var prop in b || (b = {}))
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
12
|
-
if (__getOwnPropSymbols)
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
14
|
-
if (__propIsEnum.call(b, prop))
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
16
|
-
}
|
17
|
-
return a;
|
18
|
-
};
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
1
|
+
// src/app/components/RequestPayment/RequestPayment.tsx
|
2
|
+
import { useState } from "react";
|
3
|
+
import axios from "axios";
|
20
4
|
|
21
|
-
// src/app/
|
22
|
-
import "
|
5
|
+
// src/app/components/Loader/Loader.tsx
|
6
|
+
import React3 from "react";
|
23
7
|
|
24
|
-
// src/app/components/
|
25
|
-
import
|
26
|
-
|
27
|
-
|
28
|
-
import "bootstrap
|
29
|
-
function PaywithFractal({ name, amount, orderId, fractalPayClientKey }) {
|
30
|
-
const baseUrl = "http://192.168.1.52:8082/";
|
31
|
-
const masterBaseUrl = "http://192.168.1.52:8081/";
|
32
|
-
console.log(name, "name", window == null ? void 0 : window.DatacapWebToken);
|
33
|
-
const [dcToken, setDcToken] = useState("");
|
34
|
-
const [error, setError] = useState({});
|
35
|
-
const [toggleQr, setToggleQr] = useState(false);
|
36
|
-
const [formData, setFormData] = useState({
|
37
|
-
name: "John Doe",
|
38
|
-
card_number: "4761 7310 0000 0043",
|
39
|
-
exp_month: "12",
|
40
|
-
exp_year: "2024",
|
41
|
-
cvv: "201",
|
42
|
-
zip: ""
|
43
|
-
});
|
44
|
-
const [loading, setLoading] = useState(false);
|
45
|
-
const [show, setShow] = useState(false);
|
46
|
-
const handleSubmit = async (e) => {
|
47
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
48
|
-
e.preventDefault();
|
49
|
-
const data = {
|
50
|
-
description: "widget payment",
|
51
|
-
amount: amount || "1.00",
|
52
|
-
phone_number: "1234567908",
|
53
|
-
zip: formData.zip,
|
54
|
-
orderId: orderId || "",
|
55
|
-
fractalpayPublicKey: fractalPayClientKey
|
56
|
-
};
|
57
|
-
if (Object.keys(error).length < 1) {
|
58
|
-
try {
|
59
|
-
setLoading(true);
|
60
|
-
const res = await axios.post(`${baseUrl}create-widget-order`, data, {
|
61
|
-
headers: {
|
62
|
-
"Content-Type": "application/json"
|
63
|
-
}
|
64
|
-
});
|
65
|
-
if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
|
66
|
-
console.log("token", (_b = res.data) == null ? void 0 : _b.data);
|
67
|
-
setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
|
68
|
-
const tokenCallback = async (response) => {
|
69
|
-
var _a2, _b2, _c2;
|
70
|
-
console.log("response for token call back", response);
|
71
|
-
if (response.Error) {
|
72
|
-
alert("if");
|
73
|
-
console.log("Error: ", response);
|
74
|
-
setLoading(false);
|
75
|
-
} else {
|
76
|
-
const headers = {
|
77
|
-
"Content-Type": "application/x-www-form-urlencoded"
|
78
|
-
};
|
79
|
-
const quickData = __spreadValues({
|
80
|
-
name: formData.name,
|
81
|
-
postal_code: formData.zip
|
82
|
-
}, response);
|
83
|
-
try {
|
84
|
-
const resp = await axios.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
|
85
|
-
headers
|
86
|
-
});
|
87
|
-
setLoading(false);
|
88
|
-
console.log("quick response", resp);
|
89
|
-
if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
|
90
|
-
console.log("Payment success!", resp == null ? void 0 : resp.data);
|
91
|
-
setFormData({
|
92
|
-
name: "John Doe",
|
93
|
-
card_number: "4761 7310 0000 0043",
|
94
|
-
exp_month: "12",
|
95
|
-
exp_year: "2024",
|
96
|
-
cvv: "201",
|
97
|
-
zip: ""
|
98
|
-
});
|
99
|
-
} else {
|
100
|
-
console.log("Payment failed!", resp == null ? void 0 : resp.data);
|
101
|
-
}
|
102
|
-
} catch (error2) {
|
103
|
-
console.log("Error: ", error2);
|
104
|
-
setLoading(false);
|
105
|
-
}
|
106
|
-
}
|
107
|
-
};
|
108
|
-
window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
|
109
|
-
} else {
|
110
|
-
setLoading(false);
|
111
|
-
console.log("res", (_g = res.data) == null ? void 0 : _g.data);
|
112
|
-
}
|
113
|
-
} catch (error2) {
|
114
|
-
setLoading(false);
|
115
|
-
console.log(error2);
|
116
|
-
}
|
117
|
-
}
|
118
|
-
};
|
119
|
-
const handleCardFormat = (numericValue) => {
|
120
|
-
const cleaned = ("" + numericValue).replace(/\D/g, "");
|
121
|
-
const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
|
122
|
-
if (match) {
|
123
|
-
return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
|
124
|
-
}
|
125
|
-
return numericValue;
|
126
|
-
};
|
127
|
-
const handleCardNumberChange = (value) => {
|
128
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
|
129
|
-
if (value && value.match(/[a-zA-Z]/)) {
|
130
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
131
|
-
card_number: "Invalid input. Please enter only numbers."
|
132
|
-
}));
|
133
|
-
} else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
|
134
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
135
|
-
card_number: "Invalid Card Number"
|
136
|
-
}));
|
137
|
-
} else if (!value.length) {
|
138
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
139
|
-
card_number: "Card Number required"
|
140
|
-
}));
|
141
|
-
} else {
|
142
|
-
setError({});
|
143
|
-
}
|
144
|
-
};
|
145
|
-
const handleMonthChange = (value) => {
|
146
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
|
147
|
-
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
|
148
|
-
setError({});
|
149
|
-
} else if (!value.length) {
|
150
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
151
|
-
exp_month: "Month is required"
|
152
|
-
}));
|
153
|
-
} else {
|
154
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
155
|
-
exp_month: "Value should be between 1 and 12"
|
156
|
-
}));
|
157
|
-
}
|
158
|
-
};
|
159
|
-
const handleYearChange = (value) => {
|
160
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
|
161
|
-
if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
|
162
|
-
setError({});
|
163
|
-
} else if (!value.length) {
|
164
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
165
|
-
exp_year: "Year is required"
|
166
|
-
}));
|
167
|
-
} else {
|
168
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
169
|
-
exp_year: "Invalid Expiration Date."
|
170
|
-
}));
|
171
|
-
}
|
172
|
-
};
|
173
|
-
const handleCVVChange = (value) => {
|
174
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
|
175
|
-
if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
|
176
|
-
setError({});
|
177
|
-
} else if (!value.length) {
|
178
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
179
|
-
cvv: "CVV is required"
|
180
|
-
}));
|
181
|
-
} else {
|
182
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
183
|
-
cvv: "Invalid CVV."
|
184
|
-
}));
|
185
|
-
}
|
186
|
-
};
|
187
|
-
const handleChange = (e) => {
|
188
|
-
const token = e.target.getAttribute("data-token") || "";
|
189
|
-
const value = e.target.value;
|
190
|
-
setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
|
191
|
-
if (token === "card_number") {
|
192
|
-
handleCardNumberChange(value);
|
193
|
-
}
|
194
|
-
if (token === "exp_month") {
|
195
|
-
handleMonthChange(value);
|
196
|
-
}
|
197
|
-
if (token === "exp_year") {
|
198
|
-
handleYearChange(value);
|
199
|
-
}
|
200
|
-
if (token === "cvv") {
|
201
|
-
handleCVVChange(value);
|
202
|
-
}
|
203
|
-
};
|
204
|
-
useEffect(() => {
|
205
|
-
const scriptId = "my-script";
|
206
|
-
const existingScript = document.getElementById(scriptId);
|
207
|
-
if (!existingScript) {
|
208
|
-
const script = document.createElement("script");
|
209
|
-
script.src = "https://token-cert.dcap.com/v1/client";
|
210
|
-
script.id = scriptId;
|
211
|
-
script.async = true;
|
212
|
-
script.onload = () => {
|
213
|
-
if (typeof window !== "undefined" && window.DatacapWebToken) {
|
214
|
-
console.log("DatacapWebToken", window.DatacapWebToken);
|
215
|
-
} else {
|
216
|
-
console.log("DatacapWebToken is not loaded yet.");
|
217
|
-
}
|
218
|
-
};
|
219
|
-
document.head.appendChild(script);
|
220
|
-
}
|
221
|
-
return () => {
|
222
|
-
const script = document.getElementById(scriptId);
|
223
|
-
if (script) {
|
224
|
-
document.head.removeChild(script);
|
225
|
-
}
|
226
|
-
};
|
227
|
-
}, []);
|
228
|
-
useEffect(() => {
|
229
|
-
const link = document.createElement("link");
|
230
|
-
link.rel = "stylesheet";
|
231
|
-
link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";
|
232
|
-
document.head.appendChild(link);
|
233
|
-
return () => {
|
234
|
-
document.head.removeChild(link);
|
235
|
-
};
|
236
|
-
}, []);
|
237
|
-
const handleClose = () => {
|
238
|
-
setShow(false);
|
239
|
-
};
|
240
|
-
const handleOpen = () => {
|
241
|
-
console.log("open");
|
242
|
-
setShow(true);
|
243
|
-
};
|
244
|
-
console.log(show, "open");
|
245
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, `
|
246
|
-
|
8
|
+
// src/app/components/Loader/LoaderStyle.tsx
|
9
|
+
import React2 from "react";
|
10
|
+
|
11
|
+
// src/app/components/RequestPayment/RequestPayment.tsx
|
12
|
+
import { Button, Form, Modal } from "react-bootstrap";
|
247
13
|
|
248
|
-
|
249
|
-
|
250
|
-
font-family: 'Poppins', sans-serif;
|
251
|
-
}
|
252
|
-
|
253
|
-
input::placeholder {
|
254
|
-
font-weight: 500;
|
255
|
-
opacity: 0.5;
|
256
|
-
color: #35254D !important;
|
257
|
-
}
|
258
|
-
|
259
|
-
.bg-light {
|
260
|
-
background: #d5d5d5 !important;
|
261
|
-
height: 100vh;
|
262
|
-
}
|
263
|
-
|
264
|
-
.payment-popup {
|
265
|
-
/* padding: 35px 40px; */
|
266
|
-
padding: 0px;
|
267
|
-
background: #fff;
|
268
|
-
border-radius: 20px;
|
269
|
-
position: relative;
|
270
|
-
/* width: 400px; */
|
271
|
-
margin: 0 auto;
|
272
|
-
}
|
273
|
-
|
274
|
-
@media(max-width:460px) {
|
275
|
-
.payment-popup {
|
276
|
-
padding: 35px 25px;
|
277
|
-
width: 98%;
|
278
|
-
}
|
279
|
-
}
|
280
|
-
|
281
|
-
.close-pop {
|
282
|
-
position: absolute;
|
283
|
-
right: 8px;
|
284
|
-
top: 8px;
|
285
|
-
border: 0;
|
286
|
-
padding: 0;
|
287
|
-
background: none !important;
|
288
|
-
}
|
289
|
-
|
290
|
-
.amex {
|
291
|
-
/* background-image: url("./amex.svg"); */
|
292
|
-
}
|
293
|
-
|
294
|
-
.visa {
|
295
|
-
/* background-image: url("./visa.svg"); */
|
296
|
-
}
|
297
|
-
|
298
|
-
.mastercard {
|
299
|
-
/* background-image: url("./mastercard.svg"); */
|
300
|
-
}
|
301
|
-
|
302
|
-
.discover {
|
303
|
-
/* background-image: url("./discover.svg"); */
|
304
|
-
}
|
305
|
-
|
306
|
-
.expiry-date-group {
|
307
|
-
float: left;
|
308
|
-
width: 30%
|
309
|
-
}
|
310
|
-
|
311
|
-
.expiry-date-group input {
|
312
|
-
width: calc(100% + 1px);
|
313
|
-
border-top-right-radius: 0;
|
314
|
-
border-bottom-right-radius: 0;
|
315
|
-
}
|
316
|
-
|
317
|
-
.expiry-date-group input:focus {
|
318
|
-
position: relative;
|
319
|
-
z-index: 10;
|
320
|
-
}
|
321
|
-
|
322
|
-
.security-code-group {
|
323
|
-
float: right;
|
324
|
-
width: 40%;
|
325
|
-
position: relative;
|
326
|
-
}
|
327
|
-
|
328
|
-
.security-code-group input {
|
329
|
-
border-top-left-radius: 0;
|
330
|
-
border-bottom-left-radius: 0;
|
331
|
-
}
|
332
|
-
|
333
|
-
.zip-code-group {
|
334
|
-
clear: both;
|
335
|
-
}
|
336
|
-
|
337
|
-
|
338
|
-
#submitButton {
|
339
|
-
outline: 0 !important;
|
340
|
-
height: 46px;
|
341
|
-
font-size: 16px;
|
342
|
-
background-color: #161616 !important;
|
343
|
-
border: none;
|
344
|
-
display: block;
|
345
|
-
width: 100%;
|
346
|
-
border-radius: 180px;
|
347
|
-
}
|
348
|
-
|
349
|
-
#PayButton {
|
350
|
-
outline: 0 !important;
|
351
|
-
height: 46px;
|
352
|
-
font-size: 16px;
|
353
|
-
background-color: #161616 !important;
|
354
|
-
border: none;
|
355
|
-
display: block;
|
356
|
-
width: 100%;
|
357
|
-
border-radius: 180px;
|
358
|
-
}
|
359
|
-
|
360
|
-
#PayButton:hover {
|
361
|
-
background-color: #61C699 !important;
|
362
|
-
}
|
363
|
-
|
364
|
-
#PayButton:active {
|
365
|
-
background-color: #61C699 !important;
|
366
|
-
}
|
367
|
-
|
368
|
-
#PayButton:disabled {
|
369
|
-
background: rgb(172, 44, 170) !important;
|
370
|
-
color: #FFF !important;
|
371
|
-
}
|
372
|
-
|
373
|
-
.form-control {
|
374
|
-
color: #35254D;
|
375
|
-
}
|
376
|
-
|
377
|
-
.container {
|
378
|
-
margin-top: 10px;
|
379
|
-
}
|
380
|
-
|
381
|
-
#Checkout {
|
382
|
-
z-index: 100001;
|
383
|
-
width: 100%;
|
384
|
-
height: 100%;
|
385
|
-
min-height: 100%;
|
386
|
-
background: 0 0 #ffffff;
|
387
|
-
border-radius: 24px;
|
388
|
-
border: 1px solid #E0DFE2;
|
389
|
-
margin-left: auto;
|
390
|
-
margin-right: auto;
|
391
|
-
display: block;
|
392
|
-
}
|
393
|
-
|
394
|
-
#Checkout .header {
|
395
|
-
display: flex;
|
396
|
-
/* Enables Flexbox */
|
397
|
-
justify-content: center;
|
398
|
-
/* Centers content horizontally */
|
399
|
-
align-items: center;
|
400
|
-
/* Centers content vertically */
|
401
|
-
text-align: center;
|
402
|
-
padding: 8px;
|
403
|
-
border-bottom: 1px solid #DEDEDE;
|
404
|
-
margin: 0 10px 20px 10px;
|
405
|
-
}
|
406
|
-
|
407
|
-
#Checkout .header button {
|
408
|
-
border: 0;
|
409
|
-
background: none;
|
410
|
-
padding: 0;
|
411
|
-
}
|
412
|
-
|
413
|
-
#Checkout h1 {
|
414
|
-
margin: 0;
|
415
|
-
flex: 1;
|
416
|
-
padding: 10px;
|
417
|
-
/* Allows the title to grow and fill the space for centering */
|
418
|
-
font-size: 23px;
|
419
|
-
font-weight: 500;
|
420
|
-
color: #35254D;
|
421
|
-
/* align-items: start; */
|
422
|
-
display: flex;
|
423
|
-
}
|
424
|
-
|
425
|
-
#Checkout>form {
|
426
|
-
margin: 0 25px 10px 25px;
|
427
|
-
}
|
428
|
-
|
429
|
-
label {
|
430
|
-
color: rgba(53, 37, 77, 0.6);
|
431
|
-
margin-bottom: 2px;
|
432
|
-
text-transform: uppercase;
|
433
|
-
font-family: "IBM Plex Mono", monospace;
|
434
|
-
font-weight: 500;
|
435
|
-
font-size: 12px;
|
436
|
-
}
|
437
|
-
|
438
|
-
.input-container {
|
439
|
-
position: relative;
|
440
|
-
}
|
441
|
-
|
442
|
-
.input-container input {
|
443
|
-
padding-right: 25px;
|
444
|
-
}
|
445
|
-
|
446
|
-
#zipcode {
|
447
|
-
text-transform: capitalize !important;
|
448
|
-
}
|
449
|
-
|
450
|
-
#zipcode {
|
451
|
-
width: 18px;
|
452
|
-
position: absolute;
|
453
|
-
right: 8px;
|
454
|
-
top: 9px;
|
455
|
-
}
|
456
|
-
|
457
|
-
#zipcode .zip-tip {
|
458
|
-
display: none;
|
459
|
-
background-color: rgb(0, 0, 0, 0.4);
|
460
|
-
padding: 5px 8px;
|
461
|
-
border-radius: 6px;
|
462
|
-
position: absolute;
|
463
|
-
right: 26px;
|
464
|
-
top: -9px;
|
465
|
-
font-size: 12.5px;
|
466
|
-
text-transform: capitalize !important;
|
467
|
-
color: #fff;
|
468
|
-
width: 240px;
|
469
|
-
line-height: 16px;
|
470
|
-
}
|
471
|
-
|
472
|
-
#zipcode .zip-tip:before {
|
473
|
-
width: 0;
|
474
|
-
height: 0;
|
475
|
-
border-top: 7px solid transparent;
|
476
|
-
border-bottom: 7px solid transparent;
|
477
|
-
border-left: 7px solid #000;
|
478
|
-
opacity: 0.4;
|
479
|
-
position: absolute;
|
480
|
-
right: -7px;
|
481
|
-
top: 50%;
|
482
|
-
transform: translateY(-50%);
|
483
|
-
content: '';
|
484
|
-
}
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
#zipcode:hover .zip-tip {
|
489
|
-
display: block;
|
490
|
-
}
|
491
|
-
|
492
|
-
|
493
|
-
.input-container>i,
|
494
|
-
a[role="button"] {
|
495
|
-
color: #d3d3d3;
|
496
|
-
width: 25px;
|
497
|
-
height: 30px;
|
498
|
-
line-height: 30px;
|
499
|
-
font-size: 16px;
|
500
|
-
position: absolute;
|
501
|
-
top: 5px;
|
502
|
-
right: 6px;
|
503
|
-
cursor: pointer;
|
504
|
-
text-align: center;
|
505
|
-
}
|
506
|
-
|
507
|
-
.input-container>i:hover,
|
508
|
-
a[role="button"]:hover {
|
509
|
-
color: #777;
|
510
|
-
}
|
511
|
-
|
512
|
-
.amount-placeholder {
|
513
|
-
white-space: nowrap;
|
514
|
-
font-size: 44px;
|
515
|
-
/* height: 35px; */
|
516
|
-
font-weight: 600;
|
517
|
-
line-height: 40px;
|
518
|
-
}
|
519
|
-
|
520
|
-
.amount-placeholder>button {
|
521
|
-
float: right;
|
522
|
-
width: 60px;
|
523
|
-
}
|
524
|
-
|
525
|
-
.amount-placeholder>span {
|
526
|
-
line-height: 34px;
|
527
|
-
}
|
528
|
-
|
529
|
-
.top-amnt {
|
530
|
-
display: flex;
|
531
|
-
margin-bottom: 10px;
|
532
|
-
align-items: center;
|
533
|
-
justify-content: space-between;
|
534
|
-
}
|
535
|
-
|
536
|
-
.amtleft {
|
537
|
-
text-align: center;
|
538
|
-
}
|
539
|
-
|
540
|
-
.amtleft span {
|
541
|
-
color: #35254D;
|
542
|
-
margin: 0 -5px;
|
543
|
-
}
|
544
|
-
|
545
|
-
.card-row {
|
546
|
-
text-align: right;
|
547
|
-
margin: 8px 0 0 0;
|
548
|
-
max-width: 85px;
|
549
|
-
line-height: 20px;
|
550
|
-
}
|
551
|
-
|
552
|
-
.yer {
|
553
|
-
border-radius: 0;
|
554
|
-
}
|
555
|
-
|
556
|
-
.card-row span {
|
557
|
-
width: 33px;
|
558
|
-
height: 21px;
|
559
|
-
margin: 0 2px;
|
560
|
-
background-repeat: no-repeat;
|
561
|
-
display: inline-block;
|
562
|
-
background-size: contain;
|
563
|
-
}
|
564
|
-
|
565
|
-
.card-image {
|
566
|
-
background-repeat: no-repeat;
|
567
|
-
padding-right: 50px;
|
568
|
-
background-position: right 2px center;
|
569
|
-
background-size: auto 90%
|
570
|
-
}
|
571
|
-
|
572
|
-
/* .cvc-preview-container {
|
573
|
-
overflow: hidden;
|
574
|
-
} */
|
575
|
-
|
576
|
-
.cvc-preview-container {
|
577
|
-
/* overflow: hidden; */
|
578
|
-
position: absolute;
|
579
|
-
z-index: 9999;
|
580
|
-
right: -71px;
|
581
|
-
top: -54px;
|
582
|
-
width: 165px;
|
583
|
-
border-radius: 5px;
|
584
|
-
padding: 5px;
|
585
|
-
background-color: rgb(0, 0, 0, 0.3);
|
586
|
-
display: none;
|
587
|
-
}
|
588
|
-
|
589
|
-
.cvc-preview-container:before {
|
590
|
-
position: absolute;
|
591
|
-
left: 50%;
|
592
|
-
transform: translate(-50%);
|
593
|
-
bottom: -5px;
|
594
|
-
width: 0;
|
595
|
-
height: 0;
|
596
|
-
border-left: 5px solid transparent;
|
597
|
-
border-right: 5px solid transparent;
|
598
|
-
border-top: 5px solid #000;
|
599
|
-
opacity: 0.3;
|
600
|
-
content: '';
|
601
|
-
}
|
602
|
-
|
603
|
-
.security-code-group #cvc:hover .cvc-preview-container {
|
604
|
-
display: block;
|
605
|
-
}
|
606
|
-
|
607
|
-
.cvc-preview-container.two-card div {
|
608
|
-
width: 50%;
|
609
|
-
height: 45px;
|
610
|
-
}
|
611
|
-
|
612
|
-
.cvc-preview-container.two-card div.amex-cvc-preview {
|
613
|
-
float: right;
|
614
|
-
}
|
615
|
-
|
616
|
-
.cvc-preview-container.two-card div.visa-mc-dis-cvc-preview {
|
617
|
-
float: left;
|
618
|
-
}
|
619
|
-
|
620
|
-
/* .cvc-preview-container div {
|
621
|
-
height: 160px;
|
622
|
-
} */
|
623
|
-
|
624
|
-
.amex-cvc-preview {
|
625
|
-
background: url("data:image/png;base64,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") center center/contain no-repeat;
|
626
|
-
}
|
627
|
-
|
628
|
-
.visa-mc-dis-cvc-preview {
|
629
|
-
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAMAAAASE4S+AAAAAXNSR0IArs4c6QAAAadQTFRFAAAAzbFj+NyAyLNg+N2DzbRk+96CzrVj+96AzrNj+92By7Rl+92AzbRl/eCDzrRl/t+DzrVl/t+CzbVm/t+C3MFt3MFv/N2B/N6CzrRm/uCDzrRm/uCC7M93/N6CAAAAAQEBAgIBBAQCBQUDBwcECQgFDAsGDg0HEA4IEQ8JFRMLFxUMIBwQIR0RJSETKyYWLikYLyoYMCsZMSsZNC4bNzEcOTIdQDkhQTkhQzsiRT0jRj4kSkEmTEMnWE4tWU8uWk8uXFEvXVIwXlMwX1QxaV02bWA4bmE5cWQ6eGo+eWs+fW5Afm9Bi3pHjHtIkH9KmIZOmYdPnIlQnYpRo5BUppJVqJRWqpZXq5dYrJdYrZhZuaNfvaZhvqdiwKljwapjxK1lybFnyrJoy7NozrVm1Ltq171u2L5v2b9s2b9t2sBt3cNy3zEx3zIx38Rz4MVz4cZ04kI552NI6GVJ6Mx36s5368957dF674xb79J78NN78dV78tV789Z99Nd99dh+9rZv9th+9tl+99l/+duA+sx5+sx6+t2B+92B/N6B/d+C/uCD////AikOogAAAB90Uk5TACQkJSU9PT4+Q0NERJqav7/AwNjY4uLi4u7u8/P6+u6knPAAAAJkSURBVHja7d3pTxNBGMfxQbwAW06Pcj0tntQT8b7v+0JFxaserQcuKlQUFbFUaqvjH+1uG0lMfEETie4z39+bJ/tik/1kjt3MbDLGBFkWbeu0CtPZFq03v7KwxSpO04KKcmm7VZ32xeW2VK70nUF7tlj1afJnH+tA6k3UBWbUrHKBudJ0u8DsNtaJwIQJEyZMmDBhwoQJEyZMmPPCFCcCEyZMmDBhwoQJEyZMmDBhwoQJEyZMmDBhwoQJ010m+5swYcKECRMmTJgwYcKECRMmTJgwYcIMFfPHP8/vz5PLjnpzzmg2F07mxIhXVUYmwsjMVan0nbkQMrOeN1aY+zAsjHleNoRMf1x+rWa6KfjjM4RMvxdWN63+4QaYMGHC/EvM6b0HgpI6tvtoyq9vz+4/clcf89sJ2eiXIZGEyJD9sEl6RAa1MVPbpczsk8vT52SHHZCDUxelXxtzW/x4wPx+6cxn+0A2208PX9pB2aONef7xk3JrBjkth4Jysnf9fX1T0Czzmqx+6pcvcel/pJd5RRLXg1p6d0vWvdHKHJCeG2XljLVb5aZS5r2E3A6uTiUu2Km1klLK3CXxZDK5xd6RNYd3St+MTuaryr94G6y92iuy77X+b9rSi/d8usOEyZIXC5gsR7O5MN9bRexvwoQJEyZMmDBhwoQJEyZMmDBhwoT5vzNLLihLJu8CM2+6XGB2meUuMFeYyEf9ysmIqcsUtSuLmQZjGp8pdxafNxtjamIZ1f12MhOrDQ6uXhRLD4/nVb4/S/nx4XRsSeUY8prGtOI0186eKl8Xae3QSOxojTSUgT8BEvkXyqDHONgAAAAASUVORK5CYII=") center center/contain no-repeat;
|
630
|
-
}
|
631
|
-
|
632
|
-
.submit-button-lock {
|
633
|
-
height: 15px;
|
634
|
-
margin-top: -2px;
|
635
|
-
margin-right: 7px;
|
636
|
-
vertical-align: middle;
|
637
|
-
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAgCAMAAAA7dZg3AAAKQWlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUU9kWh8+9N73QEiIgJfQaegkg0jtIFQRRiUmAUAKGhCZ2RAVGFBEpVmRUwAFHhyJjRRQLg4Ji1wnyEFDGwVFEReXdjGsJ7601896a/cdZ39nnt9fZZ+9917oAUPyCBMJ0WAGANKFYFO7rwVwSE8vE9wIYEAEOWAHA4WZmBEf4RALU/L09mZmoSMaz9u4ugGS72yy/UCZz1v9/kSI3QyQGAApF1TY8fiYX5QKUU7PFGTL/BMr0lSkyhjEyFqEJoqwi48SvbPan5iu7yZiXJuShGlnOGbw0noy7UN6aJeGjjAShXJgl4GejfAdlvVRJmgDl9yjT0/icTAAwFJlfzOcmoWyJMkUUGe6J8gIACJTEObxyDov5OWieAHimZ+SKBIlJYqYR15hp5ejIZvrxs1P5YjErlMNN4Yh4TM/0tAyOMBeAr2+WRQElWW2ZaJHtrRzt7VnW5mj5v9nfHn5T/T3IevtV8Sbsz55BjJ5Z32zsrC+9FgD2JFqbHbO+lVUAtG0GQOXhrE/vIADyBQC03pzzHoZsXpLE4gwnC4vs7GxzAZ9rLivoN/ufgm/Kv4Y595nL7vtWO6YXP4EjSRUzZUXlpqemS0TMzAwOl89k/fcQ/+PAOWnNycMsnJ/AF/GF6FVR6JQJhIlou4U8gViQLmQKhH/V4X8YNicHGX6daxRodV8AfYU5ULhJB8hvPQBDIwMkbj96An3rWxAxCsi+vGitka9zjzJ6/uf6Hwtcim7hTEEiU+b2DI9kciWiLBmj34RswQISkAd0oAo0gS4wAixgDRyAM3AD3iAAhIBIEAOWAy5IAmlABLJBPtgACkEx2AF2g2pwANSBetAEToI2cAZcBFfADXALDIBHQAqGwUswAd6BaQiC8BAVokGqkBakD5lC1hAbWgh5Q0FQOBQDxUOJkBCSQPnQJqgYKoOqoUNQPfQjdBq6CF2D+qAH0CA0Bv0BfYQRmALTYQ3YALaA2bA7HAhHwsvgRHgVnAcXwNvhSrgWPg63whfhG/AALIVfwpMIQMgIA9FGWAgb8URCkFgkAREha5EipAKpRZqQDqQbuY1IkXHkAwaHoWGYGBbGGeOHWYzhYlZh1mJKMNWYY5hWTBfmNmYQM4H5gqVi1bGmWCesP3YJNhGbjS3EVmCPYFuwl7ED2GHsOxwOx8AZ4hxwfrgYXDJuNa4Etw/XjLuA68MN4SbxeLwq3hTvgg/Bc/BifCG+Cn8cfx7fjx/GvyeQCVoEa4IPIZYgJGwkVBAaCOcI/YQRwjRRgahPdCKGEHnEXGIpsY7YQbxJHCZOkxRJhiQXUiQpmbSBVElqIl0mPSa9IZPJOmRHchhZQF5PriSfIF8lD5I/UJQoJhRPShxFQtlOOUq5QHlAeUOlUg2obtRYqpi6nVpPvUR9Sn0vR5Mzl/OX48mtk6uRa5Xrl3slT5TXl3eXXy6fJ18hf0r+pvy4AlHBQMFTgaOwVqFG4bTCPYVJRZqilWKIYppiiWKD4jXFUSW8koGStxJPqUDpsNIlpSEaQtOledK4tE20Otpl2jAdRzek+9OT6cX0H+i99AllJWVb5SjlHOUa5bPKUgbCMGD4M1IZpYyTjLuMj/M05rnP48/bNq9pXv+8KZX5Km4qfJUilWaVAZWPqkxVb9UU1Z2qbapP1DBqJmphatlq+9Uuq43Pp893ns+dXzT/5PyH6rC6iXq4+mr1w+o96pMamhq+GhkaVRqXNMY1GZpumsma5ZrnNMe0aFoLtQRa5VrntV4wlZnuzFRmJbOLOaGtru2nLdE+pN2rPa1jqLNYZ6NOs84TXZIuWzdBt1y3U3dCT0svWC9fr1HvoT5Rn62fpL9Hv1t/ysDQINpgi0GbwaihiqG/YZ5ho+FjI6qRq9Eqo1qjO8Y4Y7ZxivE+41smsImdSZJJjclNU9jU3lRgus+0zwxr5mgmNKs1u8eisNxZWaxG1qA5wzzIfKN5m/krCz2LWIudFt0WXyztLFMt6ywfWSlZBVhttOqw+sPaxJprXWN9x4Zq42Ozzqbd5rWtqS3fdr/tfTuaXbDdFrtOu8/2DvYi+yb7MQc9h3iHvQ732HR2KLuEfdUR6+jhuM7xjOMHJ3snsdNJp9+dWc4pzg3OowsMF/AX1C0YctFx4bgccpEuZC6MX3hwodRV25XjWuv6zE3Xjed2xG3E3dg92f24+ysPSw+RR4vHlKeT5xrPC16Il69XkVevt5L3Yu9q76c+Oj6JPo0+E752vqt9L/hh/QL9dvrd89fw5/rX+08EOASsCegKpARGBFYHPgsyCRIFdQTDwQHBu4IfL9JfJFzUFgJC/EN2hTwJNQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAAgYMEyIzOUpTVFViY3N2gJmcnaipq7fX3ebx+Pn8eTEuDQAAAI9JREFUKM/N0UkOglAQRdFHDyK90n64+9+lAyQgookjuaNKTlJJpaQlO2n6sW8SW/uCjrku2EloWDLhi3gDa4O3pTtA5Tt+BXDbiDsBmSQpAyZ3pRhoLUmS1QLxSilQPOcCSFfKgfxgPgfZ9ch7Y21LCcdd5wVH5SckEzkXc0ylpPJnMpETmX/d9eUpH1/5AKrsQVrz7YPBAAAAAElFTkSuQmCC") center center/contain no-repeat;
|
638
|
-
width: 14px;
|
639
|
-
display: inline-block;
|
640
|
-
}
|
641
|
-
|
642
|
-
.align-middle {
|
643
|
-
vertical-align: middle;
|
644
|
-
}
|
645
|
-
|
646
|
-
input {
|
647
|
-
box-shadow: none !important;
|
648
|
-
}
|
649
|
-
|
650
|
-
.powerd-by-part {
|
651
|
-
display: flex;
|
652
|
-
font-size: 12px;
|
653
|
-
text-align: center;
|
654
|
-
align-items: center;
|
655
|
-
justify-content: center;
|
656
|
-
margin: 8px 0 20px 0;
|
657
|
-
}
|
658
|
-
|
659
|
-
.powered-logo {
|
660
|
-
width: 18px;
|
661
|
-
height: 18px;
|
662
|
-
float: right;
|
663
|
-
padding: 2px;
|
664
|
-
background: #000000;
|
665
|
-
border-radius: 4px;
|
666
|
-
margin-left: 5px;
|
667
|
-
}
|
668
|
-
|
669
|
-
.comp-name {
|
670
|
-
display: block;
|
671
|
-
margin-bottom: 8px;
|
672
|
-
}
|
673
|
-
|
674
|
-
.client-logo {
|
675
|
-
max-width: 140px;
|
676
|
-
display: block;
|
677
|
-
margin: auto;
|
678
|
-
padding: 5px;
|
679
|
-
}
|
680
|
-
|
681
|
-
#qrCode {
|
682
|
-
text-align: center;
|
683
|
-
}
|
684
|
-
|
685
|
-
#qrIcon {
|
686
|
-
cursor: pointer;
|
687
|
-
border: 1px solid rgb(252, 252, 252);
|
688
|
-
padding: 10px;
|
689
|
-
border-radius: 5px;
|
690
|
-
background: #ffffff;
|
691
|
-
}
|
692
|
-
|
693
|
-
#target {
|
694
|
-
display: none;
|
695
|
-
text-align: center;
|
696
|
-
transition: all 5s;
|
697
|
-
padding: 5px;
|
698
|
-
transition: max-height 0.5s, overflow 0.5s 0.5s;
|
699
|
-
}
|
700
|
-
|
701
|
-
/* input:focus {
|
702
|
-
border-color: #acc6db !important;
|
703
|
-
background-color: #acc6db !important;
|
704
|
-
} */
|
705
|
-
|
706
|
-
|
707
|
-
|
708
|
-
|
709
|
-
|
710
|
-
|
711
|
-
|
712
|
-
.payment-success {
|
713
|
-
border-radius: 24px;
|
714
|
-
padding: 160px 24px;
|
715
|
-
text-align: center;
|
716
|
-
background: linear-gradient(white, white) padding-box,
|
717
|
-
linear-gradient(to bottom, #B0E2CC, #DBFCEE) border-box;
|
718
|
-
border-radius: 24px;
|
719
|
-
border: 1px solid transparent;
|
720
|
-
|
721
|
-
}
|
722
|
-
|
723
|
-
.payment-icon {
|
724
|
-
width: 60px;
|
725
|
-
height: 60px;
|
726
|
-
border-radius: 180px;
|
727
|
-
border: #61C699 1px solid;
|
728
|
-
margin: 0 auto 15px auto;
|
729
|
-
display: flex;
|
730
|
-
align-items: center;
|
731
|
-
justify-content: center;
|
732
|
-
}
|
733
|
-
|
734
|
-
.payment-success h2 {
|
735
|
-
font-size: 24px;
|
736
|
-
color: #35254D;
|
737
|
-
line-height: 25px;
|
738
|
-
}
|
739
|
-
|
740
|
-
.payment-success p {
|
741
|
-
font-size: 14px;
|
742
|
-
color: #9A92A6;
|
743
|
-
line-height: 15px;
|
744
|
-
}
|
745
|
-
|
746
|
-
|
747
|
-
.bg-light {
|
748
|
-
background: #fff !important;
|
749
|
-
}
|
750
|
-
|
751
|
-
/* body {
|
752
|
-
overflow: hidden !important;
|
753
|
-
background: #fff !important;
|
754
|
-
} */
|
755
|
-
|
756
|
-
.app-pagination .page-item .page-link {
|
757
|
-
color: #2e2f2f;
|
758
|
-
}
|
759
|
-
|
760
|
-
.app-pagination .page-item.active .page-link {
|
761
|
-
background-color: #a9aeb3;
|
762
|
-
border-color: #ddd;
|
763
|
-
color: #2e2f2f;
|
764
|
-
}
|
765
|
-
|
766
|
-
.app-pagination .page-item.disabled .page-link {
|
767
|
-
color: #2e2f2f;
|
768
|
-
}
|
769
|
-
|
770
|
-
.app-pagination .page-item .page-link:hover {
|
771
|
-
text-decoration: none;
|
772
|
-
color: #2e2f2f;
|
773
|
-
}
|
774
|
-
|
775
|
-
.loader {
|
776
|
-
position: fixed;
|
777
|
-
/* Fixed position to cover the viewport */
|
778
|
-
top: 0;
|
779
|
-
left: 0;
|
780
|
-
width: 100%;
|
781
|
-
height: 100%;
|
782
|
-
display: flex;
|
783
|
-
justify-content: center;
|
784
|
-
align-items: center;
|
785
|
-
/* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
|
786
|
-
background-color: rgba(255, 255, 255, 0.521);
|
787
|
-
/* Semi-transparent black background */
|
788
|
-
|
789
|
-
backdrop-filter: blur(.5px);
|
790
|
-
/* Blur effect */
|
791
|
-
z-index: 9999;
|
792
|
-
/* Ensure it's on top of other elements */
|
793
|
-
}
|
794
|
-
|
795
|
-
.lds-ellipsis {
|
796
|
-
display: inline-block;
|
797
|
-
position: relative;
|
798
|
-
width: 80px;
|
799
|
-
height: 80px;
|
800
|
-
}
|
801
|
-
|
802
|
-
.lds-ellipsis div {
|
803
|
-
position: absolute;
|
804
|
-
top: 33px;
|
805
|
-
width: 13px;
|
806
|
-
height: 13px;
|
807
|
-
border-radius: 50%;
|
808
|
-
background: #000;
|
809
|
-
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
810
|
-
}
|
811
|
-
|
812
|
-
.lds-ellipsis div:nth-child(1) {
|
813
|
-
left: 8px;
|
814
|
-
animation: lds-ellipsis1 0.6s infinite;
|
815
|
-
}
|
816
|
-
|
817
|
-
.lds-ellipsis div:nth-child(2) {
|
818
|
-
left: 8px;
|
819
|
-
animation: lds-ellipsis2 0.6s infinite;
|
820
|
-
}
|
821
|
-
|
822
|
-
.lds-ellipsis div:nth-child(3) {
|
823
|
-
left: 32px;
|
824
|
-
animation: lds-ellipsis2 0.6s infinite;
|
825
|
-
}
|
826
|
-
|
827
|
-
.lds-ellipsis div:nth-child(4) {
|
828
|
-
left: 56px;
|
829
|
-
animation: lds-ellipsis3 0.6s infinite;
|
830
|
-
}
|
831
|
-
|
832
|
-
@keyframes lds-ellipsis1 {
|
833
|
-
0% {
|
834
|
-
transform: scale(0);
|
835
|
-
}
|
836
|
-
|
837
|
-
100% {
|
838
|
-
transform: scale(1);
|
839
|
-
}
|
840
|
-
}
|
841
|
-
|
842
|
-
@keyframes lds-ellipsis2 {
|
843
|
-
0% {
|
844
|
-
transform: translate(0, 0);
|
845
|
-
}
|
846
|
-
|
847
|
-
100% {
|
848
|
-
transform: translate(24px, 0);
|
849
|
-
}
|
850
|
-
}
|
851
|
-
|
852
|
-
@keyframes lds-ellipsis3 {
|
853
|
-
0% {
|
854
|
-
transform: scale(1);
|
855
|
-
}
|
856
|
-
|
857
|
-
100% {
|
858
|
-
transform: scale(0);
|
859
|
-
}
|
860
|
-
}
|
861
|
-
|
862
|
-
.requestPayment {
|
863
|
-
max-width: 420px;
|
864
|
-
}
|
865
|
-
|
866
|
-
.paymentBtn {
|
867
|
-
background-color: black;
|
868
|
-
border: none;
|
869
|
-
color: white;
|
870
|
-
padding: 15px 32px;
|
871
|
-
text-align: center;
|
872
|
-
text-decoration: none;
|
873
|
-
display: inline-block;
|
874
|
-
font-size: 16px;
|
875
|
-
margin: 4px 2px;
|
876
|
-
border-radius: 180px;
|
877
|
-
}
|
878
|
-
|
879
|
-
.PayButton {
|
880
|
-
outline: 0 !important;
|
881
|
-
height: 46px;
|
882
|
-
background-color: #161616 !important;
|
883
|
-
width: 100%;
|
884
|
-
color: #fff;
|
885
|
-
margin: 10px 0;
|
886
|
-
}
|
887
|
-
|
888
|
-
|
889
|
-
|
890
|
-
|
891
|
-
|
892
|
-
.requpay-main{
|
893
|
-
max-width: 400px;
|
894
|
-
width: 100%;
|
895
|
-
height: auto;
|
896
|
-
padding: 20px;
|
897
|
-
border-radius: 20px !important;
|
898
|
-
position: relative;
|
899
|
-
margin: 30px auto;
|
900
|
-
}
|
901
|
-
.requpay-main h3{
|
902
|
-
font-size: 20px;
|
903
|
-
padding-left: 10px;
|
904
|
-
}
|
905
|
-
.requpay-in{
|
906
|
-
width: 100%;
|
907
|
-
background: 0 0 #ffffff;
|
908
|
-
border-radius: 24px;
|
909
|
-
border: 1px solid #e0dfe2;
|
910
|
-
padding: 20px;
|
911
|
-
}
|
912
|
-
|
913
|
-
.requpay-in .mb-1{
|
914
|
-
margin-bottom: 10px;
|
915
|
-
}
|
916
|
-
|
917
|
-
.requpay-in .pay-amount {
|
918
|
-
position: relative;
|
919
|
-
}
|
920
|
-
.requpay-in .pay-amount input{padding-left: 20px;}
|
921
|
-
.requpay-in .pay-amount .dlr-sign {
|
922
|
-
position: absolute;
|
923
|
-
left: 10px;
|
924
|
-
top: 7px;
|
925
|
-
}
|
926
|
-
.requpay-in .PayButton {
|
927
|
-
border-radius: 4px;
|
928
|
-
border:0;
|
929
|
-
height: 43px;
|
930
|
-
}
|
931
|
-
`), /* @__PURE__ */ React.createElement("div", { className: "w-100 text-center" }, /* @__PURE__ */ React.createElement(Button, { onClick: handleOpen }, "Show")), /* @__PURE__ */ React.createElement(
|
932
|
-
Modal,
|
933
|
-
{
|
934
|
-
show,
|
935
|
-
onHide: handleClose,
|
936
|
-
backdrop: "static",
|
937
|
-
keyboard: false,
|
938
|
-
size: "lg"
|
939
|
-
},
|
940
|
-
/* @__PURE__ */ React.createElement(Modal.Body, null, /* @__PURE__ */ React.createElement("div", { className: "bg-black" }, /* @__PURE__ */ React.createElement("div", { className: "container bg-black" }, /* @__PURE__ */ React.createElement("div", { className: "row bg-light no-gutters" }, /* @__PURE__ */ React.createElement("div", { className: "col-sm-12" }, /* @__PURE__ */ React.createElement("div", { className: "bd-example bd-example-tabs right-tabs mttabs m-3 " }, /* @__PURE__ */ React.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ React.createElement(
|
941
|
-
"button",
|
942
|
-
{
|
943
|
-
className: "close-pop",
|
944
|
-
onClick: () => {
|
945
|
-
setShow(false);
|
946
|
-
}
|
947
|
-
},
|
948
|
-
/* @__PURE__ */ React.createElement(
|
949
|
-
"svg",
|
950
|
-
{
|
951
|
-
xmlns: "http://www.w3.org/2000/svg",
|
952
|
-
width: 37,
|
953
|
-
height: 37,
|
954
|
-
viewBox: "0 0 21 21"
|
955
|
-
},
|
956
|
-
/* @__PURE__ */ React.createElement(
|
957
|
-
"path",
|
958
|
-
{
|
959
|
-
fill: "none",
|
960
|
-
stroke: "currentColor",
|
961
|
-
strokeLinecap: "round",
|
962
|
-
strokeLinejoin: "round",
|
963
|
-
d: "m7.5 7.5l6 6m0-6l-6 6"
|
964
|
-
}
|
965
|
-
)
|
966
|
-
)
|
967
|
-
), /* @__PURE__ */ React.createElement("div", { className: "row" }, /* @__PURE__ */ React.createElement("div", { className: "comp-name" }, /* @__PURE__ */ React.createElement(
|
968
|
-
"img",
|
969
|
-
{
|
970
|
-
src: "https://invoicestaging.skysystemz.com/assets/products/65c49a2740ff1.png",
|
971
|
-
alt: "",
|
972
|
-
className: "client-logo"
|
973
|
-
}
|
974
|
-
)), /* @__PURE__ */ React.createElement("div", { className: "" }, /* @__PURE__ */ React.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ React.createElement("div", { className: "header" }, /* @__PURE__ */ React.createElement("h1", null, "Pay"), /* @__PURE__ */ React.createElement(
|
975
|
-
"i",
|
976
|
-
{
|
977
|
-
className: "fa fa-qrcode fa-2x",
|
978
|
-
id: "qrIcon",
|
979
|
-
title: "Show QR Code",
|
980
|
-
onClick: () => setToggleQr(!toggleQr)
|
981
|
-
}
|
982
|
-
)), /* @__PURE__ */ React.createElement("div", { id: "qrCode", style: {
|
983
|
-
display: toggleQr ? "block" : "none"
|
984
|
-
} }, /* @__PURE__ */ React.createElement(
|
985
|
-
"img",
|
986
|
-
{
|
987
|
-
src: "data:image/png;base64,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",
|
988
|
-
alt: "QRCode",
|
989
|
-
srcSet: ""
|
990
|
-
}
|
991
|
-
)), /* @__PURE__ */ React.createElement(
|
992
|
-
"form",
|
993
|
-
{
|
994
|
-
id: "PaymentForm",
|
995
|
-
className: "payment-form",
|
996
|
-
onSubmit: handleSubmit
|
997
|
-
},
|
998
|
-
/* @__PURE__ */ React.createElement(
|
999
|
-
"input",
|
1000
|
-
{
|
1001
|
-
type: "hidden",
|
1002
|
-
id: "dctoken",
|
1003
|
-
defaultValue: dcToken,
|
1004
|
-
name: "dctoken"
|
1005
|
-
}
|
1006
|
-
),
|
1007
|
-
/* @__PURE__ */ React.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ React.createElement("div", { className: "amtleft" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "Amount" }, "Payment amount"), /* @__PURE__ */ React.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ React.createElement("span", null, "$"), /* @__PURE__ */ React.createElement("span", null, " ", amount || 1, " "))), /* @__PURE__ */ React.createElement("div", { className: "card-row" }, /* @__PURE__ */ React.createElement("span", { className: "visa" }), /* @__PURE__ */ React.createElement("span", { className: "mastercard" }), /* @__PURE__ */ React.createElement("span", { className: "amex" }), /* @__PURE__ */ React.createElement("span", { className: "discover" }))),
|
1008
|
-
/* @__PURE__ */ React.createElement("div", { className: "form-group" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "NameOnCard" }, "Name on card"), /* @__PURE__ */ React.createElement(
|
1009
|
-
"input",
|
1010
|
-
{
|
1011
|
-
"data-token": "name",
|
1012
|
-
id: "NameOnCard",
|
1013
|
-
className: "form-control required",
|
1014
|
-
type: "text",
|
1015
|
-
maxLength: 100,
|
1016
|
-
placeholder: "name",
|
1017
|
-
value: formData == null ? void 0 : formData.name,
|
1018
|
-
onChange: handleChange
|
1019
|
-
}
|
1020
|
-
), /* @__PURE__ */ React.createElement(
|
1021
|
-
"span",
|
1022
|
-
{
|
1023
|
-
id: "NameOnCard-error",
|
1024
|
-
style: { color: "red" }
|
1025
|
-
}
|
1026
|
-
)),
|
1027
|
-
/* @__PURE__ */ React.createElement("div", { className: "form-group" }, /* @__PURE__ */ React.createElement(
|
1028
|
-
"input",
|
1029
|
-
{
|
1030
|
-
"data-token": "card_number",
|
1031
|
-
className: "null card-image form-control required",
|
1032
|
-
type: "text",
|
1033
|
-
maxLength: 19,
|
1034
|
-
placeholder: "0000 0000 0000 0000",
|
1035
|
-
value: handleCardFormat(formData == null ? void 0 : formData.card_number),
|
1036
|
-
onChange: handleChange
|
1037
|
-
}
|
1038
|
-
), error.card_number && /* @__PURE__ */ React.createElement(
|
1039
|
-
"span",
|
1040
|
-
{
|
1041
|
-
id: "card_number-error",
|
1042
|
-
style: { color: "red" }
|
1043
|
-
},
|
1044
|
-
error.card_number
|
1045
|
-
)),
|
1046
|
-
/* @__PURE__ */ React.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React.createElement(
|
1047
|
-
"input",
|
1048
|
-
{
|
1049
|
-
"data-token": "exp_month",
|
1050
|
-
className: "form-control required",
|
1051
|
-
type: "text",
|
1052
|
-
placeholder: "MM",
|
1053
|
-
maxLength: 2,
|
1054
|
-
value: formData == null ? void 0 : formData.exp_month,
|
1055
|
-
onChange: handleChange
|
1056
|
-
}
|
1057
|
-
), error.exp_month && /* @__PURE__ */ React.createElement(
|
1058
|
-
"span",
|
1059
|
-
{
|
1060
|
-
id: "exp_month-error",
|
1061
|
-
style: { color: "red" }
|
1062
|
-
},
|
1063
|
-
error.exp_month
|
1064
|
-
)),
|
1065
|
-
/* @__PURE__ */ React.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React.createElement(
|
1066
|
-
"input",
|
1067
|
-
{
|
1068
|
-
"data-token": "exp_year",
|
1069
|
-
className: "form-control required",
|
1070
|
-
type: "text",
|
1071
|
-
placeholder: "YYYY",
|
1072
|
-
maxLength: 4,
|
1073
|
-
value: formData == null ? void 0 : formData.exp_year,
|
1074
|
-
onChange: handleChange
|
1075
|
-
}
|
1076
|
-
), error.exp_year && /* @__PURE__ */ React.createElement(
|
1077
|
-
"span",
|
1078
|
-
{
|
1079
|
-
id: "exp_year-error",
|
1080
|
-
style: { color: "red" }
|
1081
|
-
},
|
1082
|
-
error.exp_year
|
1083
|
-
)),
|
1084
|
-
/* @__PURE__ */ React.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ React.createElement("div", { className: "input-container" }, /* @__PURE__ */ React.createElement(
|
1085
|
-
"input",
|
1086
|
-
{
|
1087
|
-
"data-token": "cvv",
|
1088
|
-
className: "form-control required",
|
1089
|
-
type: "text",
|
1090
|
-
maxLength: 4,
|
1091
|
-
placeholder: "CVC",
|
1092
|
-
value: formData == null ? void 0 : formData.cvv,
|
1093
|
-
onChange: handleChange
|
1094
|
-
}
|
1095
|
-
), /* @__PURE__ */ React.createElement("i", { id: "cvc", className: "fa fa-question-circle" })), error.cvv && /* @__PURE__ */ React.createElement(
|
1096
|
-
"span",
|
1097
|
-
{
|
1098
|
-
id: "cvv-error",
|
1099
|
-
style: { color: "red" }
|
1100
|
-
},
|
1101
|
-
error.cvv
|
1102
|
-
), /* @__PURE__ */ React.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ React.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ React.createElement("div", { className: "visa-mc-dis-cvc-preview" }))),
|
1103
|
-
/* @__PURE__ */ React.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "ZIPCode" }, "Postal code"), /* @__PURE__ */ React.createElement("div", { className: "input-container" }, /* @__PURE__ */ React.createElement(
|
1104
|
-
"input",
|
1105
|
-
{
|
1106
|
-
id: "ZIPCode",
|
1107
|
-
"data-token": "zip",
|
1108
|
-
className: "form-control required",
|
1109
|
-
type: "text",
|
1110
|
-
maxLength: 7,
|
1111
|
-
placeholder: "000000",
|
1112
|
-
value: formData == null ? void 0 : formData.zip,
|
1113
|
-
onChange: handleChange
|
1114
|
-
}
|
1115
|
-
), /* @__PURE__ */ React.createElement(
|
1116
|
-
"a",
|
1117
|
-
{
|
1118
|
-
tabIndex: 0,
|
1119
|
-
role: "button",
|
1120
|
-
"data-toggle": "popover",
|
1121
|
-
"data-trigger": "focus",
|
1122
|
-
"data-placement": "left",
|
1123
|
-
"data-content": "Enter the ZIP/Postal code for your credit card billing address."
|
1124
|
-
},
|
1125
|
-
/* @__PURE__ */ React.createElement("i", { className: "fa fa-question-circle" })
|
1126
|
-
), /* @__PURE__ */ React.createElement(
|
1127
|
-
"span",
|
1128
|
-
{
|
1129
|
-
id: "ZIPCode-error",
|
1130
|
-
style: { color: "red", display: "none" }
|
1131
|
-
},
|
1132
|
-
"This field is required"
|
1133
|
-
))),
|
1134
|
-
/* @__PURE__ */ React.createElement(
|
1135
|
-
"button",
|
1136
|
-
{
|
1137
|
-
id: "PayButton",
|
1138
|
-
className: "btn btn-block btn-success submit-button",
|
1139
|
-
type: "submit"
|
1140
|
-
},
|
1141
|
-
/* @__PURE__ */ React.createElement("span", { className: "submit-button-lock" }),
|
1142
|
-
/* @__PURE__ */ React.createElement("span", { className: "align-middle" }, "Pay $", amount || 1)
|
1143
|
-
)
|
1144
|
-
), /* @__PURE__ */ React.createElement("div", { className: "powerd-by-part", style: {
|
1145
|
-
display: "flex",
|
1146
|
-
fontSize: "12px",
|
1147
|
-
textAlign: "center",
|
1148
|
-
alignItems: "center",
|
1149
|
-
justifyContent: "center",
|
1150
|
-
margin: "8px 0 20px 0"
|
1151
|
-
} }, /* @__PURE__ */ React.createElement(
|
1152
|
-
"svg",
|
1153
|
-
{
|
1154
|
-
xmlns: "http://www.w3.org/2000/svg",
|
1155
|
-
width: 20,
|
1156
|
-
height: 20,
|
1157
|
-
viewBox: "0 0 26 26"
|
1158
|
-
},
|
1159
|
-
/* @__PURE__ */ React.createElement(
|
1160
|
-
"path",
|
1161
|
-
{
|
1162
|
-
fill: "currentColor",
|
1163
|
-
d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
|
1164
|
-
}
|
1165
|
-
)
|
1166
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */ React.createElement(
|
1167
|
-
"img",
|
1168
|
-
{
|
1169
|
-
src: "https://ui.fractalpay.com/favicon.ico",
|
1170
|
-
alt: "Fractal logo",
|
1171
|
-
className: "powered-logo",
|
1172
|
-
style: {
|
1173
|
-
width: "18px",
|
1174
|
-
height: "18px",
|
1175
|
-
float: "right",
|
1176
|
-
padding: "2px",
|
1177
|
-
background: "#000",
|
1178
|
-
borderRadius: "4px",
|
1179
|
-
marginLeft: "5px"
|
1180
|
-
}
|
1181
|
-
}
|
1182
|
-
))))))))))))
|
1183
|
-
));
|
1184
|
-
}
|
1185
|
-
export {
|
1186
|
-
PaywithFractal
|
1187
|
-
};
|
14
|
+
// src/app/components/RequestPayment/RequestPaymentstyles.tsx
|
15
|
+
import React4 from "react";
|