@pinerohit11/testwidget 0.1.35 → 0.1.37

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.cjs CHANGED
@@ -1,10 +1,31 @@
1
1
  "use strict";
2
2
  var __create = Object.create;
3
3
  var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
7
  var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
9
  var __getProtoOf = Object.getPrototypeOf;
7
10
  var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
+ var __export = (target, all) => {
26
+ for (var name in all)
27
+ __defProp(target, name, { get: all[name], enumerable: true });
28
+ };
8
29
  var __copyProps = (to, from, except, desc) => {
9
30
  if (from && typeof from === "object" || typeof from === "function") {
10
31
  for (let key of __getOwnPropNames(from))
@@ -25,10 +46,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
25
46
 
26
47
  // src/app/index.ts
27
48
  var app_exports = {};
49
+ __export(app_exports, {
50
+ PaywithFractal: () => PaywithFractal,
51
+ RequestPayment: () => RequestPayment
52
+ });
28
53
  module.exports = __toCommonJS(app_exports);
29
54
 
30
55
  // src/app/components/RequestPayment/RequestPayment.tsx
31
- var import_react4 = require("react");
56
+ var import_react4 = __toESM(require("react"), 1);
32
57
  var import_axios = __toESM(require("axios"), 1);
33
58
 
34
59
  // src/app/components/Loader/Loader.tsx
@@ -36,9 +61,1406 @@ var import_react2 = __toESM(require("react"), 1);
36
61
 
37
62
  // src/app/components/Loader/LoaderStyle.tsx
38
63
  var import_react = __toESM(require("react"), 1);
64
+ var LoaderStyle = (props) => {
65
+ return /* @__PURE__ */ import_react.default.createElement("style", null, `
66
+ .loader {
67
+ position: fixed;
68
+ /* Fixed position to cover the viewport */
69
+ top: 0;
70
+ left: 0;
71
+ width: 100%;
72
+ height: 100%;
73
+ display: flex;
74
+ justify-content: center;
75
+ align-items: center;
76
+ /* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
77
+ background-color: rgba(255, 255, 255, 0.521);
78
+ /* Semi-transparent black background */
79
+
80
+ backdrop-filter: blur(.5px);
81
+ /* Blur effect */
82
+ z-index: 9999;
83
+ /* Ensure it's on top of other elements */
84
+ }
85
+
86
+ .lds-ellipsis {
87
+ display: inline-block;
88
+ position: relative;
89
+ width: 80px;
90
+ height: 80px;
91
+ }
92
+
93
+ .lds-ellipsis div {
94
+ position: absolute;
95
+ top: 33px;
96
+ width: 13px;
97
+ height: 13px;
98
+ border-radius: 50%;
99
+ background: #000;
100
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
101
+ }
102
+
103
+ .lds-ellipsis div:nth-child(1) {
104
+ left: 8px;
105
+ animation: lds-ellipsis1 0.6s infinite;
106
+ }
107
+
108
+ .lds-ellipsis div:nth-child(2) {
109
+ left: 8px;
110
+ animation: lds-ellipsis2 0.6s infinite;
111
+ }
112
+
113
+ .lds-ellipsis div:nth-child(3) {
114
+ left: 32px;
115
+ animation: lds-ellipsis2 0.6s infinite;
116
+ }
117
+
118
+ .lds-ellipsis div:nth-child(4) {
119
+ left: 56px;
120
+ animation: lds-ellipsis3 0.6s infinite;
121
+ }
122
+
123
+ @keyframes lds-ellipsis1 {
124
+ 0% {
125
+ transform: scale(0);
126
+ }
127
+
128
+ 100% {
129
+ transform: scale(1);
130
+ }
131
+ }
132
+
133
+ @keyframes lds-ellipsis2 {
134
+ 0% {
135
+ transform: translate(0, 0);
136
+ }
137
+
138
+ 100% {
139
+ transform: translate(24px, 0);
140
+ }
141
+ }
142
+
143
+ @keyframes lds-ellipsis3 {
144
+ 0% {
145
+ transform: scale(1);
146
+ }
147
+
148
+ 100% {
149
+ transform: scale(0);
150
+ }
151
+ }
152
+ `);
153
+ };
154
+ var LoaderStyle_default = LoaderStyle;
155
+
156
+ // src/app/components/Loader/Loader.tsx
157
+ var Loader = (props) => {
158
+ return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(LoaderStyle_default, null), (props == null ? void 0 : props.loading) && /* @__PURE__ */ import_react2.default.createElement("div", { className: "loader" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "lds-ellipsis" }, /* @__PURE__ */ import_react2.default.createElement("div", null), /* @__PURE__ */ import_react2.default.createElement("div", null), /* @__PURE__ */ import_react2.default.createElement("div", null), /* @__PURE__ */ import_react2.default.createElement("div", null))));
159
+ };
160
+ var Loader_default = Loader;
39
161
 
40
162
  // src/app/components/RequestPayment/RequestPayment.tsx
41
163
  var import_react_bootstrap = require("react-bootstrap");
42
164
 
43
165
  // src/app/components/RequestPayment/RequestPaymentstyles.tsx
44
166
  var import_react3 = __toESM(require("react"), 1);
