@pinerohit11/testwidget 0.1.86 → 0.1.88

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +8 -1
  2. package/dist/index.d.ts +8 -1
  3. package/dist/index.js +212 -10
  4. package/dist/index.mjs +211 -10
  5. package/package.json +2 -1
package/dist/index.d.mts CHANGED
@@ -48,4 +48,11 @@ type Props = {
48
48
  };
49
49
  declare function GetPaymentPage(props: Props): React.JSX.Element;
50
50
 
51
- export { GetPaymentPage, RequestPayment, RequestPreAuthPayment };
51
+ declare global {
52
+ interface Window {
53
+ DatacapWebToken: any;
54
+ }
55
+ }
56
+ declare function DataScript(): null;
57
+
58
+ export { DataScript, GetPaymentPage, RequestPayment, RequestPreAuthPayment };
package/dist/index.d.ts CHANGED
@@ -48,4 +48,11 @@ type Props = {
48
48
  };
49
49
  declare function GetPaymentPage(props: Props): React.JSX.Element;
50
50
 
51
- export { GetPaymentPage, RequestPayment, RequestPreAuthPayment };
51
+ declare global {
52
+ interface Window {
53
+ DatacapWebToken: any;
54
+ }
55
+ }
56
+ declare function DataScript(): null;
57
+
58
+ export { DataScript, GetPaymentPage, RequestPayment, RequestPreAuthPayment };
package/dist/index.js CHANGED
@@ -47,6 +47,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
47
47
  // src/app/index.ts
48
48
  var index_exports = {};
