@pinerohit11/testwidget 0.1.78 → 0.1.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +384 -61
- package/dist/index.mjs +376 -53
- package/package.json +2 -1
package/dist/index.mjs
CHANGED
|
@@ -121,7 +121,8 @@ var Loader = (props) => {
|
|
|
121
121
|
var Loader_default = Loader;
|
|
122
122
|
|
|
123
123
|
// src/app/components/baseurl.ts
|
|
124
|
-
var
|
|
124
|
+
var masterBaseUrl = "https://dev-sky-node.fractalpay.com/";
|
|
125
|
+
var baseUrl = "https://dev-widget.fractalpay.com/";
|
|
125
126
|
|
|
126
127
|
// src/app/components/Errortext.ts
|
|
127
128
|
var ErrorText = {
|
|
@@ -199,7 +200,7 @@ var CustomModal2styles = (props) => {
|
|
|
199
200
|
|
|
200
201
|
.fractal-popup {
|
|
201
202
|
position: fixed;
|
|
202
|
-
z-index:
|
|
203
|
+
z-index: 1050;
|
|
203
204
|
left: 0;
|
|
204
205
|
top: 0;
|
|
205
206
|
width: 100%;
|
|
@@ -1146,7 +1147,7 @@ function RequestPreAuthPayment(props) {
|
|
|
1146
1147
|
}
|
|
1147
1148
|
|
|
1148
1149
|
// src/app/components/Charge/GetPaymentPage.tsx
|
|
1149
|
-
import
|
|
1150
|
+
import React11, { useState as useState3 } from "react";
|
|
1150
1151
|
|
|
1151
1152
|
// src/app/components/Charge/Chargewidgetstyles.tsx
|
|
1152
1153
|
import React8 from "react";
|
|
@@ -1272,19 +1273,7 @@ function Chargewidgetstyles() {
|
|
|
1272
1273
|
grid-template-columns: 2fr 3fr;
|
|
1273
1274
|
padding: 50px 10% 20px ;
|
|
1274
1275
|
}
|
|
1275
|
-
// .pay-container {
|
|
1276
|
-
// display: flex;
|
|
1277
|
-
// // gap: ; /* Optional: spacing between the columns */
|
|
1278
|
-
// padding: 50px 10% 20px;
|
|
1279
|
-
// }
|
|
1280
1276
|
|
|
1281
|
-
// .pay-container > *:first-child {
|
|
1282
|
-
// flex: 2;
|
|
1283
|
-
// }
|
|
1284
|
-
|
|
1285
|
-
// .pay-container > *:last-child {
|
|
1286
|
-
// flex: 3;
|
|
1287
|
-
// }
|
|
1288
1277
|
.request-payment-close-popup {
|
|
1289
1278
|
position: absolute;
|
|
1290
1279
|
right: 20px;
|
|
@@ -1501,12 +1490,9 @@ function Chargewidgetstyles() {
|
|
|
1501
1490
|
padding: 20px 5%;
|
|
1502
1491
|
}
|
|
1503
1492
|
}
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
// padding: 20px 2%;
|
|
1508
|
-
// }
|
|
1509
|
-
// }
|
|
1493
|
+
|
|
1494
|
+
|
|
1495
|
+
|
|
1510
1496
|
|
|
1511
1497
|
|
|
1512
1498
|
|
|
@@ -1514,25 +1500,316 @@ function Chargewidgetstyles() {
|
|
|
1514
1500
|
}
|
|
1515
1501
|
|
|
1516
1502
|
// src/app/components/Charge/GetPaymentPage.tsx
|
|
1517
|
-
|
|
1503
|
+
import axios3 from "axios";
|
|
1504
|
+
|
|
1505
|
+
// src/app/components/SuccessMessage/SuccessMsz.tsx
|
|
1506
|
+
import React10 from "react";
|
|
1507
|
+
|
|
1508
|
+
// src/app/components/SuccessMessage/SuccessMszStyle.tsx
|
|
1509
|
+
import React9 from "react";
|
|
1510
|
+
function SuccessMszStyle() {
|
|
1511
|
+
return /* @__PURE__ */ React9.createElement("style", null, `
|
|
1512
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
|
1513
|
+
|
|
1514
|
+
body{
|
|
1515
|
+
display: flex;
|
|
1516
|
+
justify-content: center;
|
|
1517
|
+
align-items: center;
|
|
1518
|
+
padding-top: 30px;
|
|
1519
|
+
margin: 0;
|
|
1520
|
+
/* background-color: #f8f9fa; */
|
|
1521
|
+
flex-direction: column;
|
|
1522
|
+
}
|
|
1523
|
+
.payment-msg-container{
|
|
1524
|
+
min-height : 550px
|
|
1525
|
+
}
|
|
1526
|
+
|
|
1527
|
+
.logo-container {
|
|
1528
|
+
display: flex;
|
|
1529
|
+
justify-content: center;
|
|
1530
|
+
align-items: center;
|
|
1531
|
+
margin-bottom: -50px; /* Adjust this to overlap the content */
|
|
1532
|
+
z-index: 10;
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
.client-logo {
|
|
1536
|
+
max-width: 100px;
|
|
1537
|
+
height: auto;
|
|
1538
|
+
object-fit: contain;
|
|
1539
|
+
display: block;
|
|
1540
|
+
}
|
|
1541
|
+
|
|
1542
|
+
.payment-success-container {
|
|
1543
|
+
display: flex;
|
|
1544
|
+
flex-direction: column;
|
|
1545
|
+
align-items: center;
|
|
1546
|
+
padding: 18px 20px 24px;
|
|
1547
|
+
width: 335px;
|
|
1548
|
+
height: 400px; /* Fixed height */
|
|
1549
|
+
background: #ffffff;
|
|
1550
|
+
border-radius: 12px;
|
|
1551
|
+
position: relative;
|
|
1552
|
+
/* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
1553
|
+
border: 1px solid #e3e3e3; */
|
|
1554
|
+
justify-content: center;
|
|
1555
|
+
text-align: center;
|
|
1556
|
+
margin-top: 50px; /* Adjust this to move the content down */
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
.success-icon {
|
|
1560
|
+
display: flex;
|
|
1561
|
+
flex-direction: column;
|
|
1562
|
+
align-items: center;
|
|
1563
|
+
gap: 12px;
|
|
1564
|
+
width: 227px;
|
|
1565
|
+
height: 116px;
|
|
1566
|
+
z-index: 2;
|
|
1567
|
+
}
|
|
1568
|
+
|
|
1569
|
+
.circle {
|
|
1570
|
+
width: 40px;
|
|
1571
|
+
height: 40px;
|
|
1572
|
+
border: 1px solid #49b182;
|
|
1573
|
+
border-radius: 50%;
|
|
1574
|
+
display: flex;
|
|
1575
|
+
justify-content: center;
|
|
1576
|
+
align-items: center;
|
|
1577
|
+
}
|
|
1578
|
+
|
|
1579
|
+
.circle .fa-check-circle {
|
|
1580
|
+
font-size: 20px;
|
|
1581
|
+
color: #49b182;
|
|
1582
|
+
}
|
|
1583
|
+
|
|
1584
|
+
.success-text {
|
|
1585
|
+
display: flex;
|
|
1586
|
+
flex-direction: column;
|
|
1587
|
+
justify-content: center;
|
|
1588
|
+
align-items: center;
|
|
1589
|
+
gap: 4px;
|
|
1590
|
+
width: 227px;
|
|
1591
|
+
}
|
|
1592
|
+
|
|
1593
|
+
.payment-success-text {
|
|
1594
|
+
font-family: "Inter", sans-serif;
|
|
1595
|
+
font-weight: 500;
|
|
1596
|
+
font-size: 18px;
|
|
1597
|
+
line-height: 21px;
|
|
1598
|
+
text-align: center;
|
|
1599
|
+
letter-spacing: -0.02em;
|
|
1600
|
+
color: #161616;
|
|
1601
|
+
}
|
|
1602
|
+
|
|
1603
|
+
.thank-you-text {
|
|
1604
|
+
font-family: "Inter", sans-serif;
|
|
1605
|
+
font-weight: 500;
|
|
1606
|
+
font-size: 14px;
|
|
1607
|
+
line-height: 18px;
|
|
1608
|
+
text-align: center;
|
|
1609
|
+
letter-spacing: -0.02em;
|
|
1610
|
+
color: #161616;
|
|
1611
|
+
opacity: 0.5;
|
|
1612
|
+
}
|
|
1613
|
+
|
|
1614
|
+
.charge-payment-success-tick-div {
|
|
1615
|
+
display: flex;
|
|
1616
|
+
justify-content: center;
|
|
1617
|
+
align-items: center;
|
|
1618
|
+
margin-top: 32px;
|
|
1619
|
+
}
|
|
1620
|
+
.charge-payment-success-tick {
|
|
1621
|
+
border-radius: 1000px;
|
|
1622
|
+
background: rgba(97, 198, 153, 0.14);
|
|
1623
|
+
display: flex;
|
|
1624
|
+
width: 60px;
|
|
1625
|
+
height: 60px;
|
|
1626
|
+
justify-content: center;
|
|
1627
|
+
align-items: center;
|
|
1628
|
+
}
|
|
1629
|
+
.charge-payment-success-text {
|
|
1630
|
+
color: #161616;
|
|
1631
|
+
text-align: center;
|
|
1632
|
+
font-family: Inter;
|
|
1633
|
+
font-size: 32px;
|
|
1634
|
+
font-style: normal;
|
|
1635
|
+
font-weight: 500;
|
|
1636
|
+
line-height: 36px;
|
|
1637
|
+
letter-spacing: -0.64px;
|
|
1638
|
+
margin-top: 20px;
|
|
1639
|
+
margin-bottom: 5px !important;
|
|
1640
|
+
}
|
|
1641
|
+
.charge-payment-success-container {
|
|
1642
|
+
display: flex;
|
|
1643
|
+
padding: 120px 48px 32px 48px;
|
|
1644
|
+
flex-direction: column;
|
|
1645
|
+
justify-content: center;
|
|
1646
|
+
align-items: center;
|
|
1647
|
+
}
|
|
1648
|
+
.charge-payment-success-subtext {
|
|
1649
|
+
color: #727272;
|
|
1650
|
+
text-align: center;
|
|
1651
|
+
font-family: Inter;
|
|
1652
|
+
font-size: 14px;
|
|
1653
|
+
font-style: normal;
|
|
1654
|
+
font-weight: 500;
|
|
1655
|
+
line-height: 18px; /* 128.571% */
|
|
1656
|
+
letter-spacing: -0.28px;
|
|
1657
|
+
}
|
|
1658
|
+
.charge-success-payment-button-div {
|
|
1659
|
+
display: flex;
|
|
1660
|
+
gap: 10px;
|
|
1661
|
+
align-items: baseline;
|
|
1662
|
+
}
|
|
1663
|
+
.charge-success-btn1 {
|
|
1664
|
+
display: flex;
|
|
1665
|
+
padding: 9px 16px;
|
|
1666
|
+
align-items: center;
|
|
1667
|
+
gap: 6px;
|
|
1668
|
+
border-radius: 1000px;
|
|
1669
|
+
border: 1px solid #e0dfe2;
|
|
1670
|
+
background: #fff;
|
|
1671
|
+
color: #161616;
|
|
1672
|
+
}
|
|
1673
|
+
|
|
1674
|
+
.charge-payment-success-btn-div {
|
|
1675
|
+
display: flex;
|
|
1676
|
+
align-items: flex-start;
|
|
1677
|
+
justify-content: center;
|
|
1678
|
+
gap: 8px;
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1681
|
+
.charge-payment-success-btn1 {
|
|
1682
|
+
cursor: pointer;
|
|
1683
|
+
border-radius: 80px;
|
|
1684
|
+
border: 1px solid #e0dfe2;
|
|
1685
|
+
display: flex;
|
|
1686
|
+
padding: 12px 32px;
|
|
1687
|
+
justify-content: center;
|
|
1688
|
+
align-items: center;
|
|
1689
|
+
gap: 6px;
|
|
1690
|
+
background-color: #fff;
|
|
1691
|
+
}
|
|
1692
|
+
|
|
1693
|
+
.charge-payment-success-btn2 {
|
|
1694
|
+
border-radius: 80px;
|
|
1695
|
+
cursor: pointer;
|
|
1696
|
+
border: 1px solid #e0dfe2;
|
|
1697
|
+
display: flex;
|
|
1698
|
+
padding: 12px 32px;
|
|
1699
|
+
justify-content: center;
|
|
1700
|
+
align-items: center;
|
|
1701
|
+
gap: 6px;
|
|
1702
|
+
background-color: #161616;
|
|
1703
|
+
color: #fff;
|
|
1704
|
+
}`);
|
|
1705
|
+
}
|
|
1706
|
+
|
|
1707
|
+
// src/app/components/SuccessMessage/SuccessMsz.tsx
|
|
1708
|
+
function SuccessMsz({ onClose }) {
|
|
1709
|
+
return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(SuccessMszStyle, null), /* @__PURE__ */ React10.createElement("div", { className: "payment-msg-container" }, /* @__PURE__ */ React10.createElement("div", { className: "charge-payment-success-container" }, /* @__PURE__ */ React10.createElement("div", { className: "charge-payment-success-tick-div" }, /* @__PURE__ */ React10.createElement("div", { className: "charge-payment-success-tick" }, /* @__PURE__ */ React10.createElement(
|
|
1710
|
+
"svg",
|
|
1711
|
+
{
|
|
1712
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1713
|
+
width: "16",
|
|
1714
|
+
height: "16",
|
|
1715
|
+
viewBox: "0 0 16 16",
|
|
1716
|
+
fill: "none"
|
|
1717
|
+
},
|
|
1718
|
+
/* @__PURE__ */ React10.createElement(
|
|
1719
|
+
"path",
|
|
1720
|
+
{
|
|
1721
|
+
d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z",
|
|
1722
|
+
fill: "#61C699"
|
|
1723
|
+
}
|
|
1724
|
+
)
|
|
1725
|
+
))), /* @__PURE__ */ React10.createElement("p", { className: "charge-payment-success-text" }, "Your charge", /* @__PURE__ */ React10.createElement("br", null), "was successful"), /* @__PURE__ */ React10.createElement("p", { className: "charge-payment-success-subtext" }, "We\u2019ve processed your charge"), /* @__PURE__ */ React10.createElement("div", { className: "charge-success-payment-button-div" }, /* @__PURE__ */ React10.createElement("button", { className: "charge-success-btn1" }, /* @__PURE__ */ React10.createElement(
|
|
1726
|
+
"svg",
|
|
1727
|
+
{
|
|
1728
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1729
|
+
width: "17",
|
|
1730
|
+
height: "16",
|
|
1731
|
+
viewBox: "0 0 17 16",
|
|
1732
|
+
fill: "none"
|
|
1733
|
+
},
|
|
1734
|
+
/* @__PURE__ */ React10.createElement(
|
|
1735
|
+
"path",
|
|
1736
|
+
{
|
|
1737
|
+
d: "M15.7729 8.7272C15.58 8.7272 15.395 8.80383 15.2586 8.94022C15.1222 9.07661 15.0456 9.2616 15.0456 9.45448V12.5185C15.045 13.0559 14.8313 13.5711 14.4513 13.9511C14.0713 14.3311 13.5561 14.5449 13.0187 14.5454H3.98149C3.44409 14.5449 2.92887 14.3311 2.54887 13.9511C2.16887 13.5711 1.95514 13.0559 1.95456 12.5185V9.45448C1.95456 9.2616 1.87794 9.07661 1.74154 8.94022C1.60515 8.80383 1.42017 8.7272 1.22728 8.7272C1.03439 8.7272 0.849407 8.80383 0.713015 8.94022C0.576624 9.07661 0.5 9.2616 0.5 9.45448V12.5185C0.500963 13.4416 0.86807 14.3265 1.52077 14.9792C2.17346 15.6319 3.05844 15.999 3.98149 16H13.0187C13.9417 15.999 14.8267 15.6319 15.4794 14.9792C16.1321 14.3265 16.4992 13.4416 16.5002 12.5185V9.45448C16.5002 9.2616 16.4235 9.07661 16.2871 8.94022C16.1507 8.80383 15.9658 8.7272 15.7729 8.7272Z",
|
|
1738
|
+
fill: "#161616"
|
|
1739
|
+
}
|
|
1740
|
+
),
|
|
1741
|
+
/* @__PURE__ */ React10.createElement(
|
|
1742
|
+
"path",
|
|
1743
|
+
{
|
|
1744
|
+
d: "M4.65059 6.75861L7.7728 9.88082V0.72728C7.7728 0.534394 7.84942 0.349407 7.98581 0.213015C8.1222 0.0766239 8.30719 0 8.50008 0C8.69296 0 8.87795 0.0766239 9.01434 0.213015C9.15073 0.349407 9.22736 0.534394 9.22736 0.72728V9.88082L12.3496 6.75861C12.4867 6.62613 12.6704 6.55283 12.8611 6.55448C13.0518 6.55614 13.2342 6.63263 13.3691 6.76747C13.5039 6.90231 13.5804 7.08472 13.5821 7.27541C13.5837 7.46611 13.5104 7.64982 13.3779 7.78698L9.01427 12.1507C8.87788 12.287 8.69293 12.3636 8.50008 12.3636C8.30723 12.3636 8.12228 12.287 7.98589 12.1507L3.62221 7.78698C3.48973 7.64982 3.41643 7.46611 3.41808 7.27541C3.41974 7.08472 3.49623 6.90231 3.63107 6.76747C3.76592 6.63263 3.94833 6.55614 4.13902 6.55448C4.32971 6.55283 4.51342 6.62613 4.65059 6.75861Z",
|
|
1745
|
+
fill: "#161616"
|
|
1746
|
+
}
|
|
1747
|
+
)
|
|
1748
|
+
), "Print receipt"), /* @__PURE__ */ React10.createElement("button", { className: "charge-success-btn1" }, /* @__PURE__ */ React10.createElement(
|
|
1749
|
+
"svg",
|
|
1750
|
+
{
|
|
1751
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1752
|
+
width: "17",
|
|
1753
|
+
height: "16",
|
|
1754
|
+
viewBox: "0 0 17 16",
|
|
1755
|
+
fill: "none"
|
|
1756
|
+
},
|
|
1757
|
+
/* @__PURE__ */ React10.createElement("g", { "clip-path": "url(#clip0_12420_50683)" }, /* @__PURE__ */ React10.createElement(
|
|
1758
|
+
"path",
|
|
1759
|
+
{
|
|
1760
|
+
d: "M9.30194 4.78664V2.31152C9.30194 2.09629 9.3862 1.88988 9.53631 1.73768C9.68634 1.5855 9.8899 1.5 10.1021 1.5C10.312 1.50089 10.5132 1.58542 10.6622 1.73534L16.2633 7.41595C16.3383 7.49142 16.3978 7.58117 16.4385 7.68001C16.4791 7.77894 16.5 7.885 16.5 7.99212C16.5 8.09924 16.4791 8.20531 16.4385 8.30423C16.3978 8.40307 16.3383 8.49283 16.2633 8.5683L10.6622 14.2489C10.5499 14.3606 10.4076 14.4362 10.2531 14.4663C10.0987 14.4964 9.93887 14.4797 9.79372 14.4182C9.64857 14.3568 9.52455 14.2532 9.43701 14.1206C9.34955 13.9881 9.30258 13.8323 9.30194 13.6727V11.157H8.62181C7.35764 11.1379 6.10443 11.3981 4.94932 11.9193C3.79422 12.4406 2.76481 13.2107 1.93249 14.1759C1.83215 14.3113 1.6926 14.4115 1.53337 14.4624C1.37406 14.5134 1.20306 14.5125 1.04431 14.4599C0.882759 14.4046 0.742811 14.2984 0.644952 14.1568C0.547092 14.0152 0.496363 13.8456 0.500203 13.6727C0.500203 6.27171 6.96548 5.00575 9.30194 4.78664ZM8.62181 9.51777C9.15695 9.51607 9.69162 9.55129 10.2221 9.62327C10.4115 9.6524 10.5844 9.74954 10.7092 9.89699C10.834 10.0444 10.9025 10.2324 10.9023 10.4267V11.717L14.567 7.99212L10.9023 4.26727V5.55758C10.9023 5.77281 10.8179 5.97922 10.6679 6.13141C10.5178 6.28359 10.3143 6.36909 10.1021 6.36909C9.37396 6.36909 3.61282 6.5314 2.36457 11.5871C4.17637 10.2324 6.3708 9.50665 8.62181 9.51777Z",
|
|
1761
|
+
fill: "#161616"
|
|
1762
|
+
}
|
|
1763
|
+
)),
|
|
1764
|
+
/* @__PURE__ */ React10.createElement("defs", null, /* @__PURE__ */ React10.createElement("clipPath", { id: "clip0_12420_50683" }, /* @__PURE__ */ React10.createElement(
|
|
1765
|
+
"rect",
|
|
1766
|
+
{
|
|
1767
|
+
width: "16",
|
|
1768
|
+
height: "16",
|
|
1769
|
+
fill: "white",
|
|
1770
|
+
transform: "translate(0.5)"
|
|
1771
|
+
}
|
|
1772
|
+
)))
|
|
1773
|
+
), "Send receipt"))), /* @__PURE__ */ React10.createElement("div", { className: "charge-payment-success-btn-div" }, /* @__PURE__ */ React10.createElement("button", { className: "charge-payment-success-btn1" }, "Go to Transactions"), /* @__PURE__ */ React10.createElement("button", { className: "charge-payment-success-btn2", onClick: onClose }, "Close"))));
|
|
1774
|
+
}
|
|
1775
|
+
|
|
1776
|
+
// src/app/components/Charge/GetPaymentPage.tsx
|
|
1777
|
+
import Swal from "sweetalert2";
|
|
1778
|
+
function GetPaymentPage(props) {
|
|
1518
1779
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1780
|
+
const [loading, setLoading] = useState3(false);
|
|
1781
|
+
const [success, setSuccess] = useState3(false);
|
|
1519
1782
|
const [show, setShow] = useState3(false);
|
|
1520
1783
|
const [activetab, setActive] = useState3("card");
|
|
1521
1784
|
const [saveCardInfo, setSaveCardInfo] = useState3(false);
|
|
1522
1785
|
const [saveACHinfo, setSaveACHinfo] = useState3(false);
|
|
1786
|
+
const fractalpayClientKey = props.fractalpayClientKey;
|
|
1523
1787
|
const [cardData, setCardData] = useState3();
|
|
1524
1788
|
const [cardError, setCardError] = useState3({});
|
|
1525
1789
|
const [achData, setAchData] = useState3();
|
|
1526
1790
|
const [achError, setAchError] = useState3({});
|
|
1791
|
+
const showLoader = () => setLoading(true);
|
|
1792
|
+
const hideLoader = () => setLoading(false);
|
|
1793
|
+
const showError = (msz) => {
|
|
1794
|
+
Swal.fire({
|
|
1795
|
+
icon: "error",
|
|
1796
|
+
title: "Oops...",
|
|
1797
|
+
text: msz
|
|
1798
|
+
});
|
|
1799
|
+
};
|
|
1527
1800
|
const handleClose = () => {
|
|
1528
1801
|
setShow(false);
|
|
1529
1802
|
};
|
|
1530
1803
|
const handleShow = () => setShow(true);
|
|
1804
|
+
const handleCloseSeccess = () => {
|
|
1805
|
+
setSuccess(false);
|
|
1806
|
+
handleClose();
|
|
1807
|
+
};
|
|
1531
1808
|
const handletabchange = (id) => {
|
|
1532
1809
|
setActive(id);
|
|
1533
1810
|
};
|
|
1534
|
-
const handleCardChange = (
|
|
1535
|
-
const
|
|
1811
|
+
const handleCardChange = (field, value) => {
|
|
1812
|
+
const name = field;
|
|
1536
1813
|
const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
|
|
1537
1814
|
if (numericFields.includes(name)) {
|
|
1538
1815
|
if (value === "" || /^[0-9]+$/.test(value)) {
|
|
@@ -1625,7 +1902,6 @@ function GetPaymentPage({}) {
|
|
|
1625
1902
|
}
|
|
1626
1903
|
}
|
|
1627
1904
|
setCardError(errors);
|
|
1628
|
-
console.log(errors);
|
|
1629
1905
|
return Object.keys(errors).length > 0;
|
|
1630
1906
|
};
|
|
1631
1907
|
const validateAchData = () => {
|
|
@@ -1653,7 +1929,7 @@ function GetPaymentPage({}) {
|
|
|
1653
1929
|
console.log(errors);
|
|
1654
1930
|
return Object.keys(errors).length > 0;
|
|
1655
1931
|
};
|
|
1656
|
-
const submitFunc = (e) => {
|
|
1932
|
+
const submitFunc = async (e) => {
|
|
1657
1933
|
e.preventDefault();
|
|
1658
1934
|
if (activetab !== "ach") {
|
|
1659
1935
|
const hasError = validateCardData();
|
|
@@ -1662,12 +1938,63 @@ function GetPaymentPage({}) {
|
|
|
1662
1938
|
let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
|
|
1663
1939
|
let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
|
|
1664
1940
|
let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
|
|
1665
|
-
console.log(cardData, validCard, validExpirationDate, validCVV);
|
|
1666
1941
|
let errors = {};
|
|
1667
1942
|
if (!validCard) errors.cardNumber = "Invalid card Number";
|
|
1668
1943
|
if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
|
|
1669
1944
|
if (!validCVV) errors.cvv = "Invalid CVV";
|
|
1670
1945
|
setCardError(errors);
|
|
1946
|
+
if (validCard && validCVV && validExpirationDate) {
|
|
1947
|
+
showLoader();
|
|
1948
|
+
try {
|
|
1949
|
+
const formData = __spreadProps(__spreadValues({}, cardData), {
|
|
1950
|
+
amount: `${props.amount || 0}`,
|
|
1951
|
+
// fractalpayClientKey : fractalpayClientKey,
|
|
1952
|
+
fractalpayPublicKey: fractalpayClientKey
|
|
1953
|
+
});
|
|
1954
|
+
const result = await axios3.post(`${baseUrl}create-widget-order`, formData);
|
|
1955
|
+
console.log(result);
|
|
1956
|
+
let tokenCallback = async function(response) {
|
|
1957
|
+
if (response.Error) {
|
|
1958
|
+
showError(response.Error);
|
|
1959
|
+
hideLoader();
|
|
1960
|
+
} else {
|
|
1961
|
+
var token = response.Token;
|
|
1962
|
+
var jsonResponse = JSON.stringify(response, null, 2);
|
|
1963
|
+
let name = cardData == null ? void 0 : cardData.cardName;
|
|
1964
|
+
let postal_code = cardData == null ? void 0 : cardData.zipCode;
|
|
1965
|
+
response.name = name;
|
|
1966
|
+
response.postal_code = postal_code;
|
|
1967
|
+
console.log("Response :", response);
|
|
1968
|
+
try {
|
|
1969
|
+
let apiResponse = await axios3.post(`${masterBaseUrl}quick-pay/${result == null ? void 0 : result.data.data.posSalesIdEncode}`, response);
|
|
1970
|
+
console.log(apiResponse);
|
|
1971
|
+
setCardData({
|
|
1972
|
+
cardName: "",
|
|
1973
|
+
cardNumber: "",
|
|
1974
|
+
expiryMonth: "",
|
|
1975
|
+
expiryYear: "",
|
|
1976
|
+
cvv: "",
|
|
1977
|
+
orderId: "",
|
|
1978
|
+
zipCode: ""
|
|
1979
|
+
});
|
|
1980
|
+
setSuccess(true);
|
|
1981
|
+
hideLoader();
|
|
1982
|
+
} catch (err) {
|
|
1983
|
+
console.log(err);
|
|
1984
|
+
hideLoader();
|
|
1985
|
+
showError("something wrong..");
|
|
1986
|
+
}
|
|
1987
|
+
}
|
|
1988
|
+
};
|
|
1989
|
+
if (typeof DatacapWebToken !== "undefined") {
|
|
1990
|
+
DatacapWebToken.requestToken(result == null ? void 0 : result.data.data.dctoken, "PaymentForm", tokenCallback);
|
|
1991
|
+
}
|
|
1992
|
+
} catch (err) {
|
|
1993
|
+
console.log(err);
|
|
1994
|
+
hideLoader();
|
|
1995
|
+
showError("Something went wrong");
|
|
1996
|
+
}
|
|
1997
|
+
}
|
|
1671
1998
|
}
|
|
1672
1999
|
} else {
|
|
1673
2000
|
console.log(achData);
|
|
@@ -1678,24 +2005,25 @@ function GetPaymentPage({}) {
|
|
|
1678
2005
|
}
|
|
1679
2006
|
}
|
|
1680
2007
|
};
|
|
1681
|
-
return /* @__PURE__ */
|
|
2008
|
+
return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Chargewidgetstyles, null), /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
|
|
1682
2009
|
"button",
|
|
1683
2010
|
{
|
|
1684
2011
|
className: "paymentBtn",
|
|
1685
2012
|
onClick: handleShow
|
|
1686
2013
|
},
|
|
1687
2014
|
"Pay"
|
|
1688
|
-
), /* @__PURE__ */
|
|
2015
|
+
), /* @__PURE__ */ React11.createElement(
|
|
1689
2016
|
CustomModal2_default,
|
|
1690
2017
|
{
|
|
1691
2018
|
open: show,
|
|
1692
2019
|
onClose: handleClose
|
|
1693
2020
|
},
|
|
1694
|
-
/* @__PURE__ */
|
|
2021
|
+
/* @__PURE__ */ React11.createElement(Loader_default, { loading }),
|
|
2022
|
+
success ? /* @__PURE__ */ React11.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React11.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ React11.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React11.createElement("defs", null, /* @__PURE__ */ React11.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React11.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React11.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React11.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React11.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ React11.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React11.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React11.createElement("strong", { className: "pay-amount" }, "$1.35")), activetab == "card" && /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ React11.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React11.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React11.createElement("div", { id: "payment-form-div" }, /* @__PURE__ */ React11.createElement("div", { className: "tab" }, /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
|
|
1695
2023
|
handletabchange("card");
|
|
1696
|
-
}, style: { backgroundColor: activetab === "card" ? "#fff" : "inherit" } }, "Card"), /* @__PURE__ */
|
|
2024
|
+
}, style: { backgroundColor: activetab === "card" ? "#fff" : "inherit" } }, "Card"), /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
|
|
1697
2025
|
handletabchange("ach");
|
|
1698
|
-
}, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH")), /* @__PURE__ */
|
|
2026
|
+
}, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH")), /* @__PURE__ */ React11.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ React11.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "John Doe", value: cardData == null ? void 0 : cardData.cardName, onChange: (e) => handleCardChange("cardName", e.target.value) }), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React11.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ React11.createElement(
|
|
1699
2027
|
"input",
|
|
1700
2028
|
{
|
|
1701
2029
|
className: "form-control card-number-new",
|
|
@@ -1703,11 +2031,11 @@ function GetPaymentPage({}) {
|
|
|
1703
2031
|
maxLength: 19,
|
|
1704
2032
|
inputMode: "numeric",
|
|
1705
2033
|
placeholder: "0000 0000 0000 0000",
|
|
1706
|
-
name: "cardNumber",
|
|
1707
2034
|
value: (cardData == null ? void 0 : cardData.cardNumber) || "",
|
|
1708
|
-
onChange: handleCardNumberChange
|
|
2035
|
+
onChange: (e) => handleCardNumberChange(e),
|
|
2036
|
+
"data-token": "card_number"
|
|
1709
2037
|
}
|
|
1710
|
-
), /* @__PURE__ */
|
|
2038
|
+
), /* @__PURE__ */ React11.createElement("div", { className: "card-crdi card-expiry-new" }, /* @__PURE__ */ React11.createElement("div", { className: "exp-date-year-container" }, /* @__PURE__ */ React11.createElement("div", { className: "exp-date form-group" }, /* @__PURE__ */ React11.createElement(
|
|
1711
2039
|
"input",
|
|
1712
2040
|
{
|
|
1713
2041
|
"data-token": "exp_month",
|
|
@@ -1715,11 +2043,10 @@ function GetPaymentPage({}) {
|
|
|
1715
2043
|
type: "text",
|
|
1716
2044
|
placeholder: "MM",
|
|
1717
2045
|
maxLength: 2,
|
|
1718
|
-
name: "expiryMonth",
|
|
1719
2046
|
value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
|
|
1720
|
-
|
|
2047
|
+
onChange: (e) => handleCardChange("expiryMonth", e.target.value)
|
|
1721
2048
|
}
|
|
1722
|
-
)), /* @__PURE__ */
|
|
2049
|
+
)), /* @__PURE__ */ React11.createElement("div", { className: "exp-year form-group" }, /* @__PURE__ */ React11.createElement(
|
|
1723
2050
|
"input",
|
|
1724
2051
|
{
|
|
1725
2052
|
"data-token": "exp_year",
|
|
@@ -1727,11 +2054,10 @@ function GetPaymentPage({}) {
|
|
|
1727
2054
|
type: "text",
|
|
1728
2055
|
placeholder: "YYYY",
|
|
1729
2056
|
maxLength: 4,
|
|
1730
|
-
name: "expiryYear",
|
|
1731
2057
|
value: (cardData == null ? void 0 : cardData.expiryYear) || "",
|
|
1732
|
-
onChange: handleCardChange
|
|
2058
|
+
onChange: (e) => handleCardChange("expiryYear", e.target.value)
|
|
1733
2059
|
}
|
|
1734
|
-
)), /* @__PURE__ */
|
|
2060
|
+
)), /* @__PURE__ */ React11.createElement("div", { className: "security-digit form-group" }, /* @__PURE__ */ React11.createElement(
|
|
1735
2061
|
"input",
|
|
1736
2062
|
{
|
|
1737
2063
|
"data-token": "cvv",
|
|
@@ -1739,25 +2065,22 @@ function GetPaymentPage({}) {
|
|
|
1739
2065
|
type: "text",
|
|
1740
2066
|
maxLength: 4,
|
|
1741
2067
|
placeholder: "CVC",
|
|
1742
|
-
name: "cvv",
|
|
1743
2068
|
value: (cardData == null ? void 0 : cardData.cvv) || "",
|
|
1744
|
-
onChange: handleCardChange
|
|
2069
|
+
onChange: (e) => handleCardChange("cvv", e.target.value)
|
|
1745
2070
|
}
|
|
1746
|
-
)))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */
|
|
2071
|
+
)))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React11.createElement("p", { style: { margin: "0" } }, (cardError == null ? void 0 : cardError.expiryMonth) || (cardError == null ? void 0 : cardError.expiryYear) ? /* @__PURE__ */ React11.createElement("span", { className: "error-span", style: { paddingRight: "4px" } }, cardError == null ? void 0 : cardError.expiryMonth) : "", (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "OrderId" }, "Order ID / Description"), /* @__PURE__ */ React11.createElement(
|
|
1747
2072
|
"input",
|
|
1748
2073
|
{
|
|
1749
2074
|
type: "text",
|
|
1750
|
-
id: "OrderId",
|
|
1751
2075
|
className: "form-control",
|
|
1752
2076
|
maxLength: 100,
|
|
1753
2077
|
placeholder: "OID123456",
|
|
1754
|
-
name: "orderId",
|
|
1755
2078
|
disabled: true,
|
|
1756
2079
|
value: (_a = cardData == null ? void 0 : cardData.orderId) != null ? _a : "OID123456",
|
|
1757
|
-
onChange: handleCardChange,
|
|
2080
|
+
onChange: (e) => handleCardChange("orderId", e.target.value),
|
|
1758
2081
|
style: { background: "#F6F6F7", color: "#727272" }
|
|
1759
2082
|
}
|
|
1760
|
-
)), /* @__PURE__ */
|
|
2083
|
+
)), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ React11.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_b = cardData == null ? void 0 : cardData.zipCode) != null ? _b : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React11.createElement(
|
|
1761
2084
|
"input",
|
|
1762
2085
|
{
|
|
1763
2086
|
type: "checkbox",
|
|
@@ -1766,7 +2089,7 @@ function GetPaymentPage({}) {
|
|
|
1766
2089
|
checked: saveCardInfo,
|
|
1767
2090
|
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
1768
2091
|
}
|
|
1769
|
-
), /* @__PURE__ */
|
|
2092
|
+
), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card" }, "Save card for future payments"))), /* @__PURE__ */ React11.createElement("div", { className: "form-group", style: { marginTop: "20px" } }, /* @__PURE__ */ React11.createElement("button", { type: "submit", className: "pay-button" }, "$1.35")))), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "ach-scrl" }, /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ React11.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_c = achData == null ? void 0 : achData.name) != null ? _c : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ React11.createElement(
|
|
1770
2093
|
"input",
|
|
1771
2094
|
{
|
|
1772
2095
|
type: "text",
|
|
@@ -1778,7 +2101,7 @@ function GetPaymentPage({}) {
|
|
|
1778
2101
|
value: (_d = achData == null ? void 0 : achData.routingNumber) != null ? _d : "",
|
|
1779
2102
|
onChange: handleChangeAch
|
|
1780
2103
|
}
|
|
1781
|
-
), (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */
|
|
2104
|
+
), (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.routingNumber)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "accountnumber" }, "Account number"), /* @__PURE__ */ React11.createElement(
|
|
1782
2105
|
"input",
|
|
1783
2106
|
{
|
|
1784
2107
|
type: "text",
|
|
@@ -1790,7 +2113,7 @@ function GetPaymentPage({}) {
|
|
|
1790
2113
|
value: (_e = achData == null ? void 0 : achData.accountNumber) != null ? _e : "",
|
|
1791
2114
|
onChange: handleChangeAch
|
|
1792
2115
|
}
|
|
1793
|
-
), (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */
|
|
2116
|
+
), (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.accountNumber)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "confirmaccountnumber" }, "Confirm account number"), /* @__PURE__ */ React11.createElement(
|
|
1794
2117
|
"input",
|
|
1795
2118
|
{
|
|
1796
2119
|
type: "text",
|
|
@@ -1802,7 +2125,7 @@ function GetPaymentPage({}) {
|
|
|
1802
2125
|
value: (_f = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _f : "",
|
|
1803
2126
|
onChange: handleChangeAch
|
|
1804
2127
|
}
|
|
1805
|
-
), (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */
|
|
2128
|
+
), (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.confirmAccountNumber)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "bankname" }, "Bank name"), /* @__PURE__ */ React11.createElement(
|
|
1806
2129
|
"input",
|
|
1807
2130
|
{
|
|
1808
2131
|
type: "text",
|
|
@@ -1814,7 +2137,7 @@ function GetPaymentPage({}) {
|
|
|
1814
2137
|
value: (_g = achData == null ? void 0 : achData.bankName) != null ? _g : "",
|
|
1815
2138
|
onChange: handleChangeAch
|
|
1816
2139
|
}
|
|
1817
|
-
), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */
|
|
2140
|
+
), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ React11.createElement("select", { name: "accounttype", id: "accounttype", className: "form-control", value: (_h = achData == null ? void 0 : achData.accountType) != null ? _h : "", onChange: handleChangeAch }, /* @__PURE__ */ React11.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ React11.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ React11.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ React11.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ React11.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ React11.createElement("div", { className: "form-group", style: { marginTop: "30px" } }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", type: "submit" }, "$1.35"))))))))))
|
|
1818
2141
|
)));
|
|
1819
2142
|
}
|
|
1820
2143
|
export {
|