167
+ var RequestPaymentstyles = (props) => {
168
+ return /* @__PURE__ */ import_react3.default.createElement("style", null, `
169
+ .paymentBtn {
170
+ background-color: black;
171
+ border: none;
172
+ color: white;
173
+ padding: 15px 32px;
174
+ text-align: center;
175
+ text-decoration: none;
176
+ display: inline-block;
177
+ font-size: 16px;
178
+ margin: 4px 2px;
179
+ cursor: pointer;
180
+ border-radius: 180px;
181
+ /* width: auto; */
182
+ }
183
+ .modal-backdrop {
184
+ display: none !important;
185
+ }
186
+ /* CSS for modal */
187
+ .modal {
188
+ /* display: none; */
189
+ position: fixed;
190
+ z-index: 5555;
191
+ left: 0;
192
+ top: 0;
193
+ width: 100%;
194
+ height: 100%;
195
+ overflow: auto;
196
+ background-color: rgba(0, 0, 0, 0.4);
197
+ }
198
+
199
+ .input-container {
200
+ position: relative;
201
+ }
202
+ .error {
203
+ border: 1px solid red;
204
+ background-color: #ffe6e6; /* light red background color */
205
+ }
206
+ .form-group {
207
+ margin-bottom: 15px;
208
+ }
209
+ .input-container input {
210
+ padding-right: 25px;
211
+ }
212
+
213
+ .modal-header {
214
+ border-bottom: 0 !important;
215
+ padding-top: 0 !important;
216
+ }
217
+
218
+ /* CSS for modal content */
219
+ .modal-content {
220
+ /* height: 90vh !important; */
221
+ height: auto;
222
+ padding: 20px 5px;
223
+ /* background: #fff; */
224
+ border-radius: 20px !important;
225
+ position: relative;
226
+ width: 430px;
227
+ margin: 30px auto;
228
+ overflow: inherit !important;
229
+ }
230
+ .input-container {
231
+ display: flex;
232
+ align-items: baseline;
233
+ }
234
+
235
+ .input-error-container {
236
+ flex: 1;
237
+ }
238
+
239
+ .paymentBtn {
240
+ margin-left: 10px;
241
+ }
242
+
243
+ .PayButton {
244
+ outline: 0 !important;
245
+ height: 46px;
246
+ font-size: 16px;
247
+ background-color: #161616 !important;
248
+ border: none;
249
+ display: block;
250
+ width: 100%;
251
+ border-radius: 180px;
252
+ margin: 10px 0;
253
+ }
254
+
255
+ #PayButton:hover {
256
+ background-color: #61c699 !important;
257
+ }
258
+
259
+ #PayButton:active {
260
+ background-color: #61c699 !important;
261
+ }
262
+
263
+ #PayButton:disabled {
264
+ background: rgb(172, 44, 170) !important;
265
+ color: #fff !important;
266
+ }
267
+
268
+ label {
269
+ color: rgba(53, 37, 77, 0.6);
270
+ margin-bottom: 2px;
271
+ text-transform: uppercase;
272
+ font-family: "IBM Plex Mono", monospace;
273
+ font-weight: 500;
274
+ font-size: 12px;
275
+ }
276
+
277
+ .input-container {
278
+ position: relative;
279
+ }
280
+
281
+ .input-container input {
282
+ padding-right: 25px;
283
+ }
284
+
285
+ #Checkout {
286
+ /* z-index: 100001; */
287
+ width: 100%;
288
+ /* height: 100%; */
289
+ /* background: 0 0 #ffffff; */
290
+ border-radius: 24px;
291
+ border: 1px solid #e0dfe2;
292
+ display: block;
293
+ }
294
+
295
+ .container {
296
+ margin-top: 10px;
297
+ }
298
+
299
+ .powered-logo {
300
+ width: 18px;
301
+ height: 18px;
302
+ /* float: right; */
303
+ padding: 2px;
304
+ background: #000000;
305
+ border-radius: 4px;
306
+ /* margin-left: 5px; */
307
+ }
308
+
309
+ .modal-content .container {
310
+ width: 100%;
311
+ }
312
+
313
+ .powerd-by-part {
314
+ display: flex;
315
+ justify-content: center;
316
+ align-items: center;
317
+ gap: 5px;
318
+ }
319
+
320
+ .errorText {
321
+ color: red;
322
+ }
323
+
324
+ .input-group {
325
+ position: relative;
326
+ }
327
+
328
+ .paynowbtn {
329
+ outline: 0 !important;
330
+ padding: 7px 25px !important;
331
+ font-size: 13px;
332
+ background-color: #161616 !important;
333
+ border: #161616 1px solid !important;
334
+ color: #fff !important;
335
+ display: inline-block !important;
336
+ border-radius: 180px !important;
337
+ }
338
+
339
+ .paynowbtn:hover {
340
+ background-color: #fff !important;
341
+ border: #161616 1px solid !important;
342
+ color: #161616 !important;
343
+ }
344
+
345
+ .ButtonGroup__root.btn-group {
346
+ margin: 10px 0 20px 0;
347
+ }
348
+
349
+ .ButtonGroup__root.btn-group button {
350
+ background: #000;
351
+ border: 0;
352
+ margin: 0 5px;
353
+ border-radius: 4px !important;
354
+ }
355
+
356
+ .ButtonGroup__root.btn-group button:hover,
357
+ .ButtonGroup__root.btn-group button:focus {
358
+ background: #333 !important;
359
+ }
360
+
361
+ .input-group button {
362
+ background: #000;
363
+ border: 0;
364
+ margin: 0 5px;
365
+ border-radius: 0 4px 4px 0 !important;
366
+ }
367
+
368
+ .input-group button:hover,
369
+ .input-group button:focus {
370
+ background: #333 !important;
371
+ }
372
+
373
+ .payment-suc {
374
+ text-align: center;
375
+ }
376
+
377
+ .payment-suc .modal-dialog {
378
+ min-width: 600px;
379
+ padding: 50px 0;
380
+ }
381
+
382
+ .payment-suc h2 {
383
+ font-size: 24px;
384
+ color: #35254d;
385
+ font-weight: 500;
386
+ padding: 15px 0;
387
+ }
388
+
389
+ .payment-suc p {
390
+ font-size: 14px;
391
+ color: #9a92a6;
392
+ font-weight: 500;
393
+ }
394
+
395
+ .payment-suc .btn-close {
396
+ position: absolute;
397
+ right: 20px;
398
+ }
399
+
400
+ .Checkout.container iframe {
401
+ width: 100%;
402
+ overflow: hidden !important;
403
+ }
404
+
405
+ .responsive-tbl {
406
+ overflow-x: auto;
407
+ }
408
+ body {
409
+ position: relative !important;
410
+ }
411
+ thead,
412
+ tbody,
413
+ tfoot,
414
+ tr,
415
+ td,
416
+ th {
417
+ white-space: nowrap;
418
+ }
419
+
420
+ .button-group {
421
+ display: flex;
422
+ gap: 10px;
423
+ }
424
+ .rqstonClickbtn {
425
+ color: #fff;
426
+ background-color: #337ab7;
427
+ border-color: #2e6da4;
428
+ }
429
+ .loading-animation {
430
+ position: absolute;
431
+ top: 50%;
432
+ left: 50%;
433
+ transform: translate(-50%, -50%);
434
+ }
435
+
436
+ .spinner {
437
+ width: 40px;
438
+ height: 40px;
439
+ border-radius: 50%;
440
+ border: 4px solid #f3f3f3;
441
+ border-top: 4px solid black;
442
+ animation: spin 1s linear infinite;
443
+ }
444
+
445
+ @keyframes spin {
446
+ 0% {
447
+ transform: rotate(0deg);
448
+ }
449
+ 100% {
450
+ transform: rotate(360deg);
451
+ }
452
+ }
453
+ /* .border-container {
454
+ display: flex;
455
+ flex-direction: column;
456
+ border: 0px solid #ccc;
457
+ padding: 20px;
458
+ border-radius: 10px;
459
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
460
+ align-items: baseline;
461
+ }
462
+ .payment-container {
463
+ border: 0px solid #ccc;
464
+ padding: 20px;
465
+ border-radius: 10px;
466
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
467
+ } */
468
+
469
+ .payment-row {
470
+ display: flex;
471
+ align-items: center;
472
+ margin-bottom: 20px;
473
+ }
474
+
475
+ .payment-row label {
476
+ width: 150px;
477
+ font-weight: bold;
478
+ margin-right: 10px;
479
+ }
480
+
481
+ .payment-row input {
482
+ flex-grow: 1;
483
+ margin-right: 10px;
484
+ }
485
+
486
+ .payment-row button {
487
+ flex-grow: 1;
488
+ }
489
+ .payment-row {
490
+ display: flex;
491
+ flex-direction: column;
492
+ border-radius: 10px;
493
+ margin-top: 10px;
494
+ }
495
+
496
+ .input-wrapper {
497
+ flex: 1;
498
+ }
499
+
500
+ .button-wrapper {
501
+ margin-left: 10px;
502
+ }
503
+ .input-container {
504
+ display: flex;
505
+ flex-direction: column;
506
+ }
507
+
508
+ .export-btn1 {
509
+ background: black;
510
+ color: white;
511
+ height: 35px;
512
+ width: 68px;
513
+ border-radius: 5px;
514
+ margin-top: 20px;
515
+ }
516
+
517
+ .export-btn {
518
+ background: black;
519
+ color: white;
520
+ height: 35px;
521
+ width: 68px;
522
+ border-radius: 5px;
523
+ margin-left: 14px;
524
+ }
525
+
526
+ .payment-popup {
527
+ padding: 12px 20px;
528
+ background: #fff;
529
+ border-radius: 20px;
530
+ position: relative;
531
+ width: 100%;
532
+ margin: 0 auto;
533
+ }
534
+
535
+ .modal-content {
536
+ max-width: 420px;
537
+ margin-top: 5%;
538
+ }
539
+ @media (max-width: 460px) {
540
+ .payment-popup {
541
+ padding: 35px 25px;
542
+ width: 98%;
543
+ }
544
+ }
545
+
546
+ .close-pop {
547
+ position: absolute;
548
+ right: 8px;
549
+ top: 8px;
550
+ border: 0;
551
+ padding: 0;
552
+ background: none !important;
553
+ }
554
+
555
+ .amex {
556
+ background-image: url("../amex.svg");
557
+ }
558
+
559
+ .visa {
560
+ background-image: url("../visa.svg");
561
+ }
562
+
563
+ .mastercard {
564
+ background-image: url("../mastercard.svg");
565
+ }
566
+
567
+ .discover {
568
+ background-image: url("../discover.svg");
569
+ }
570
+
571
+ .expiry-date-group {
572
+ float: left;
573
+ width: 30%;
574
+ }
575
+
576
+ .expiry-date-group input {
577
+ width: calc(100% + 1px);
578
+ border-top-right-radius: 0;
579
+ border-bottom-right-radius: 0;
580
+ }
581
+
582
+ .expiry-date-group input:focus {
583
+ position: relative;
584
+ z-index: 10;
585
+ }
586
+
587
+ .security-code-group {
588
+ float: right;
589
+ width: 40%;
590
+ position: relative;
591
+ }
592
+
593
+ .security-code-group input {
594
+ border-top-left-radius: 0;
595
+ border-bottom-left-radius: 0;
596
+ }
597
+
598
+ .zip-code-group {
599
+ clear: both;
600
+ }
601
+
602
+ #submitButton {
603
+ outline: 0 !important;
604
+ height: 46px;
605
+ font-size: 16px;
606
+ background-color: #161616 !important;
607
+ border: none;
608
+ display: block;
609
+ width: 100%;
610
+ border-radius: 180px;
611
+ }
612
+ #submitRequestButton {
613
+ outline: 0 !important;
614
+ height: 46px;
615
+ font-size: 16px;
616
+ background-color: #161616 !important;
617
+ border: none;
618
+ display: block;
619
+ width: 100%;
620
+ border-radius: 180px;
621
+ }
622
+ #PayButton {
623
+ outline: 0 !important;
624
+ height: 46px;
625
+ font-size: 16px;
626
+ background-color: #161616 !important;
627
+ border: none;
628
+ display: block;
629
+ width: 100%;
630
+ border-radius: 180px;
631
+ }
632
+
633
+ #PayButton:hover {
634
+ background-color: #61c699 !important;
635
+ }
636
+
637
+ #PayButton:active {
638
+ background-color: #61c699 !important;
639
+ }
640
+
641
+ #PayButton:disabled {
642
+ background: rgb(172, 44, 170) !important;
643
+ color: #fff !important;
644
+ }
645
+
646
+ .form-control {
647
+ color: #35254d;
648
+ }
649
+
650
+ .container {
651
+ margin-top: 10px;
652
+ }
653
+
654
+ #Checkout {
655
+ z-index: 100001;
656
+ width: 100%;
657
+ height: 100%;
658
+ min-height: 100%;
659
+ background: 0 0 #ffffff;
660
+ border-radius: 24px;
661
+ border: 1px solid #e0dfe2;
662
+ margin-left: auto;
663
+ margin-right: auto;
664
+ display: block;
665
+ }
666
+
667
+ #Checkout .header {
668
+ display: flex;
669
+ /* Enables Flexbox */
670
+ justify-content: center;
671
+ /* Centers content horizontally */
672
+ align-items: center;
673
+ /* Centers content vertically */
674
+ text-align: center;
675
+ padding: 8px;
676
+ border-bottom: 1px solid #dedede;
677
+ margin: 0 10px 20px 10px;
678
+ }
679
+
680
+ #Checkout .header button {
681
+ border: 0;
682
+ background: none;
683
+ padding: 0;
684
+ }
685
+
686
+ #Checkout h1 {
687
+ margin: 0;
688
+ flex: 1;
689
+ padding: 10px;
690
+ /* Allows the title to grow and fill the space for centering */
691
+ font-size: 23px;
692
+ font-weight: 500;
693
+ color: #35254d;
694
+ align-items: start;
695
+ display: flex;
696
+ }
697
+
698
+ #Checkout > form {
699
+ margin: 0 25px 10px 25px;
700
+ }
701
+
702
+ label {
703
+ color: rgba(53, 37, 77, 0.6);
704
+ margin-bottom: 2px;
705
+ text-transform: uppercase;
706
+ font-family: "IBM Plex Mono", monospace;
707
+ font-weight: 500;
708
+ font-size: 12px;
709
+ }
710
+
711
+ .input-container {
712
+ position: relative;
713
+ }
714
+
715
+ .input-container input {
716
+ padding-right: 25px;
717
+ }
718
+
719
+ #zipcode {
720
+ text-transform: capitalize !important;
721
+ }
722
+
723
+ #zipcode {
724
+ width: 18px;
725
+ position: absolute;
726
+ right: 8px;
727
+ top: 9px;
728
+ }
729
+
730
+ #zipcode .zip-tip {
731
+ display: none;
732
+ background-color: rgb(0, 0, 0, 0.4);
733
+ padding: 5px 8px;
734
+ border-radius: 6px;
735
+ position: absolute;
736
+ right: 26px;
737
+ top: -9px;
738
+ font-size: 12.5px;
739
+ text-transform: capitalize !important;
740
+ color: #fff;
741
+ width: 240px;
742
+ line-height: 16px;
743
+ }
744
+
745
+ #zipcode .zip-tip:before {
746
+ width: 0;
747
+ height: 0;
748
+ border-top: 7px solid transparent;
749
+ border-bottom: 7px solid transparent;
750
+ border-left: 7px solid #000;
751
+ opacity: 0.4;
752
+ position: absolute;
753
+ right: -7px;
754
+ top: 50%;
755
+ transform: translateY(-50%);
756
+ content: "";
757
+ }
758
+
759
+ #zipcode:hover .zip-tip {
760
+ display: block;
761
+ }
762
+
763
+ .input-container > i,
764
+ a[role="button"] {
765
+ color: #d3d3d3;
766
+ width: 25px;
767
+ height: 30px;
768
+ line-height: 30px;
769
+ font-size: 16px;
770
+ position: absolute;
771
+ top: 5px;
772
+ right: 6px;
773
+ cursor: pointer;
774
+ text-align: center;
775
+ }
776
+
777
+ .input-container > i:hover,
778
+ a[role="button"]:hover {
779
+ color: #777;
780
+ }
781
+
782
+ .amount-placeholder {
783
+ white-space: nowrap;
784
+ font-size: 44px;
785
+ /* height: 35px; */
786
+ font-weight: 600;
787
+ line-height: 40px;
788
+ }
789
+
790
+ .amount-placeholder > button {
791
+ float: right;
792
+ width: 60px;
793
+ }
794
+
795
+ .amount-placeholder > span {
796
+ line-height: 34px;
797
+ }
798
+
799
+ .top-amnt {
800
+ display: flex;
801
+ margin-bottom: 10px;
802
+ align-items: center;
803
+ justify-content: space-between;
804
+ }
805
+
806
+ .amtleft {
807
+ text-align: center;
808
+ }
809
+
810
+ .amtleft span {
811
+ color: #35254d;
812
+ margin: 0 -5px;
813
+ }
814
+
815
+ .card-row {
816
+ text-align: right;
817
+ margin: 22px 0 0 0;
818
+ max-width: 85px;
819
+ line-height: 20px;
820
+ }
821
+
822
+ .yer {
823
+ border-radius: 0;
824
+ }
825
+
826
+ .card-row span {
827
+ width: 33px;
828
+ height: 21px;
829
+ margin: 0 2px;
830
+ background-repeat: no-repeat;
831
+ display: inline-block;
832
+ background-size: contain;
833
+ }
834
+
835
+ .card-image {
836
+ background-repeat: no-repeat;
837
+ padding-right: 50px;
838
+ background-position: right 2px center;
839
+ background-size: auto 90%;
840
+ }
841
+
842
+ /* .cvc-preview-container {
843
+ overflow: hidden;
844
+ } */
845
+
846
+ .cvc-preview-container {
847
+ /* overflow: hidden; */
848
+ position: absolute;
849
+ z-index: 9999;
850
+ right: -71px;
851
+ top: -54px;
852
+ width: 165px;
853
+ border-radius: 5px;
854
+ padding: 5px;
855
+ background-color: rgb(0, 0, 0, 0.3);
856
+ display: none;
857
+ }
858
+
859
+ .cvc-preview-container:before {
860
+ position: absolute;
861
+ left: 50%;
862
+ transform: translate(-50%);
863
+ bottom: -5px;
864
+ width: 0;
865
+ height: 0;
866
+ border-left: 5px solid transparent;
867
+ border-right: 5px solid transparent;
868
+ border-top: 5px solid #000;
869
+ opacity: 0.3;
870
+ content: "";
871
+ }
872
+
873
+ .security-code-group #cvc:hover .cvc-preview-container {
874
+ display: block;
875
+ }
876
+
877
+ .cvc-preview-container.two-card div {
878
+ width: 50%;
879
+ height: 45px;
880
+ }
881
+
882
+ .cvc-preview-container.two-card div.amex-cvc-preview {
883
+ float: right;
884
+ }
885
+
886
+ .cvc-preview-container.two-card div.visa-mc-dis-cvc-preview {
887
+ float: left;
888
+ }
889
+
890
+ /* .cvc-preview-container div {
891
+ height: 160px;
892
+ } */
893
+
894
+ .amex-cvc-preview {
895
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAYAAAAlzXSMAAAAAXNSR0IArs4c6QAAFg9JREFUeNrtnfeTFcXaxw+ZBZacM0oGySBIXECiSBQQAQFhJaclo+SgAsuS2QVBlrCLSlQBAVGCCpK5XiW4vFVvvXX/gPvDe9+qt+r2Pd9eeuiZ6TkBzuI563erPgVn5jk93T397X76mTndPl+Qv0+v3I/PuHW/MiEkMkBTvnD/3vr883wZdx6NyriX9XXmvax/Zt57LAghkSbrn9AYtAbNBRTlwTuP22Tce/wbK42QFwc0B+0ZRXno9h8D/Ab/YkUR8qeI81/QoE2U++8+apF59/H/soII+RPxaxBaVLrMk3k36yYrhpBoEGfWTWjSl3H30ZusEEKiyK31a9IvzMfprAxCokmYj9N9B289/Acrg5DoAZr0Zdz54/9ZGYRE0Yjp16SPFUFI9EFhEkJhEkIoTEIoTEIIhUkIhUkIoTAJoTBZCYRQmIQQCpMQCpMQQmESQmESQihMQihMEsFfn2eJTad+ENvP/8z6iEIO3flDpHx9QWw5c1kcuv0o4vYxJcx1R06LPHnzSuJLlhLp13832jVt38myA/O27radT0pJtZ1v1qGLda5VQnfbOROVatay7Nt072W0KRRXRJSuUFG07NJNLE//wnb9es1bSZvqdeq78p588rxo0q6D/L7P55PEFYsXvUeOFXt/vudZN598eSqkumnbo4+0yV+goPyO83zF6jXl+b6jxwe8F60SXg9eTzWy62lx2n6RN18+eaxByzay09HTavJaR+s7i9PSjfWK7xcoVEiWrU6T5mL6J5uN5fK6Dy06dxPLPjts+86rr/cOWobyVavZvoOy4PoFCxe27g/y1q5nX5HyzfeueoJ93aYtXPbIL4SaK4SJxqkKByav3mC0e6VtB5td73fG2M73HD7adh4NQ53DDdTPmahQrYatgQazhwhWZxy3voMbheNVX65jy9f0jzfZbqATNJJdl26a68ZfRt12yhpz3aAxKhvkwykSXAPn+owaF/BeoMMJWk9Vq1v2nfsPto6/v/wj6/iMdVus4x3fGGAdb921R9D0xy9ZbSyXF/nyFxArDxx92ql26xn0O2UrVbbsl+7NlKJ6ml5+m22p8hVE2sUblj06At3GZV+uvEj74XpsC3P/jd9F0eIlbAXDyBOKMJ0CqFzzJW9hduoqjxUrUVKsPfyVkfXHvnUJs0h8/FObzJNixf4vRbchw61roIdU30GP68xX6ve/iLiixeTxkmXLiVnJ26UIMYK26/WGlU7XwcOeq26cDThx2dpnEqbqwHDdUOpp95XbokSZstZ30CDhAaBx4lh8qdK2TsdZr2syT8iG3n/cRKuB4zvKLVTlKlykqOs+vD70Hau8EKNTmPBIvMqw7ugZy755x4Qn+S8uVh86Jju1fdf+LgZOmGKlPyhxqqstoQyrDh6V9um//CYGJj61x3djWphwXVRh2vd50/q/fvOdwqxet75lt/PCNXkOczZ1rEa9Bp4jJhpRKPlSDQgulmte4W80ELjMi+a2mkbM7m+NsPKFRuicn6AsaNCv9e7nrhv/SBtq3TiFifzpggh3xCxRumzI93DWhm220VH3gKau3RhyveojHeZserkgAtP8rnjpMvJ8lZdqu9JBHYSSf9WeXm7c1JV+w1avSjd98MTp1nHVvl5q+IrbvnXbbPv3p8W2MBu3bS8LWa1OPbHju6vS/ze5qbowMV8sV7mKzbWD+6vcLNWj5ZQw0eDhPuF8sw6dAwoT8zHlXpqugxHH6Xaa6gYdT6C6UQ1YdRigy4C3XogwnS6qyqdeN047U7126DvASkN1KoGEiborULCgPI+28azC1N1xeCRwpbd+e9nTHvUajn3MCXPz6UtWAUfMWmAFeJRb4Qx06MLs3H+I/H+nNwfJc/gXnxMGDQsoTIDAgQm9d1fCRGCi39hESd9R70mXs0zFylZaSSk7PYV58NZDyz3r2G9geHVz6qKrblAer7pRDRi9Na6lvrt83+fPPMf0rqdk1/fQqUI8+ndNjVUJE2WAO7/hxDnpPg6blmTVlT6HVeXCfN55HzBPVNebuX6rceT1KsOkless+61nr9g6NAWmRhj59Pnls9jHnDDht8seNk8esf3cTy73zRkE0oU5edV6a2KOc4jQZbtOyUGF6YV+s4IFfzCi6MEOkzC3nf3xaaDK7949c908ebQSqG50YWKep+amGG3RQUQy+DNxxSdG916fYmC+HWxkNYHy6p1dsOAPXNkJS9Z4usReJC5d4xokMOdHR2wKCqKj1O3hamP6YbT3dyxO+5gRJvxxJSbcUMy/AHp45SbWbdbSU5jojfVRS/0fjdgoTC34s3L/ESN6JE0fMfu/N0mOQqpHR8+48/trrjI5hXng5gPLrTPNIT3rxt/ITXWTHQ0sYAwC6cLEZzQ8VScjkxaGLUwIO5R6UoyYOd/VQJ2CCdThYRRD3udv22MsF1xW3Ad4Ruo+YJqAkdprrorgj1cZEJQzlf+zq7+K2Rt3iB7DR8lOX+WvVsPGnvZof3gioNvXbNAoNoU5f9unQXs1oEfPdGHic7kqVS0h4F88q9NFaBLm88wxP9h1wAqrl6lQyfWSgGmOid5W3qj6DY3XeXvmPOmeobGEWzd6EMgpTMxbVX7Q6OE6hhOVDWeOCZdUzfXQOPFdKYyixaTbZ6pXdJCIZIJAD+ZNc8wlezIsceJ68ExMwgxljokOFp7S8BlzRfKJ87ZzyFujNu2s+t59+ZYUdCB7FRcAOenS5pgwdXcD8wcn6lyvEe96ClOfhAM8xvAUZoSCP4jOqeshAqcHboJFZdGgnEEkPBqQvX/NWlZaodaNHgRyClO9nKA/n8uJ4A/yjNFbpT9nU5qc75keWQUL/oQqTDB0ymzrGvVbtrbdh3CEiY7D1NYUqC/rCYBfxPr0BKOk0x4vcKjzptE8qoWJXidYUKRq7bpPAx3+nsgkTBWJVUz7KCWoMJHeotR9nuDZYSBhYr4GN8XkrpmEiV5TjVZoXIjgrT9+Vr4JA/dIpTN24TKrBw+rbp4EgUzCBP3GTAhLmOHW05gFS43PdPW5qv5MNVC0OxxhYpR9qVET6xrjFq9wu7L+ETtQGVTdwZtR81uMhHhzB3PE8R+usjwB5Y1J+yf3X9pPn5Nt75+j4t6qOaf+skrMCPOd2QutClWvajkZPfeDp4GOVeuNwtR7L72HUo0r3OCPmqMG69nxCqGa66HBqPmm15s/GEUw3/G6Jhof5txyrjZrQXh18yQIBFGYhIk5kB69jETwR9bTuZ9kYywUF2cJWZ9347x6sQL/Kncz3BFTlcv0uAQdnPIgUL/q/ocS/NGflcKzMAVx9Mc/+twX9z+4/aexJ0z47XgLBg/nVYN0gpEG8zjY4f1KHEPUDJ/xqETZ4aEwjunPCREgwDE8lHceC4ZqXHCT8Rmjkyl/EJD6jmrsaNT4DBfXaY9GgEamgjrobRG8wEiJIJGyw3fDqRuIGsfgxut1pTN3yy4rr0MmzQj6TC+kerpwTY7o6rPqPHUwgqjz6plqsHp1ospVpdbLxvMj5yyyrtHz7WzXEo/MQimDPjfFfBH3R3k36lU/zBmd7+KqebWXPV7x469LYpBPr9zxi/E+6yKK7w+mW5i25IQ9hUkIf49JCKEwCaEwCSEUJiGEwiSEwiSEUJiEUJiEEAqTEAqTEEJhEkIoTEIoTEIIhUkIhUkIoTAJoTAJIRQmIYTCJITCJIRQmIRQmIQQCpMQCpOQP53Dtx6IIxdvRD+Xbsq8UpgkV3N29wHxt4FDRFar1uK/mjePCZDXXwcOlnmnMEmu4+e5i2JGjF6gDBQmyTWc2XfYNQo96JIQEzhHd5SFwiS5gtujx1oN+/qUGeLwk705Y2I+7M8r8qzyj7JQmCRX8LBjJ6thf3nldszlH3lW+X/YqTOFSXIHuivIMlCYhMKkMAmhMClMQmFSmIRQmBQm+YsLc89Pd0WVl2qLWg0bu87NWLdFNG7bXlSqWUs0fvU1+Vk/v/n0JdHpzUGiWp16omHrtmLq2o2e15m7ZZcoU6GSSBg4lMIkFGYg0n/5TTTvmCB8Pp8oUaas7Vzi0jXyOIgvVdr6P47jfNrFGyK+ZCl5rHjpMtb5sQuXua6z69JNmT7Ot+zSjcIkFKYXszZsE2UqVrYE5RRmlVovy+PTP9ksP4+as1h+rl63vvwMAeJzh74DRMbdLDFp5Tr5GaOn81pte/SxrkNhEgozgB0EVqBgQdFvzASXMCG0aR+liJFJC8WBm/flsaV7M6Vdxeo1Lbvt536SIyf+//7yj+T5Zh262K6DdJSgKUxCYQZp1GMWLhVbzlwWySfOG0dMJ537D5F2pjli6649RP4CBUWpcuXFx19881S4538WRYsXl3PYmeu3UpiEwgy1UYcizOHT50ibQnFF5CjpnKcWLFxYnkeQaMH2vda5Zh06izx584rVh46JuZvTKExCYUZKmEMmzZDn4fYu3PGZ6zzcXrBi/5fSDiPn1rNXxIQl2cGjnsNHi92Xb1kuLcSKzxQmoTCfUZhDp8y2RsoPdx90CRKu6t6f79nmrbDHY5UWnbtZAR8Tau5KYRIK08CGE+eMwkxK2SmP582XT4ry0O1HFjiPuSbOv/HuePn50yt3RL78BeSxlfuPiIGJU+SzT0X1OtmixSMWfD546yGFSSjMcEfMmvUbGkc6BHNwHuKDaHGsYatXZbQW/2/Qso04dOcP4wsGnGMSCjPERp3yzfeiZNlyoka9Btaxrd9elhFWHHeCCKsuNvW8s3CRoqJz/8Ge88dFqfvk92FDYRIK8wWQfv13Oefku7KE8CV2CpNQmBQmIRQmhUlyF/e797Aa9bGzV2Iu/8izyj/KQmGSXMGNxElWw743ZKj46tiZ2NgiwQ/yijyr/KMsFCbJFZz8+oLIatUq5ldiRxlQFgqT5Bq+25wmstq0iV1R+vOOMkSqPihMEjUcP3NJXJ09T24s9CCha/RvkeDPI/KKPCPvkawLCpOQKITCJITCJIRQmIRQmIQQCpMQCjM4+KEplnXoO3q8ixGzFojPrv7NZr/q4FGjbb+xicYlIYbPmGu0x3GszK3brz38lfyVuivtMRPEwp37nquc646cluno6aZ+/4un/bvzl5jzPX2O63eA+AGwM22AsuDX+aafLo2cs8hajjEUBiVOdaU/YPxkkfbDdZvduMUrjMcjwfSPNxnrBOCcyd50P6es2eCyxdIhgydOd9lidYJNp35w2c9K3m5Me+KKT1w/C8N9HjJ5pjvtCVPkvYtKYeIGFihUyHO9lN7vjLHZ939vkqdtvvz5bSubQXhYw8XLPmHQMOO6LyawAhp+aPus5YQQnGliqQtjZ3X7kW3FbydYVFi3f++DlQHXnMHKbbq9Wkxq6tpkWwcZSKhFi5dw10mePK7OEPUEFqelR1yYccXiPcuIc7otFtMKVCezN+6w2ddv2drTFj+Q1m3VurNe6PUKmrbv5GlbtlLl6HVlsVgRRkYnpcpXkCuNOe1NtuOXrJYFXb7vc0faD4z2FarVkEtDuNP+1WWLHhZp45fpz1NOlTZG60DCBFgnxpTv2k2aiaq167rs9137u8t2/rY9TxqKfZ8N1BGOT1613jr29sx5ch0bLNHoJcxWCd1t6WPkdTUMj/VYIwE6WXRKznLiGM45PQ7VKem28FxwHPdAt0dHiC0UnGljvxJ0QLqt2lJhyZ4Mmy1GVhyHd6Hbl6tcRTRq086Vdve3Rkh7Uz1G9RyzdIWKRmGaQCMzCdOLSjVqGYVpAkvsR0KYitFzPwgqTC/qNmtpW/IiEGg4oQqz/7iJ8pjXchkQZpvuvYJeE43Y6YlEUpjt+7zpOo5jXsJcd/SM7Tg2B/ISJjoeZ9ooi5cwnZ4IXFYch/vrFOYrbTu40u414t3YFCbWTQlVmBNXfByWML1GTBNYojAWhfnBrgMvXJimKUIkhYmFs96ZvdAGjlGYOSRMTJixMBIqDmDugky36/WG0X7Pj3cs282nLlqbucBVCZb28vQv5DzIaxUzzE31tDu+MUCmjcDTixSmLR9PwBZyps1slIuv22J+juvM27o7IsJEJ6nSxkLHpmUZc1KYanU6EyEL038/KcwwgF9uqnDMk5y2+2/8bgwY1WzQyLhQkprTOYGLaooSm4IMGKVMSxXmlDD7jBong1mmfKOjMH2nXJWqLlusAIf6ioQwnWmjwTkjyzkpTHQ8G7/6zkWLTl0pzJwSZvLJ87Ky8DgAdBsy3BiVVWArNGU7dOpsuZcE1v5E2Ntpi0k5ghvKHkvZI+2ug80NCFE1ZTtsWpIMtuDmmMLmz4La5g3C3PHdVf8cqb/YdvZHV8cDV1vlQ4EgF4JIpnQRadRtX27cNLsBZRw3ChMjEFxjgPm8qVHpedbTfn3YyGxxr97gEmaJ0mWtdBX1mreSUe+cEOxrvfs9tzCxLyaFGaJrWyQ+3rXVmRdqD0O4qaHOX7F4bzjz10g9AtBHTBU5TUpJtc5j1MIxjGLPcx21uQ320nA+r4UHoFOsRElpi8YSStpolPrmrrowcd+c6WMtVtR5tAqTIyajsi9MmF5RWRPBXNlQhekVlUWjR+PPiXbCqOxfVJhqv8O/ojCxkQ48BWegJ9CI+aKFGdaISWGGBuZT2EIbE3gn2A7N+ZbLnE1pcnclpy2WvUch9c1E0ZiwTL0p7UJxcfKBsvNtEVPaiIQibbwx86zlRJQZUWCkB9dO7YOh5oEmYeKRjinv4xYtt88Z/e67SlunTpPmMp25ISxd4SVMtcUcXvbQ08acUd8eXR8xy1So5MoL5p05Icz1x8/Khu8Uptr1GZ2vng886MdxbGar25evWk3m0ZlvlCWuaDHXq35IA3Wg20J8OD5i5nybPWIU2GDImTbyja381OZFUSVM7JyEhmraOwLPp9ZmnrSPNvM+NO41gQpEQML5pg0eLZjSxo5M2CxGt0dgBQ3QaYuRG2+zPE9UFiO6KW0AASK6aAnzym2jnaLn26NdIzry6LTD9dCxBdoGTk8DbxU5Gwk6N8yxa7/S1FbvuF6bbj1dbwq169nXeH9wzHl/IsHSPZmygTufsWKkR+N35gWf8Yoc6thZfgTDXPemanWRuGyt/V1jf5mxs7TzfiJt7O7ljFSjY0Rw0pk2OgPERvjrEkL46xJCCIVJCKEwCaEwCSEUJiEUJiGEwiSEwiSEUJiEUJisBEIoTEIIhUkIhUkIoTAJoTAJIRQmIX9tYR649YAVQUgUAU36sHQDK4OQ6AGa9G0+ffH/WBmERA/QpG/ZZ59nsTIIiR6gSV/Spp2bd164xgohJAqAFqFJ3+wN29su3LFXpF//jRVDyJ8INAgtQpM+/PkVehILGXvtQkwIyWFR+rUHDUKLPvU3c2NqpaSUnf+zYPtese3cj8Yt8AghkQdag+agPWgQWvTpf7OSU1/xn/jvOZtS5Q7GySfOibSLN+RehtiTgRASGaApaAsag9agOWgPGvSZ/makpFTwGxxK2pT6bxgTQnIWaA2ag/Z8wf5mJW9tNGfjjmX+L13w8yApJfUfhJAIAU35tQWNQWsmDf4HqpjHZRJqxUwAAAAASUVORK5CYII=")
896
+ center center/contain no-repeat;
897
+ }
898
+
899
+ .visa-mc-dis-cvc-preview {
900
+ 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=")
901
+ center center/contain no-repeat;
902
+ }
903
+
904
+ .submit-button-lock {
905
+ height: 15px;
906
+ margin-top: -2px;
907
+ margin-right: 7px;
908
+ vertical-align: middle;
909
+ background: url("data:image/png;base64,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NQxdFfpzGC4sNKwm7Hm4VXh+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")
910
+ center center/contain no-repeat;
911
+ width: 14px;
912
+ display: inline-block;
913
+ }
914
+
915
+ .align-middle {
916
+ vertical-align: middle;
917
+ }
918
+
919
+ input {
920
+ box-shadow: none !important;
921
+ }
922
+
923
+ .powerd-by-part {
924
+ display: flex;
925
+ font-size: 12px;
926
+ text-align: center;
927
+ align-items: center;
928
+ justify-content: center;
929
+ margin: 5px 0 20px 0;
930
+ }
931
+
932
+ .powered-logo {
933
+ width: 18px;
934
+ height: auto;
935
+ float: right;
936
+ padding: 2px;
937
+ background: #000000;
938
+ border-radius: 4px;
939
+ margin-left: 5px;
940
+ }
941
+
942
+ .comp-name {
943
+ display: block;
944
+ margin-bottom: 8px;
945
+ }
946
+
947
+ .client-logo {
948
+ max-width: 140px;
949
+ display: block;
950
+ margin: auto;
951
+ padding: 5px;
952
+ }
953
+
954
+ #qrCode {
955
+ text-align: center;
956
+ }
957
+
958
+ #qrIcon {
959
+ cursor: pointer;
960
+ border: 1px solid rgb(252, 252, 252);
961
+ padding: 10px;
962
+ border-radius: 5px;
963
+ background: #ffffff;
964
+ }
965
+
966
+ #target {
967
+ display: none;
968
+ text-align: center;
969
+ transition: all 5s;
970
+ padding: 5px;
971
+ transition: max-height 0.5s, overflow 0.5s 0.5s;
972
+ }
973
+
974
+ /* input:focus {
975
+ border-color: #acc6db !important;
976
+ background-color: #acc6db !important;
977
+ } */
978
+
979
+ `);
980
+ };
981
+ var RequestPaymentstyles_default = RequestPaymentstyles;
982
+
983
+ // src/app/components/RequestPayment/RequestPayment.tsx
984
+ function RequestPayment(props) {
985
+ const fractalpayClientKey = props.fractalpayClientKey;
986
+ const masterBaseUrl = "https://testapi.fractalpay.com/";
987
+ const baseUrl = "https://staging-widget.fractalpay.com/";
988
+ const [show, setShow] = (0, import_react4.useState)(false);
989
+ const [loading, setLoading] = (0, import_react4.useState)(false);
990
+ const [errors, setErrors] = (0, import_react4.useState)({});
991
+ const [requestDetails, setRequestDetails] = (0, import_react4.useState)({
992
+ email: "",
993
+ amount: "",
994
+ phone_number: "",
995
+ order_id: "",
996
+ name: "",
997
+ fractalpayPublicKey: fractalpayClientKey
998
+ });
999
+ const [showConfirmationModal, setShowConfirmationModal] = (0, import_react4.useState)(false);
1000
+ const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
1001
+ const amountRegex = /[+-]?([0-9]*[.])?[0-9]+/;
1002
+ const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
1003
+ const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
1004
+ const handleClose = () => {
1005
+ setShow(false);
1006
+ emptyFields();
1007
+ setErrors({});
1008
+ };
1009
+ const handleShow = () => setShow(true);
1010
+ const handleCloseConfirmationModal = () => setShowConfirmationModal(false);
1011
+ const emptyFields = () => {
1012
+ setRequestDetails({
1013
+ email: "",
1014
+ amount: "",
1015
+ phone_number: "",
1016
+ order_id: "",
1017
+ name: "",
1018
+ fractalpayPublicKey: fractalpayClientKey
1019
+ });
1020
+ };
1021
+ const handleSubmit = (event) => {
1022
+ const message = {
1023
+ type: "preview.compiledcheck",
1024
+ other: __spreadProps(__spreadValues({}, event), { status: true })
1025
+ };
1026
+ console.log("message: ", message);
1027
+ window.parent.postMessage(message, "*");
1028
+ };
1029
+ const sendRequestPayment = async () => {
1030
+ setErrors({});
1031
+ if (!(requestDetails == null ? void 0 : requestDetails.email) && requestDetails.phone_number && !phoneNumberRegex(requestDetails.phone_number)) {
1032
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1033
+ phone_number: "Phone number should be 10 digits"
1034
+ }));
1035
+ return;
1036
+ }
1037
+ if (!validateForm()) {
1038
+ return;
1039
+ }
1040
+ try {
1041
+ setLoading(true);
1042
+ const formData = {
1043
+ fractalpayPublicKey: fractalpayClientKey,
1044
+ amount: requestDetails.amount,
1045
+ phone_number: requestDetails.phone_number,
1046
+ order_id: requestDetails.order_id,
1047
+ action: "request",
1048
+ name: requestDetails.name,
1049
+ email: requestDetails.email
1050
+ };
1051
+ let response = await import_axios.default.post(`${baseUrl}create-widget-order`, formData);
1052
+ if ((response == null ? void 0 : response.status) === 200) {
1053
+ setShowConfirmationModal(true);
1054
+ setShow(false);
1055
+ emptyFields();
1056
+ handleSubmit(response == null ? void 0 : response.data);
1057
+ }
1058
+ console.log(response == null ? void 0 : response.data);
1059
+ setLoading(false);
1060
+ } catch (error) {
1061
+ console.log(error);
1062
+ setLoading(false);
1063
+ }
1064
+ };
1065
+ const validateAmount = (amount) => {
1066
+ return amountRegex.test(amount);
1067
+ };
1068
+ const handleChange = (e) => {
1069
+ const { value } = e.target;
1070
+ const token = e.target.dataset.token;
1071
+ setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
1072
+ if (token === "name" && !isAlpha(value)) {
1073
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1074
+ [token]: "Only letters are allowed"
1075
+ }));
1076
+ return;
1077
+ }
1078
+ if (token === "phone_number" && !phoneNumberRegex(value)) {
1079
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1080
+ [token]: "Phone number should be 10 digits"
1081
+ }));
1082
+ return;
1083
+ }
1084
+ if (token === "email" && !isValidEmail(value)) {
1085
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1086
+ email: "Invalid email format"
1087
+ }));
1088
+ return;
1089
+ }
1090
+ if (value) {
1091
+ setErrors(__spreadProps(__spreadValues({}, errors), { [token]: "" }));
1092
+ }
1093
+ };
1094
+ const handleAmountBlur = () => {
1095
+ const value = requestDetails.amount;
1096
+ if (value && !value.includes(".")) {
1097
+ setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
1098
+ amount: `${value}.00`
1099
+ }));
1100
+ }
1101
+ };
1102
+ const validateForm = () => {
1103
+ let newErrors = {};
1104
+ if (!requestDetails.name) newErrors.name = "Full Name is required";
1105
+ if (!requestDetails.amount) newErrors.amount = "Amount is required";
1106
+ if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = "Phone or Email is required";
1107
+ if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = "Phone or Email is required";
1108
+ if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = "Invalid email";
1109
+ setErrors(newErrors);
1110
+ return Object.keys(newErrors).length === 0;
1111
+ };
1112
+ return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react4.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react4.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal, { show, onHide: handleClose }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")), /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ import_react4.default.createElement(
1113
+ "input",
1114
+ {
1115
+ className: "form-control",
1116
+ type: "text",
1117
+ placeholder: "Full Name",
1118
+ "data-token": "name",
1119
+ onChange: handleChange
1120
+ }
1121
+ ), errors.name && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ import_react4.default.createElement(
1122
+ "input",
1123
+ {
1124
+ maxLength: 10,
1125
+ className: "form-control",
1126
+ onChange: (e) => {
1127
+ handleChange(e);
1128
+ },
1129
+ placeholder: "Phone Number",
1130
+ type: "text",
1131
+ "data-token": "phone_number"
1132
+ }
1133
+ ), errors.phone_number && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ import_react4.default.createElement(
1134
+ "input",
1135
+ {
1136
+ className: "form-control",
1137
+ type: "text",
1138
+ placeholder: "Email",
1139
+ onChange: handleChange,
1140
+ "data-token": "email"
1141
+ }
1142
+ ), errors.email && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ import_react4.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ import_react4.default.createElement(
1143
+ "input",
1144
+ {
1145
+ "data-token": "amount",
1146
+ type: "number",
1147
+ className: "form-control",
1148
+ value: requestDetails.amount,
1149
+ onChange: handleChange,
1150
+ onBlur: handleAmountBlur
1151
+ }
1152
+ )), errors.amount && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ import_react4.default.createElement(
1153
+ "input",
1154
+ {
1155
+ className: "form-control",
1156
+ type: "text",
1157
+ placeholder: "Order Id",
1158
+ onChange: handleChange,
1159
+ "data-token": "order_id"
1160
+ }
1161
+ ), errors.order_id && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react4.default.createElement(
1162
+ import_react_bootstrap.Button,
1163
+ {
1164
+ type: "button",
1165
+ className: "PayButton",
1166
+ onClick: sendRequestPayment,
1167
+ disabled: loading
1168
+ },
1169
+ loading ? "Loading..." : "Send Request"
1170
+ )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react4.default.createElement(
1171
+ "svg",
1172
+ {
1173
+ xmlns: "http://www.w3.org/2000/svg",
1174
+ width: "20",
1175
+ height: "20",
1176
+ viewBox: "0 0 26 26"
1177
+ },
1178
+ /* @__PURE__ */ import_react4.default.createElement(
1179
+ "path",
1180
+ {
1181
+ fill: "currentColor",
1182
+ 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"
1183
+ }
1184
+ )
1185
+ ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react4.default.createElement(
1186
+ "img",
1187
+ {
1188
+ src: "https://ui.fractalpay.com/favicon.ico",
1189
+ alt: "Fractal logo",
1190
+ className: "powered-logo"
1191
+ }
1192
+ )))), /* @__PURE__ */ import_react4.default.createElement(
1193
+ import_react_bootstrap.Modal,
1194
+ {
1195
+ className: "payment-suc",
1196
+ show: showConfirmationModal,
1197
+ onHide: handleCloseConfirmationModal
1198
+ },
1199
+ /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
1200
+ /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ import_react4.default.createElement(
1201
+ "svg",
1202
+ {
1203
+ width: "60",
1204
+ height: "60",
1205
+ viewBox: "0 0 60 60",
1206
+ fill: "none",
1207
+ xmlns: "http://www.w3.org/2000/svg"
1208
+ },
1209
+ /* @__PURE__ */ import_react4.default.createElement(
1210
+ "rect",
1211
+ {
1212
+ x: "0.5",
1213
+ y: "0.5",
1214
+ width: "59",
1215
+ height: "59",
1216
+ rx: "29.5",
1217
+ stroke: "#31B379"
1218
+ }
1219
+ ),
1220
+ /* @__PURE__ */ import_react4.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react4.default.createElement(
1221
+ "path",
1222
+ {
1223
+ d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
1224
+ fill: "#31B379"
1225
+ }
1226
+ )),
1227
+ /* @__PURE__ */ import_react4.default.createElement("defs", null, /* @__PURE__ */ import_react4.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react4.default.createElement(
1228
+ "rect",
1229
+ {
1230
+ width: "22",
1231
+ height: "22",
1232
+ fill: "white",
1233
+ transform: "translate(19.5 19.0039)"
1234
+ }
1235
+ )))
1236
+ ), /* @__PURE__ */ import_react4.default.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ import_react4.default.createElement("br", null), " sent successfully"))
1237
+ ));
1238
+ }
1239
+
1240
+ // src/app/components/Greet.tsx
1241
+ var import_axios2 = __toESM(require("axios"), 1);
1242
+ var import_react5 = __toESM(require("react"), 1);
1243
+ var import_bootstrap_min = require("bootstrap/dist/css/bootstrap.min.css");
1244
+ function PaywithFractal({ name, amount, orderId, fractalPayClientKey }) {
1245
+ const baseUrl = "http://192.168.1.52:8082/";
1246
+ const masterBaseUrl = "http://192.168.1.52:8081/";
1247
+ console.log(name, "name", window == null ? void 0 : window.DatacapWebToken);
1248
+ const [dcToken, setDcToken] = (0, import_react5.useState)("");
1249
+ const [error, setError] = (0, import_react5.useState)({});
1250
+ const [toggleQr, setToggleQr] = (0, import_react5.useState)(false);
1251
+ const [formData, setFormData] = (0, import_react5.useState)({
1252
+ name: "John Doe",
1253
+ card_number: "4761 7310 0000 0043",
1254
+ exp_month: "12",
1255
+ exp_year: "2024",
1256
+ cvv: "201",
1257
+ zip: ""
1258
+ });
1259
+ const [loading, setLoading] = (0, import_react5.useState)(false);
1260
+ const [show, setShow] = (0, import_react5.useState)(false);
1261
+ const handleSubmit = async (e) => {
1262
+ var _a, _b, _c, _d, _e, _f, _g;
1263
+ e.preventDefault();
1264
+ const data = {
1265
+ description: "widget payment",
1266
+ amount: amount || "1.00",
1267
+ phone_number: "1234567908",
1268
+ zip: formData.zip,
1269
+ orderId: orderId || "",
1270
+ fractalpayPublicKey: fractalPayClientKey
1271
+ };
1272
+ if (Object.keys(error).length < 1) {
1273
+ try {
1274
+ setLoading(true);
1275
+ const res = await import_axios2.default.post(`${baseUrl}create-widget-order`, data, {
1276
+ headers: {
1277
+ "Content-Type": "application/json"
1278
+ }
1279
+ });
1280
+ if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
1281
+ console.log("token", (_b = res.data) == null ? void 0 : _b.data);
1282
+ setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
1283
+ const tokenCallback = async (response) => {
1284
+ var _a2, _b2, _c2;
1285
+ console.log("response for token call back", response);
1286
+ if (response.Error) {
1287
+ alert("if");
1288
+ console.log("Error: ", response);
1289
+ setLoading(false);
1290
+ } else {
1291
+ const headers = {
1292
+ "Content-Type": "application/x-www-form-urlencoded"
1293
+ };
1294
+ const quickData = __spreadValues({
1295
+ name: formData.name,
1296
+ postal_code: formData.zip
1297
+ }, response);
1298
+ try {
1299
+ const resp = await import_axios2.default.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
1300
+ headers
1301
+ });
1302
+ setLoading(false);
1303
+ console.log("quick response", resp);
1304
+ if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
1305
+ console.log("Payment success!", resp == null ? void 0 : resp.data);
1306
+ setFormData({
1307
+ name: "John Doe",
1308
+ card_number: "4761 7310 0000 0043",
1309
+ exp_month: "12",
1310
+ exp_year: "2024",
1311
+ cvv: "201",
1312
+ zip: ""
1313
+ });
1314
+ } else {
1315
+ console.log("Payment failed!", resp == null ? void 0 : resp.data);
1316
+ }
1317
+ } catch (error2) {
1318
+ console.log("Error: ", error2);
1319
+ setLoading(false);
1320
+ }
1321
+ }
1322
+ };
1323
+ window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
1324
+ } else {
1325
+ setLoading(false);
1326
+ console.log("res", (_g = res.data) == null ? void 0 : _g.data);
1327
+ }
1328
+ } catch (error2) {
1329
+ setLoading(false);
1330
+ console.log(error2);
1331
+ }
1332
+ }
1333
+ };
1334
+ const handleCardFormat = (numericValue) => {
1335
+ const cleaned = ("" + numericValue).replace(/\D/g, "");
1336
+ const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
1337
+ if (match) {
1338
+ return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
1339
+ }
1340
+ return numericValue;
1341
+ };
1342
+ const handleCardNumberChange = (value) => {
1343
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
1344
+ if (value && value.match(/[a-zA-Z]/)) {
1345
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1346
+ card_number: "Invalid input. Please enter only numbers."
1347
+ }));
1348
+ } else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
1349
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1350
+ card_number: "Invalid Card Number"
1351
+ }));
1352
+ } else if (!value.length) {
1353
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1354
+ card_number: "Card Number required"
1355
+ }));
1356
+ } else {
1357
+ setError({});
1358
+ }
1359
+ };
1360
+ const handleMonthChange = (value) => {
1361
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
1362
+ if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
1363
+ setError({});
1364
+ } else if (!value.length) {
1365
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1366
+ exp_month: "Month is required"
1367
+ }));
1368
+ } else {
1369
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1370
+ exp_month: "Value should be between 1 and 12"
1371
+ }));
1372
+ }
1373
+ };
1374
+ const handleYearChange = (value) => {
1375
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
1376
+ if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
1377
+ setError({});
1378
+ } else if (!value.length) {
1379
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1380
+ exp_year: "Year is required"
1381
+ }));
1382
+ } else {
1383
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1384
+ exp_year: "Invalid Expiration Date."
1385
+ }));
1386
+ }
1387
+ };
1388
+ const handleCVVChange = (value) => {
1389
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
1390
+ if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
1391
+ setError({});
1392
+ } else if (!value.length) {
1393
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1394
+ cvv: "CVV is required"
1395
+ }));
1396
+ } else {
1397
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1398
+ cvv: "Invalid CVV."
1399
+ }));
1400
+ }
1401
+ };
1402
+ const handleChange = (e) => {
1403
+ const token = e.target.getAttribute("data-token") || "";
1404
+ const value = e.target.value;
1405
+ setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
1406
+ if (token === "card_number") {
1407
+ handleCardNumberChange(value);
1408
+ }
1409
+ if (token === "exp_month") {
1410
+ handleMonthChange(value);
1411
+ }
1412
+ if (token === "exp_year") {
1413
+ handleYearChange(value);
1414
+ }
1415
+ if (token === "cvv") {
1416
+ handleCVVChange(value);
1417
+ }
1418
+ };
1419
+ (0, import_react5.useEffect)(() => {
1420
+ const scriptId = "my-script";
1421
+ const existingScript = document.getElementById(scriptId);
1422
+ if (!existingScript) {
1423
+ const script = document.createElement("script");
1424
+ script.src = "https://token-cert.dcap.com/v1/client";
1425
+ script.id = scriptId;
1426
+ script.async = true;
1427
+ script.onload = () => {
1428
+ if (typeof window !== "undefined" && window.DatacapWebToken) {
1429
+ console.log("DatacapWebToken", window.DatacapWebToken);
1430
+ } else {
1431
+ console.log("DatacapWebToken is not loaded yet.");
1432
+ }
1433
+ };
1434
+ document.head.appendChild(script);
1435
+ }
1436
+ return () => {
1437
+ const script = document.getElementById(scriptId);
1438
+ if (script) {
1439
+ document.head.removeChild(script);
1440
+ }
1441
+ };
1442
+ }, []);
1443
+ (0, import_react5.useEffect)(() => {
1444
+ const link = document.createElement("link");
1445
+ link.rel = "stylesheet";
1446
+ link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";
1447
+ document.head.appendChild(link);
1448
+ return () => {
1449
+ document.head.removeChild(link);
1450
+ };
1451
+ }, []);
1452
+ const handleClose = () => {
1453
+ setShow(false);
1454
+ };
1455
+ const handleOpen = () => {
1456
+ console.log("open");
1457
+ setShow(true);
1458
+ };
1459
+ console.log(show, "open");
1460
+ return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(Loader_default, { loading: true }));
1461
+ }
1462
+ // Annotate the CommonJS export names for ESM import in node:
1463
+ 0 && (module.exports = {
1464
+ PaywithFractal,
1465
+ RequestPayment
1466
+ });