49
49
  __export(index_exports, {
50
+ DataScript: () => DataScript,
50
51
  GetPaymentPage: () => GetPaymentPage,
51
52
  RequestPayment: () => RequestPayment,
52
53
  RequestPreAuthPayment: () => RequestPreAuthPayment
@@ -1270,6 +1271,7 @@ function Chargewidgetstyles() {
1270
1271
  border-radius: 8px;
1271
1272
  display: flex;
1272
1273
  justify-content: space-around;
1274
+ margin-bottom:12px
1273
1275
  }
1274
1276
 
1275
1277
  /* Style the buttons inside the tab */
@@ -1299,15 +1301,16 @@ function Chargewidgetstyles() {
1299
1301
  }
1300
1302
 
1301
1303
  /* Style the tab content */
1302
- .tabcontent {
1303
- padding: 8px 0;
1304
- }
1304
+
1305
+
1305
1306
 
1306
1307
  .pay-container{
1307
1308
  display: grid;
1308
1309
  grid-template-columns: 2fr 3fr;
1309
- padding: 50px 10% 20px ;
1310
+ padding: 30px 10% ;
1310
1311
  }
1312
+ .pay-main{
1313
+ padding-y: 20px}
1311
1314
 
1312
1315
  .request-payment-close-popup {
1313
1316
  position: absolute;
@@ -1319,7 +1322,7 @@ function Chargewidgetstyles() {
1319
1322
  border-right: 1px solid #E0DFE2;
1320
1323
  }
1321
1324
  .pay-conatiner-two{
1322
- padding: 0 5% 20px;
1325
+ padding: 0 5% 0;
1323
1326
  }
1324
1327
  .pay-logo-container{
1325
1328
  border-bottom: 1px solid #E0DFE2
@@ -1525,7 +1528,134 @@ function Chargewidgetstyles() {
1525
1528
  padding: 20px 5%;
1526
1529
  }
1527
1530
  }
1531
+ .charge-customer-name{
1532
+ color: #161616;
1533
+ font-family: Inter;
1534
+ font-size: 24px;
1535
+ font-style: normal;
1536
+ font-weight: 600;
1537
+ line-height: 32px;
1538
+ letter-spacing: -0.48px;
1539
+ text-transform: capitalize;
1540
+ margin-top:0;
1541
+ margin-bottom:16px
1542
+ }
1543
+ .card-ach-heading {
1544
+ color: #727272;
1545
+ font-family: Inter;
1546
+ font-size: 12px;
1547
+ font-style: normal;
1548
+ font-weight: 500;
1549
+ line-height: 18px;
1550
+ letter-spacing: -0.24px;
1551
+ margin : 0 0 10px
1552
+ }
1553
+ .card-list-div{
1554
+ max-height : 190px;
1555
+ overflow-y : auto;
1556
+ border:1px solid #E0DFE2;
1557
+ border-radius : 8px
1558
+ }
1559
+
1560
+
1561
+ .card-list-div::-webkit-scrollbar{
1562
+ width:2px;
1563
+ background-color:#F5F5F5
1564
+ }
1565
+ .card-list-div::-webkit-scrollbar-thumb{
1566
+ background-color:#35254D
1567
+ }
1568
+
1569
+ .card-list-single-div{
1570
+ border-bottom:C;
1571
+ padding : 12px 11px;
1572
+ display : flex ;
1573
+ align-items:center;
1574
+ justify-content : space-between;
1575
+ gap:12px
1576
+ }
1577
+ .card-list-single-div:last-child {
1578
+ border-bottom: none;
1579
+ }
1580
+ .card-lint-div-in{
1581
+ min-height:430px}
1582
+ .card-number-radio{
1583
+ display:flex;
1584
+ gap:12px;
1585
+ }
1586
+ .card-number-last-four{
1587
+ color:#161616;
1588
+ font-family:Inter;
1589
+ font-size:14px;
1590
+ font-weight:500;
1591
+ font-style"normal;
1592
+ line-height : 18px;
1593
+ latter-spacing:-0.18px
1594
+ }
1595
+ .card-expiry-date{
1596
+ margin:0;
1597
+ color:#00000080;
1598
+ font-family:Inter;
1599
+ font-size:14px;
1600
+ font-weight:500;
1601
+ font-style"normal;
1602
+ line-height : 18px;
1603
+ latter-spacing:-0.18px
1604
+ }
1605
+ .pay-with-other-card {
1606
+ margin-top : 12px;
1607
+ padding:12px 32px;
1608
+ border :1px solid #E0DFE2;
1609
+ border-radius : 1000px;
1610
+ display: flex;
1611
+ justify-content : center;
1612
+ align-items:center;
1613
+ gap:10px;
1614
+ // width:100%;
1615
+ background:white;
1616
+ cursor:pointer;
1617
+ color:#161616;
1618
+ text-align:center
1619
+ font-family: Inter;
1620
+ font-size: 14px;
1621
+ font-style: normal;
1622
+ font-weight: 500;
1623
+ line-height: 24px;
1624
+ letter-spacing: -0.28px;
1625
+ margin-bottom: 50px;
1626
+ }
1627
+ .charge-payment-back-btn {
1628
+ display: flex;
1629
+ padding: 9px 16px;
1630
+ align-items: center;
1631
+ gap: 6px;
1632
+ margin-bottom: 20px;
1633
+ border-radius: 1000px;
1634
+ border: 1px solid #E0DFE2;
1635
+ background: #FFF;
1636
+ box-shadow: 0px 6px 12px 0px rgba(206, 197, 221, 0.31);
1637
+ font-size:16px;
1638
+ curso:pointer
1639
+ }
1640
+ .btn {
1641
+ padding: 11px 23px;
1642
+ background-color: black;
1643
+ color: white;
1644
+ border: none;
1645
+ border-radius: 6px;
1646
+ font-weight: bold;
1647
+ margin: 0 10px;
1648
+ cursor: pointer;
1649
+ }
1528
1650
 
1651
+ .custom-swal-icon {
1652
+ margin: 20px auto;
1653
+ }
1654
+
1655
+ .custom-swal-popup {
1656
+ font-size: 16px;
1657
+ text-align: center;
1658
+ }
1529
1659
 
1530
1660
 
1531
1661
 
@@ -1810,12 +1940,13 @@ function SuccessMsz({ onClose }) {
1810
1940
 
1811
1941
  // src/app/components/Charge/GetPaymentPage.tsx
1812
1942
  var import_sweetalert2 = __toESM(require("sweetalert2"));
1943
+ var import_io5 = require("react-icons/io5");
1813
1944
  function GetPaymentPage(props) {
1814
1945
  var _a, _b, _c, _d, _e, _f, _g, _h;
1815
1946
  const [loading, setLoading] = (0, import_react11.useState)(false);
1816
1947
  const [success, setSuccess] = (0, import_react11.useState)(false);
1817
1948
  const [show, setShow] = (0, import_react11.useState)(false);
1818
- const [activetab, setActive] = (0, import_react11.useState)("card");
1949
+ const [activetab, setActive] = (0, import_react11.useState)("cardList");
1819
1950
  const [saveCardInfo, setSaveCardInfo] = (0, import_react11.useState)(false);
1820
1951
  const [saveACHinfo, setSaveACHinfo] = (0, import_react11.useState)(false);
1821
1952
  const fractalpayClientKey = props.fractalpayClientKey;
@@ -1823,6 +1954,21 @@ function GetPaymentPage(props) {
1823
1954
  const [cardError, setCardError] = (0, import_react11.useState)({});
1824
1955
  const [achData, setAchData] = (0, import_react11.useState)();
1825
1956
  const [achError, setAchError] = (0, import_react11.useState)({});
1957
+ const [cardList, setCardList] = (0, import_react11.useState)([
1958
+ { cardNumber: "9876789878999878", expMonth: "06", expYear: "2026", cardType: "visa" },
1959
+ { cardNumber: "9876789878999868", expMonth: "04", expYear: "2027", cardType: "visa" },
1960
+ { cardNumber: "9876789878999874", expMonth: "11", expYear: "2028", cardType: "visa" },
1961
+ { cardNumber: "9876789878999873", expMonth: "08", expYear: "2029", cardType: "visa" },
1962
+ { cardNumber: "9876789878999345", expMonth: "10", expYear: "2026", cardType: "visa" },
1963
+ { cardNumber: "9876789878999434", expMonth: "05", expYear: "2028", cardType: "visa" },
1964
+ { cardNumber: "9876789878999852", expMonth: "07", expYear: "2027", cardType: "visa" },
1965
+ { cardNumber: "9876789878994546", expMonth: "04", expYear: "2029", cardType: "visa" },
1966
+ { cardNumber: "9876789878999743", expMonth: "09", expYear: "2026", cardType: "visa" },
1967
+ { cardNumber: "9876789878997323", expMonth: "12", expYear: "2028", cardType: "visa" },
1968
+ { cardNumber: "9876789878998979", expMonth: "07", expYear: "2027", cardType: "visa" },
1969
+ { cardNumber: "9876789878992348", expMonth: "03", expYear: "2029", cardType: "visa" },
1970
+ { cardNumber: "9876789878999465", expMonth: "01", expYear: "2026", cardType: "visa" }
1971
+ ]);
1826
1972
  const showLoader = () => setLoading(true);
1827
1973
  const hideLoader = () => setLoading(false);
1828
1974
  const showError = (msz) => {
@@ -1834,6 +1980,7 @@ function GetPaymentPage(props) {
1834
1980
  };
1835
1981
  const handleClose = () => {
1836
1982
  setShow(false);
1983
+ setActive("cardList");
1837
1984
  };
1838
1985
  const handleShow = () => setShow(true);
1839
1986
  const handleCloseSeccess = () => {
@@ -2089,11 +2236,32 @@ function GetPaymentPage(props) {
2089
2236
  onClose: handleClose
2090
2237
  },
2091
2238
  /* @__PURE__ */ import_react11.default.createElement(Loader_default, { loading }),
2092
- success ? /* @__PURE__ */ import_react11.default.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react11.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react11.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react11.default.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__ */ import_react11.default.createElement("defs", null, /* @__PURE__ */ import_react11.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react11.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ import_react11.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react11.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react11.default.createElement("strong", { className: "pay-amount" }, "$1.35")), activetab == "card" && /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react11.default.createElement("div", { id: "payment-form-div" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "tab" }, /* @__PURE__ */ import_react11.default.createElement("button", { className: "tablinks", onClick: (e) => {
2239
+ success ? /* @__PURE__ */ import_react11.default.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react11.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react11.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react11.default.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__ */ import_react11.default.createElement("defs", null, /* @__PURE__ */ import_react11.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react11.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ import_react11.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react11.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react11.default.createElement("strong", { className: "pay-amount" }, "$1.35")), activetab != "ach" && /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react11.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react11.default.createElement(import_io5.IoArrowBack, null), " Back"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "tab" }, /* @__PURE__ */ import_react11.default.createElement("button", { className: "tablinks", onClick: (e) => {
2093
2240
  handletabchange("card");
2094
2241
  }, style: { backgroundColor: activetab === "card" ? "#fff" : "inherit" } }, "Card"), /* @__PURE__ */ import_react11.default.createElement("button", { className: "tablinks", onClick: (e) => {
2095
2242
  handletabchange("ach");
2096
- }, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH")), /* @__PURE__ */ import_react11.default.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react11.default.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ import_react11.default.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__ */ import_react11.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ import_react11.default.createElement(
2243
+ }, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH"))) : /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("p", { className: "charge-customer-name" }, " Charge Mmm"), /* @__PURE__ */ import_react11.default.createElement("p", { className: "card-ach-heading" }, " Cards/ACH")), /* @__PURE__ */ import_react11.default.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-list-div" }, cardList && cardList.length > 0 && cardList.map((card, index) => {
2244
+ var _a2;
2245
+ return /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-list-single-div" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react11.default.createElement("input", { type: "radio", className: "cardRadio", name: "selected_card", id: "" }), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", (_a2 = card == null ? void 0 : card.cardNumber) == null ? void 0 : _a2.slice(-4)), /* @__PURE__ */ import_react11.default.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expMonth, "/", card == null ? void 0 : card.expYear)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "visa-card" }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "" })), /* @__PURE__ */ import_react11.default.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => {
2246
+ import_sweetalert2.default.fire({
2247
+ icon: "warning",
2248
+ text: "Do you want to delete the card?",
2249
+ showCancelButton: true,
2250
+ confirmButtonText: "Yes",
2251
+ cancelButtonText: "No",
2252
+ reverseButtons: true,
2253
+ // puts "No" on the left and "Yes" on the right
2254
+ buttonsStyling: false,
2255
+ // disables default styling
2256
+ customClass: {
2257
+ confirmButton: "swal2-confirm btn btn-dark",
2258
+ cancelButton: "swal2-cancel btn btn-dark",
2259
+ popup: "custom-swal-popup",
2260
+ icon: "custom-swal-icon"
2261
+ }
2262
+ });
2263
+ } }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))));
2264
+ })), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Pay With Other Card", /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit" }, "$1.35"))), /* @__PURE__ */ import_react11.default.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react11.default.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ import_react11.default.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__ */ import_react11.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ import_react11.default.createElement(
2097
2265
  "input",
2098
2266
  {
2099
2267
  className: "form-control card-number-new",
@@ -2159,7 +2327,7 @@ function GetPaymentPage(props) {
2159
2327
  checked: saveCardInfo,
2160
2328
  onChange: (e) => setSaveCardInfo(e.target.checked)
2161
2329
  }
2162
- ), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "save_card" }, "Save card for future payments"))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group", style: { marginTop: "20px" } }, /* @__PURE__ */ import_react11.default.createElement("button", { type: "submit", className: "pay-button" }, "$1.35")))), /* @__PURE__ */ import_react11.default.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react11.default.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ach-scrl" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ import_react11.default.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__ */ import_react11.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ import_react11.default.createElement(
2330
+ ), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "save_card" }, "Save card for future payments"))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group", style: { marginTop: "20px" } }, /* @__PURE__ */ import_react11.default.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$1.35")))), /* @__PURE__ */ import_react11.default.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react11.default.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ach-scrl" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ import_react11.default.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__ */ import_react11.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ import_react11.default.createElement(
2163
2331
  "input",
2164
2332
  {
2165
2333
  type: "text",
@@ -2207,11 +2375,45 @@ function GetPaymentPage(props) {
2207
2375
  value: (_g = achData == null ? void 0 : achData.bankName) != null ? _g : "",
2208
2376
  onChange: handleChangeAch
2209
2377
  }
2210
- ), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ import_react11.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ import_react11.default.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_h = achData == null ? void 0 : achData.accountType) != null ? _h : "", onChange: handleChangeAch }, /* @__PURE__ */ import_react11.default.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ import_react11.default.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ import_react11.default.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ import_react11.default.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group", style: { marginTop: "30px" } }, /* @__PURE__ */ import_react11.default.createElement("button", { className: "pay-button", type: "submit" }, "$1.35"))))))))))
2378
+ ), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ import_react11.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ import_react11.default.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_h = achData == null ? void 0 : achData.accountType) != null ? _h : "", onChange: handleChangeAch }, /* @__PURE__ */ import_react11.default.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ import_react11.default.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ import_react11.default.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ import_react11.default.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$1.35"))))))))))
2211
2379
  )));
2212
2380
  }
2381
+
2382
+ // src/app/components/Datascript.tsx
2383
+ var import_react12 = require("react");
2384
+ function DataScript() {
2385
+ (0, import_react12.useEffect)(() => {
2386
+ const src = "https://token-cert.dcap.com/v1/client";
2387
+ if (typeof window === "undefined") return;
2388
+ if (window.DatacapWebToken) {
2389
+ console.log("\u2705 Datacap already available");
2390
+ return;
2391
+ }
2392
+ if (!document.querySelector(`script[src="${src}"]`)) {
2393
+ const script = document.createElement("script");
2394
+ script.src = src;
2395
+ script.async = true;
2396
+ script.onload = () => {
2397
+ console.log("\u2705 Datacap script loaded");
2398
+ if (window.DatacapWebToken) {
2399
+ console.log("\u2705 DatacapWebToken is ready:", window.DatacapWebToken);
2400
+ } else {
2401
+ console.warn("\u26A0\uFE0F Script loaded, but DatacapWebToken not found");
2402
+ }
2403
+ };
2404
+ script.onerror = (err) => {
2405
+ console.error("\u274C Failed to load Datacap script", err);
2406
+ };
2407
+ document.head.appendChild(script);
2408
+ } else {
2409
+ console.log("\u2139\uFE0F Script already in DOM, waiting for Datacap...");
2410
+ }
2411
+ }, []);
2412
+ return null;
2413
+ }
2213
2414
  // Annotate the CommonJS export names for ESM import in node:
2214
2415
  0 && (module.exports = {
2416
+ DataScript,
2215
2417
  GetPaymentPage,
2216
2418
  RequestPayment,
2217
2419
  RequestPreAuthPayment
package/dist/index.mjs CHANGED
@@ -1235,6 +1235,7 @@ function Chargewidgetstyles() {
1235
1235
  border-radius: 8px;
1236
1236
  display: flex;
1237
1237
  justify-content: space-around;
1238
+ margin-bottom:12px
1238
1239
  }
1239
1240
 
1240
1241
  /* Style the buttons inside the tab */
@@ -1264,15 +1265,16 @@ function Chargewidgetstyles() {
1264
1265
  }
1265
1266
 
1266
1267
  /* Style the tab content */
1267
- .tabcontent {
1268
- padding: 8px 0;
1269
- }
1268
+
1269
+
1270
1270
 
1271
1271
  .pay-container{
1272
1272
  display: grid;
1273
1273
  grid-template-columns: 2fr 3fr;
1274
- padding: 50px 10% 20px ;
1274
+ padding: 30px 10% ;
1275
1275
  }
1276
+ .pay-main{
1277
+ padding-y: 20px}
1276
1278
 
1277
1279
  .request-payment-close-popup {
1278
1280
  position: absolute;
@@ -1284,7 +1286,7 @@ function Chargewidgetstyles() {
1284
1286
  border-right: 1px solid #E0DFE2;
1285
1287
  }
1286
1288
  .pay-conatiner-two{
1287
- padding: 0 5% 20px;
1289
+ padding: 0 5% 0;
1288
1290
  }
1289
1291
  .pay-logo-container{
1290
1292
  border-bottom: 1px solid #E0DFE2
@@ -1490,7 +1492,134 @@ function Chargewidgetstyles() {
1490
1492
  padding: 20px 5%;
1491
1493
  }
1492
1494
  }
1495
+ .charge-customer-name{
1496
+ color: #161616;
1497
+ font-family: Inter;
1498
+ font-size: 24px;
1499
+ font-style: normal;
1500
+ font-weight: 600;
1501
+ line-height: 32px;
1502
+ letter-spacing: -0.48px;
1503
+ text-transform: capitalize;
1504
+ margin-top:0;
1505
+ margin-bottom:16px
1506
+ }
1507
+ .card-ach-heading {
1508
+ color: #727272;
1509
+ font-family: Inter;
1510
+ font-size: 12px;
1511
+ font-style: normal;
1512
+ font-weight: 500;
1513
+ line-height: 18px;
1514
+ letter-spacing: -0.24px;
1515
+ margin : 0 0 10px
1516
+ }
1517
+ .card-list-div{
1518
+ max-height : 190px;
1519
+ overflow-y : auto;
1520
+ border:1px solid #E0DFE2;
1521
+ border-radius : 8px
1522
+ }
1523
+
1524
+
1525
+ .card-list-div::-webkit-scrollbar{
1526
+ width:2px;
1527
+ background-color:#F5F5F5
1528
+ }
1529
+ .card-list-div::-webkit-scrollbar-thumb{
1530
+ background-color:#35254D
1531
+ }
1532
+
1533
+ .card-list-single-div{
1534
+ border-bottom:C;
1535
+ padding : 12px 11px;
1536
+ display : flex ;
1537
+ align-items:center;
1538
+ justify-content : space-between;
1539
+ gap:12px
1540
+ }
1541
+ .card-list-single-div:last-child {
1542
+ border-bottom: none;
1543
+ }
1544
+ .card-lint-div-in{
1545
+ min-height:430px}
1546
+ .card-number-radio{
1547
+ display:flex;
1548
+ gap:12px;
1549
+ }
1550
+ .card-number-last-four{
1551
+ color:#161616;
1552
+ font-family:Inter;
1553
+ font-size:14px;
1554
+ font-weight:500;
1555
+ font-style"normal;
1556
+ line-height : 18px;
1557
+ latter-spacing:-0.18px
1558
+ }
1559
+ .card-expiry-date{
1560
+ margin:0;
1561
+ color:#00000080;
1562
+ font-family:Inter;
1563
+ font-size:14px;
1564
+ font-weight:500;
1565
+ font-style"normal;
1566
+ line-height : 18px;
1567
+ latter-spacing:-0.18px
1568
+ }
1569
+ .pay-with-other-card {
1570
+ margin-top : 12px;
1571
+ padding:12px 32px;
1572
+ border :1px solid #E0DFE2;
1573
+ border-radius : 1000px;
1574
+ display: flex;
1575
+ justify-content : center;
1576
+ align-items:center;
1577
+ gap:10px;
1578
+ // width:100%;
1579
+ background:white;
1580
+ cursor:pointer;
1581
+ color:#161616;
1582
+ text-align:center
1583
+ font-family: Inter;
1584
+ font-size: 14px;
1585
+ font-style: normal;
1586
+ font-weight: 500;
1587
+ line-height: 24px;
1588
+ letter-spacing: -0.28px;
1589
+ margin-bottom: 50px;
1590
+ }
1591
+ .charge-payment-back-btn {
1592
+ display: flex;
1593
+ padding: 9px 16px;
1594
+ align-items: center;
1595
+ gap: 6px;
1596
+ margin-bottom: 20px;
1597
+ border-radius: 1000px;
1598
+ border: 1px solid #E0DFE2;
1599
+ background: #FFF;
1600
+ box-shadow: 0px 6px 12px 0px rgba(206, 197, 221, 0.31);
1601
+ font-size:16px;
1602
+ curso:pointer
1603
+ }
1604
+ .btn {
1605
+ padding: 11px 23px;
1606
+ background-color: black;
1607
+ color: white;
1608
+ border: none;
1609
+ border-radius: 6px;
1610
+ font-weight: bold;
1611
+ margin: 0 10px;
1612
+ cursor: pointer;
1613
+ }
1493
1614
 
1615
+ .custom-swal-icon {
1616
+ margin: 20px auto;
1617
+ }
1618
+
1619
+ .custom-swal-popup {
1620
+ font-size: 16px;
1621
+ text-align: center;
1622
+ }
1494
1623
 
1495
1624
 
1496
1625
 
@@ -1775,12 +1904,13 @@ function SuccessMsz({ onClose }) {
1775
1904
 
1776
1905
  // src/app/components/Charge/GetPaymentPage.tsx
1777
1906
  import Swal from "sweetalert2";
1907
+ import { IoArrowBack } from "react-icons/io5";
1778
1908
  function GetPaymentPage(props) {
1779
1909
  var _a, _b, _c, _d, _e, _f, _g, _h;
1780
1910
  const [loading, setLoading] = useState3(false);
1781
1911
  const [success, setSuccess] = useState3(false);
1782
1912
  const [show, setShow] = useState3(false);
1783
- const [activetab, setActive] = useState3("card");
1913
+ const [activetab, setActive] = useState3("cardList");
1784
1914
  const [saveCardInfo, setSaveCardInfo] = useState3(false);
1785
1915
  const [saveACHinfo, setSaveACHinfo] = useState3(false);
1786
1916
  const fractalpayClientKey = props.fractalpayClientKey;
@@ -1788,6 +1918,21 @@ function GetPaymentPage(props) {
1788
1918
  const [cardError, setCardError] = useState3({});
1789
1919
  const [achData, setAchData] = useState3();
1790
1920
  const [achError, setAchError] = useState3({});
1921
+ const [cardList, setCardList] = useState3([
1922
+ { cardNumber: "9876789878999878", expMonth: "06", expYear: "2026", cardType: "visa" },
1923
+ { cardNumber: "9876789878999868", expMonth: "04", expYear: "2027", cardType: "visa" },
1924
+ { cardNumber: "9876789878999874", expMonth: "11", expYear: "2028", cardType: "visa" },
1925
+ { cardNumber: "9876789878999873", expMonth: "08", expYear: "2029", cardType: "visa" },
1926
+ { cardNumber: "9876789878999345", expMonth: "10", expYear: "2026", cardType: "visa" },
1927
+ { cardNumber: "9876789878999434", expMonth: "05", expYear: "2028", cardType: "visa" },
1928
+ { cardNumber: "9876789878999852", expMonth: "07", expYear: "2027", cardType: "visa" },
1929
+ { cardNumber: "9876789878994546", expMonth: "04", expYear: "2029", cardType: "visa" },
1930
+ { cardNumber: "9876789878999743", expMonth: "09", expYear: "2026", cardType: "visa" },
1931
+ { cardNumber: "9876789878997323", expMonth: "12", expYear: "2028", cardType: "visa" },
1932
+ { cardNumber: "9876789878998979", expMonth: "07", expYear: "2027", cardType: "visa" },
1933
+ { cardNumber: "9876789878992348", expMonth: "03", expYear: "2029", cardType: "visa" },
1934
+ { cardNumber: "9876789878999465", expMonth: "01", expYear: "2026", cardType: "visa" }
1935
+ ]);
1791
1936
  const showLoader = () => setLoading(true);
1792
1937
  const hideLoader = () => setLoading(false);
1793
1938
  const showError = (msz) => {
@@ -1799,6 +1944,7 @@ function GetPaymentPage(props) {
1799
1944
  };
1800
1945
  const handleClose = () => {
1801
1946
  setShow(false);
1947
+ setActive("cardList");
1802
1948
  };
1803
1949
  const handleShow = () => setShow(true);
1804
1950
  const handleCloseSeccess = () => {
@@ -2054,11 +2200,32 @@ function GetPaymentPage(props) {
2054
2200
  onClose: handleClose
2055
2201
  },
2056
2202
  /* @__PURE__ */ React11.createElement(Loader_default, { loading }),
2057
- 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) => {
2203
+ 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 != "ach" && /* @__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" }, activetab !== "cardList" ? /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React11.createElement(IoArrowBack, null), " Back"), /* @__PURE__ */ React11.createElement("div", { className: "tab" }, /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
2058
2204
  handletabchange("card");
2059
2205
  }, style: { backgroundColor: activetab === "card" ? "#fff" : "inherit" } }, "Card"), /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
2060
2206
  handletabchange("ach");
2061
- }, 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(
2207
+ }, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH"))) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("p", { className: "charge-customer-name" }, " Charge Mmm"), /* @__PURE__ */ React11.createElement("p", { className: "card-ach-heading" }, " Cards/ACH")), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React11.createElement("div", { className: "card-list-div" }, cardList && cardList.length > 0 && cardList.map((card, index) => {
2208
+ var _a2;
2209
+ return /* @__PURE__ */ React11.createElement("div", { className: "card-list-single-div" }, /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement("input", { type: "radio", className: "cardRadio", name: "selected_card", id: "" }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", (_a2 = card == null ? void 0 : card.cardNumber) == null ? void 0 : _a2.slice(-4)), /* @__PURE__ */ React11.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expMonth, "/", card == null ? void 0 : card.expYear)), /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement("span", { className: "visa-card" }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "" })), /* @__PURE__ */ React11.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => {
2210
+ Swal.fire({
2211
+ icon: "warning",
2212
+ text: "Do you want to delete the card?",
2213
+ showCancelButton: true,
2214
+ confirmButtonText: "Yes",
2215
+ cancelButtonText: "No",
2216
+ reverseButtons: true,
2217
+ // puts "No" on the left and "Yes" on the right
2218
+ buttonsStyling: false,
2219
+ // disables default styling
2220
+ customClass: {
2221
+ confirmButton: "swal2-confirm btn btn-dark",
2222
+ cancelButton: "swal2-cancel btn btn-dark",
2223
+ popup: "custom-swal-popup",
2224
+ icon: "custom-swal-icon"
2225
+ }
2226
+ });
2227
+ } }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))));
2228
+ })), /* @__PURE__ */ React11.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Pay With Other Card", /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit" }, "$1.35"))), /* @__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(
2062
2229
  "input",
2063
2230
  {
2064
2231
  className: "form-control card-number-new",
@@ -2124,7 +2291,7 @@ function GetPaymentPage(props) {
2124
2291
  checked: saveCardInfo,
2125
2292
  onChange: (e) => setSaveCardInfo(e.target.checked)
2126
2293
  }
2127
- ), /* @__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(
2294
+ ), /* @__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", style: { margin: 0 }, 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(
2128
2295
  "input",
2129
2296
  {
2130
2297
  type: "text",
@@ -2172,10 +2339,44 @@ function GetPaymentPage(props) {
2172
2339
  value: (_g = achData == null ? void 0 : achData.bankName) != null ? _g : "",
2173
2340
  onChange: handleChangeAch
2174
2341
  }
2175
- ), (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"))))))))))
2342
+ ), (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" }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$1.35"))))))))))
2176
2343
  )));
2177
2344
  }
2345
+
2346
+ // src/app/components/Datascript.tsx
2347
+ import { useEffect as useEffect4 } from "react";
2348
+ function DataScript() {
2349
+ useEffect4(() => {
2350
+ const src = "https://token-cert.dcap.com/v1/client";
2351
+ if (typeof window === "undefined") return;
2352
+ if (window.DatacapWebToken) {
2353
+ console.log("\u2705 Datacap already available");
2354
+ return;
2355
+ }
2356
+ if (!document.querySelector(`script[src="${src}"]`)) {
2357
+ const script = document.createElement("script");
2358
+ script.src = src;
2359
+ script.async = true;
2360
+ script.onload = () => {
2361
+ console.log("\u2705 Datacap script loaded");
2362
+ if (window.DatacapWebToken) {
2363
+ console.log("\u2705 DatacapWebToken is ready:", window.DatacapWebToken);
2364
+ } else {
2365
+ console.warn("\u26A0\uFE0F Script loaded, but DatacapWebToken not found");
2366
+ }
2367
+ };
2368
+ script.onerror = (err) => {
2369
+ console.error("\u274C Failed to load Datacap script", err);
2370
+ };
2371
+ document.head.appendChild(script);
2372
+ } else {
2373
+ console.log("\u2139\uFE0F Script already in DOM, waiting for Datacap...");
2374
+ }
2375
+ }, []);
2376
+ return null;
2377
+ }
2178
2378
  export {
2379
+ DataScript,
2179
2380
  GetPaymentPage,
2180
2381
  RequestPayment,
2181
2382
  RequestPreAuthPayment
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pinerohit11/testwidget",
3
- "version": "0.1.86",
3
+ "version": "0.1.88",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "next dev -p 4001",
@@ -22,6 +22,7 @@
22
22
  "react-bs-datatable": "^3.15.0",
23
23
  "react-datepicker": "^7.5.0",
24
24
  "react-dom": "18.3.1",
25
+ "react-icons": "^5.5.0",
25
26
  "react-number-format": "^5.4.3",
26
27
  "react-toastify": "^10.0.6",
27
28
  "styled-components": "^6.1.15",