@pinerohit11/testwidget 0.2.91 → 0.2.93
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.js +24 -12
- package/dist/index.mjs +24 -12
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1219,6 +1219,19 @@ function Chargewidgetstyles() {
|
|
|
1219
1219
|
.frac-form .form-group{
|
|
1220
1220
|
margin:0 !important
|
|
1221
1221
|
}
|
|
1222
|
+
.frac-form .mb-4{
|
|
1223
|
+
margin-bottom : 10px !important
|
|
1224
|
+
}
|
|
1225
|
+
.frac-form .save-ach-div{
|
|
1226
|
+
display:flex !important;
|
|
1227
|
+
gap:5px !important;
|
|
1228
|
+
align-items:center
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
.frac-form .card-cvv-in{
|
|
1232
|
+
height : 36px !importantt;
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1222
1235
|
.frac-form .pay-payment-amount{
|
|
1223
1236
|
text-align:start !important
|
|
1224
1237
|
}
|
|
@@ -2697,7 +2710,7 @@ function GetPaymentPage(props) {
|
|
|
2697
2710
|
handletabchange("card");
|
|
2698
2711
|
}, style: { border: activetab === "card" ? "1px solid" : "" } }, /* @__PURE__ */ import_react12.default.createElement("i", { className: "fas fa-credit-card me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Card"), /* @__PURE__ */ import_react12.default.createElement("button", { className: "tablinks", onClick: (e) => {
|
|
2699
2712
|
handletabchange("ach");
|
|
2700
|
-
}, style: { border: activetab === "ach" ? "1px solid" : "" } }, /* @__PURE__ */ import_react12.default.createElement("i", { className: "fas fa-university me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Bank")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ import_react12.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react12.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" }))))) : /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("
|
|
2713
|
+
}, style: { border: activetab === "ach" ? "1px solid" : "" } }, /* @__PURE__ */ import_react12.default.createElement("i", { className: "fas fa-university me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Bank")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ import_react12.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react12.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" }))))) : /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("h6", { className: "charge-customer-name", style: { marginBottom: "16px !important" } }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ import_react12.default.createElement("h6", { className: "card-ach-heading", style: { marginBottom: "10px !important" } }, " Cards/ACH"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ import_react12.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react12.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" }))))), /* @__PURE__ */ import_react12.default.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
2701
2714
|
"input",
|
|
2702
2715
|
{
|
|
2703
2716
|
type: "radio",
|
|
@@ -2728,7 +2741,7 @@ function GetPaymentPage(props) {
|
|
|
2728
2741
|
"input",
|
|
2729
2742
|
{
|
|
2730
2743
|
"data-token": "exp_month",
|
|
2731
|
-
className: "form-control required",
|
|
2744
|
+
className: "form-control required card-cvv-in",
|
|
2732
2745
|
type: "text",
|
|
2733
2746
|
placeholder: "MM",
|
|
2734
2747
|
maxLength: 2,
|
|
@@ -2739,7 +2752,7 @@ function GetPaymentPage(props) {
|
|
|
2739
2752
|
"input",
|
|
2740
2753
|
{
|
|
2741
2754
|
"data-token": "exp_year",
|
|
2742
|
-
className: "form-control required",
|
|
2755
|
+
className: "form-control required card-cvv-in",
|
|
2743
2756
|
type: "text",
|
|
2744
2757
|
placeholder: "YYYY",
|
|
2745
2758
|
maxLength: 4,
|
|
@@ -2750,7 +2763,7 @@ function GetPaymentPage(props) {
|
|
|
2750
2763
|
"input",
|
|
2751
2764
|
{
|
|
2752
2765
|
"data-token": "cvv",
|
|
2753
|
-
className: "form-control required",
|
|
2766
|
+
className: "form-control card-cvv-in required",
|
|
2754
2767
|
type: "text",
|
|
2755
2768
|
maxLength: 4,
|
|
2756
2769
|
placeholder: "CVC",
|
|
@@ -2778,7 +2791,6 @@ function GetPaymentPage(props) {
|
|
|
2778
2791
|
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
2779
2792
|
}
|
|
2780
2793
|
), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "save_card" }, "Save card for future payments "), /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ import_react12.default.createElement("g", { clipPath: "url(#clip0_12420_50192)" }, /* @__PURE__ */ import_react12.default.createElement("rect", { width: "20", height: "20", fill: "white" }), /* @__PURE__ */ import_react12.default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z", fill: "#161616" })), /* @__PURE__ */ import_react12.default.createElement("defs", null, /* @__PURE__ */ import_react12.default.createElement("clipPath", { id: "clip0_12420_50192" }, /* @__PURE__ */ import_react12.default.createElement("rect", { width: "20", height: "20", fill: "white" }))))))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: "0" } }, /* @__PURE__ */ import_react12.default.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))), /* @__PURE__ */ import_react12.default.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react12.default.createElement("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ach-scrl", style: {
|
|
2781
|
-
// minHeight: paymentData?.isSkyFiAccount && cardList?.length > 0 ? "378px" : cardList?.length > 0 ? '442px': '500px', overflow: 'auto', marginRight: '5px',
|
|
2782
2794
|
minHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "378px" : (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) == 0 ? "436px" : (cardList == null ? void 0 : cardList.length) > 0 ? "462px" : "520px",
|
|
2783
2795
|
maxHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "358px" : (cardList == null ? void 0 : cardList.length) > 0 ? "380px" : "380px"
|
|
2784
2796
|
} }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ import_react12.default.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_e = achData == null ? void 0 : achData.name) != null ? _e : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ import_react12.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ import_react12.default.createElement(
|
|
@@ -2829,7 +2841,7 @@ function GetPaymentPage(props) {
|
|
|
2829
2841
|
value: (_i = achData == null ? void 0 : achData.bankName) != null ? _i : "",
|
|
2830
2842
|
onChange: handleChangeAch
|
|
2831
2843
|
}
|
|
2832
|
-
), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ import_react12.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ import_react12.default.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_j = achData == null ? void 0 : achData.accountType) != null ? _j : "", onChange: handleChangeAch }, /* @__PURE__ */ import_react12.default.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ import_react12.default.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ import_react12.default.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ import_react12.default.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group " }, /* @__PURE__ */ import_react12.default.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$", props == null ? void 0 : props.amount))))))))))
|
|
2844
|
+
), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ import_react12.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ import_react12.default.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_j = achData == null ? void 0 : achData.accountType) != null ? _j : "", onChange: handleChangeAch }, /* @__PURE__ */ import_react12.default.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" } }, /* @__PURE__ */ import_react12.default.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ import_react12.default.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ import_react12.default.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group " }, /* @__PURE__ */ import_react12.default.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$", props == null ? void 0 : props.amount))))))))))
|
|
2833
2845
|
)));
|
|
2834
2846
|
}
|
|
2835
2847
|
|
|
@@ -3267,7 +3279,7 @@ function PreAuthPayment(props) {
|
|
|
3267
3279
|
onClose: handleClose
|
|
3268
3280
|
},
|
|
3269
3281
|
/* @__PURE__ */ import_react13.default.createElement(Loader_default, { loading }),
|
|
3270
|
-
success ? /* @__PURE__ */ import_react13.default.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "frac-card-payment-page frac-form" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react13.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("defs", null, /* @__PURE__ */ import_react13.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react13.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("h1", { className: "pay-heading" }, "Pay"), (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ import_react13.default.createElement("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react13.default.createElement(import_io52.IoArrowBack, null), " Back")), /* @__PURE__ */ import_react13.default.createElement("div", { className: "amt-pay-con" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react13.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react13.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" })))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ import_react13.default.createElement("div", null)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react13.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react13.default.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ import_react13.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react13.default.createElement(import_io52.IoArrowBack, null), " Back"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ import_react13.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react13.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" })))))) : /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("
|
|
3282
|
+
success ? /* @__PURE__ */ import_react13.default.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "frac-card-payment-page frac-form" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react13.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("defs", null, /* @__PURE__ */ import_react13.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react13.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("h1", { className: "pay-heading" }, "Pay"), (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ import_react13.default.createElement("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react13.default.createElement(import_io52.IoArrowBack, null), " Back")), /* @__PURE__ */ import_react13.default.createElement("div", { className: "amt-pay-con" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react13.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react13.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" })))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ import_react13.default.createElement("div", null)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react13.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react13.default.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ import_react13.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react13.default.createElement(import_io52.IoArrowBack, null), " Back"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ import_react13.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react13.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" })))))) : /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("h6", { className: "charge-customer-name", style: { marginBottom: "16px !important" } }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ import_react13.default.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ import_react13.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react13.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" })))), /* @__PURE__ */ import_react13.default.createElement("h6", { className: "card-ach-heading", style: { marginBottom: "10px !important" } }, " Cards")), /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react13.default.createElement(
|
|
3271
3283
|
"input",
|
|
3272
3284
|
{
|
|
3273
3285
|
type: "radio",
|
|
@@ -3307,7 +3319,7 @@ function PreAuthPayment(props) {
|
|
|
3307
3319
|
"input",
|
|
3308
3320
|
{
|
|
3309
3321
|
"data-token": "exp_month",
|
|
3310
|
-
className: "form-control required",
|
|
3322
|
+
className: "form-control required card-cvv-in",
|
|
3311
3323
|
type: "text",
|
|
3312
3324
|
placeholder: "MM",
|
|
3313
3325
|
maxLength: 2,
|
|
@@ -3318,7 +3330,7 @@ function PreAuthPayment(props) {
|
|
|
3318
3330
|
"input",
|
|
3319
3331
|
{
|
|
3320
3332
|
"data-token": "exp_year",
|
|
3321
|
-
className: "form-control required",
|
|
3333
|
+
className: "form-control required card-cvv-in",
|
|
3322
3334
|
type: "text",
|
|
3323
3335
|
placeholder: "YYYY",
|
|
3324
3336
|
maxLength: 4,
|
|
@@ -3329,7 +3341,7 @@ function PreAuthPayment(props) {
|
|
|
3329
3341
|
"input",
|
|
3330
3342
|
{
|
|
3331
3343
|
"data-token": "cvv",
|
|
3332
|
-
className: "form-control required",
|
|
3344
|
+
className: "form-control required card-cvv-in",
|
|
3333
3345
|
type: "text",
|
|
3334
3346
|
maxLength: 4,
|
|
3335
3347
|
placeholder: "CVC",
|
|
@@ -3348,7 +3360,7 @@ function PreAuthPayment(props) {
|
|
|
3348
3360
|
onChange: (e) => handleCardChange("orderId", e.target.value),
|
|
3349
3361
|
style: { background: "#F6F6F7", color: "#727272" }
|
|
3350
3362
|
}
|
|
3351
|
-
)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ import_react13.default.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_d = cardData == null ? void 0 : cardData.zipCode) != null ? _d : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ import_react13.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ import_react13.default.createElement(
|
|
3363
|
+
)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ import_react13.default.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_d = cardData == null ? void 0 : cardData.zipCode) != null ? _d : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ import_react13.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), (props == null ? void 0 : props.customerId) && /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ import_react13.default.createElement(
|
|
3352
3364
|
"input",
|
|
3353
3365
|
{
|
|
3354
3366
|
type: "checkbox",
|
|
@@ -3357,7 +3369,7 @@ function PreAuthPayment(props) {
|
|
|
3357
3369
|
checked: saveCardInfo,
|
|
3358
3370
|
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
3359
3371
|
}
|
|
3360
|
-
), /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "save_card" }, "Save card for future payments")))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: 0 } }, /* @__PURE__ */ import_react13.default.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))))))))))
|
|
3372
|
+
), /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "save_card" }, "Save card for future payments "), /* @__PURE__ */ import_react13.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement("g", { clipPath: "url(#clip0_12420_50192)" }, /* @__PURE__ */ import_react13.default.createElement("rect", { width: "20", height: "20", fill: "white" }), /* @__PURE__ */ import_react13.default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }), /* @__PURE__ */ import_react13.default.createElement("path", { d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z", fill: "#161616" })), /* @__PURE__ */ import_react13.default.createElement("defs", null, /* @__PURE__ */ import_react13.default.createElement("clipPath", { id: "clip0_12420_50192" }, /* @__PURE__ */ import_react13.default.createElement("rect", { width: "20", height: "20", fill: "white" }))))))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: 0 } }, /* @__PURE__ */ import_react13.default.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))))))))))
|
|
3361
3373
|
)));
|
|
3362
3374
|
}
|
|
3363
3375
|
|
package/dist/index.mjs
CHANGED
|
@@ -1181,6 +1181,19 @@ function Chargewidgetstyles() {
|
|
|
1181
1181
|
.frac-form .form-group{
|
|
1182
1182
|
margin:0 !important
|
|
1183
1183
|
}
|
|
1184
|
+
.frac-form .mb-4{
|
|
1185
|
+
margin-bottom : 10px !important
|
|
1186
|
+
}
|
|
1187
|
+
.frac-form .save-ach-div{
|
|
1188
|
+
display:flex !important;
|
|
1189
|
+
gap:5px !important;
|
|
1190
|
+
align-items:center
|
|
1191
|
+
}
|
|
1192
|
+
|
|
1193
|
+
.frac-form .card-cvv-in{
|
|
1194
|
+
height : 36px !importantt;
|
|
1195
|
+
}
|
|
1196
|
+
|
|
1184
1197
|
.frac-form .pay-payment-amount{
|
|
1185
1198
|
text-align:start !important
|
|
1186
1199
|
}
|
|
@@ -2659,7 +2672,7 @@ function GetPaymentPage(props) {
|
|
|
2659
2672
|
handletabchange("card");
|
|
2660
2673
|
}, style: { border: activetab === "card" ? "1px solid" : "" } }, /* @__PURE__ */ React11.createElement("i", { className: "fas fa-credit-card me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Card"), /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
|
|
2661
2674
|
handletabchange("ach");
|
|
2662
|
-
}, style: { border: activetab === "ach" ? "1px solid" : "" } }, /* @__PURE__ */ React11.createElement("i", { className: "fas fa-university me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Bank")), /* @__PURE__ */ React11.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React11.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React11.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" }))))) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("
|
|
2675
|
+
}, style: { border: activetab === "ach" ? "1px solid" : "" } }, /* @__PURE__ */ React11.createElement("i", { className: "fas fa-university me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Bank")), /* @__PURE__ */ React11.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React11.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React11.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" }))))) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("h6", { className: "charge-customer-name", style: { marginBottom: "16px !important" } }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ React11.createElement("h6", { className: "card-ach-heading", style: { marginBottom: "10px !important" } }, " Cards/ACH"), /* @__PURE__ */ React11.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React11.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React11.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" }))))), /* @__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" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ React11.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement(
|
|
2663
2676
|
"input",
|
|
2664
2677
|
{
|
|
2665
2678
|
type: "radio",
|
|
@@ -2690,7 +2703,7 @@ function GetPaymentPage(props) {
|
|
|
2690
2703
|
"input",
|
|
2691
2704
|
{
|
|
2692
2705
|
"data-token": "exp_month",
|
|
2693
|
-
className: "form-control required",
|
|
2706
|
+
className: "form-control required card-cvv-in",
|
|
2694
2707
|
type: "text",
|
|
2695
2708
|
placeholder: "MM",
|
|
2696
2709
|
maxLength: 2,
|
|
@@ -2701,7 +2714,7 @@ function GetPaymentPage(props) {
|
|
|
2701
2714
|
"input",
|
|
2702
2715
|
{
|
|
2703
2716
|
"data-token": "exp_year",
|
|
2704
|
-
className: "form-control required",
|
|
2717
|
+
className: "form-control required card-cvv-in",
|
|
2705
2718
|
type: "text",
|
|
2706
2719
|
placeholder: "YYYY",
|
|
2707
2720
|
maxLength: 4,
|
|
@@ -2712,7 +2725,7 @@ function GetPaymentPage(props) {
|
|
|
2712
2725
|
"input",
|
|
2713
2726
|
{
|
|
2714
2727
|
"data-token": "cvv",
|
|
2715
|
-
className: "form-control required",
|
|
2728
|
+
className: "form-control card-cvv-in required",
|
|
2716
2729
|
type: "text",
|
|
2717
2730
|
maxLength: 4,
|
|
2718
2731
|
placeholder: "CVC",
|
|
@@ -2740,7 +2753,6 @@ function GetPaymentPage(props) {
|
|
|
2740
2753
|
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
2741
2754
|
}
|
|
2742
2755
|
), /* @__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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React11.createElement("g", { clipPath: "url(#clip0_12420_50192)" }, /* @__PURE__ */ React11.createElement("rect", { width: "20", height: "20", fill: "white" }), /* @__PURE__ */ React11.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }), /* @__PURE__ */ React11.createElement("path", { d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z", fill: "#161616" })), /* @__PURE__ */ React11.createElement("defs", null, /* @__PURE__ */ React11.createElement("clipPath", { id: "clip0_12420_50192" }, /* @__PURE__ */ React11.createElement("rect", { width: "20", height: "20", fill: "white" }))))))), /* @__PURE__ */ React11.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: "0" } }, /* @__PURE__ */ React11.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "ach-scrl", style: {
|
|
2743
|
-
// minHeight: paymentData?.isSkyFiAccount && cardList?.length > 0 ? "378px" : cardList?.length > 0 ? '442px': '500px', overflow: 'auto', marginRight: '5px',
|
|
2744
2756
|
minHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "378px" : (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) == 0 ? "436px" : (cardList == null ? void 0 : cardList.length) > 0 ? "462px" : "520px",
|
|
2745
2757
|
maxHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "358px" : (cardList == null ? void 0 : cardList.length) > 0 ? "380px" : "380px"
|
|
2746
2758
|
} }, /* @__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: (_e = achData == null ? void 0 : achData.name) != null ? _e : "", 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(
|
|
@@ -2791,7 +2803,7 @@ function GetPaymentPage(props) {
|
|
|
2791
2803
|
value: (_i = achData == null ? void 0 : achData.bankName) != null ? _i : "",
|
|
2792
2804
|
onChange: handleChangeAch
|
|
2793
2805
|
}
|
|
2794
|
-
), (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: (_j = achData == null ? void 0 : achData.accountType) != null ? _j : "", 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" }, "$", props == null ? void 0 : props.amount))))))))))
|
|
2806
|
+
), (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: (_j = achData == null ? void 0 : achData.accountType) != null ? _j : "", 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 save-ach-div", 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" }, "$", props == null ? void 0 : props.amount))))))))))
|
|
2795
2807
|
)));
|
|
2796
2808
|
}
|
|
2797
2809
|
|
|
@@ -3229,7 +3241,7 @@ function PreAuthPayment(props) {
|
|
|
3229
3241
|
onClose: handleClose
|
|
3230
3242
|
},
|
|
3231
3243
|
/* @__PURE__ */ React12.createElement(Loader_default, { loading }),
|
|
3232
|
-
success ? /* @__PURE__ */ React12.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", { className: "frac-card-payment-page frac-form" }, /* @__PURE__ */ React12.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ React12.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React12.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React12.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__ */ React12.createElement("defs", null, /* @__PURE__ */ React12.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React12.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React12.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React12.createElement("h1", { className: "pay-heading" }, "Pay"), (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ React12.createElement("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React12.createElement(IoArrowBack2, null), " Back")), /* @__PURE__ */ React12.createElement("div", { className: "amt-pay-con" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React12.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React12.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" })))), /* @__PURE__ */ React12.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ React12.createElement("div", null)), /* @__PURE__ */ React12.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React12.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React12.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ React12.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ React12.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React12.createElement(IoArrowBack2, null), " Back"), /* @__PURE__ */ React12.createElement("div", { className: "" }, /* @__PURE__ */ React12.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React12.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React12.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" })))))) : /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("
|
|
3244
|
+
success ? /* @__PURE__ */ React12.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", { className: "frac-card-payment-page frac-form" }, /* @__PURE__ */ React12.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ React12.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React12.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React12.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__ */ React12.createElement("defs", null, /* @__PURE__ */ React12.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React12.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React12.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React12.createElement("h1", { className: "pay-heading" }, "Pay"), (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ React12.createElement("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React12.createElement(IoArrowBack2, null), " Back")), /* @__PURE__ */ React12.createElement("div", { className: "amt-pay-con" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React12.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React12.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" })))), /* @__PURE__ */ React12.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ React12.createElement("div", null)), /* @__PURE__ */ React12.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React12.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React12.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ React12.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ React12.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React12.createElement(IoArrowBack2, null), " Back"), /* @__PURE__ */ React12.createElement("div", { className: "" }, /* @__PURE__ */ React12.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React12.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React12.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" })))))) : /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("h6", { className: "charge-customer-name", style: { marginBottom: "16px !important" } }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ React12.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React12.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React12.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" })))), /* @__PURE__ */ React12.createElement("h6", { className: "card-ach-heading", style: { marginBottom: "10px !important" } }, " Cards")), /* @__PURE__ */ React12.createElement("div", { style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React12.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React12.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ React12.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ React12.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React12.createElement(
|
|
3233
3245
|
"input",
|
|
3234
3246
|
{
|
|
3235
3247
|
type: "radio",
|
|
@@ -3269,7 +3281,7 @@ function PreAuthPayment(props) {
|
|
|
3269
3281
|
"input",
|
|
3270
3282
|
{
|
|
3271
3283
|
"data-token": "exp_month",
|
|
3272
|
-
className: "form-control required",
|
|
3284
|
+
className: "form-control required card-cvv-in",
|
|
3273
3285
|
type: "text",
|
|
3274
3286
|
placeholder: "MM",
|
|
3275
3287
|
maxLength: 2,
|
|
@@ -3280,7 +3292,7 @@ function PreAuthPayment(props) {
|
|
|
3280
3292
|
"input",
|
|
3281
3293
|
{
|
|
3282
3294
|
"data-token": "exp_year",
|
|
3283
|
-
className: "form-control required",
|
|
3295
|
+
className: "form-control required card-cvv-in",
|
|
3284
3296
|
type: "text",
|
|
3285
3297
|
placeholder: "YYYY",
|
|
3286
3298
|
maxLength: 4,
|
|
@@ -3291,7 +3303,7 @@ function PreAuthPayment(props) {
|
|
|
3291
3303
|
"input",
|
|
3292
3304
|
{
|
|
3293
3305
|
"data-token": "cvv",
|
|
3294
|
-
className: "form-control required",
|
|
3306
|
+
className: "form-control required card-cvv-in",
|
|
3295
3307
|
type: "text",
|
|
3296
3308
|
maxLength: 4,
|
|
3297
3309
|
placeholder: "CVC",
|
|
@@ -3310,7 +3322,7 @@ function PreAuthPayment(props) {
|
|
|
3310
3322
|
onChange: (e) => handleCardChange("orderId", e.target.value),
|
|
3311
3323
|
style: { background: "#F6F6F7", color: "#727272" }
|
|
3312
3324
|
}
|
|
3313
|
-
)), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ React12.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_d = cardData == null ? void 0 : cardData.zipCode) != null ? _d : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React12.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React12.createElement(
|
|
3325
|
+
)), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ React12.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_d = cardData == null ? void 0 : cardData.zipCode) != null ? _d : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React12.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), (props == null ? void 0 : props.customerId) && /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React12.createElement(
|
|
3314
3326
|
"input",
|
|
3315
3327
|
{
|
|
3316
3328
|
type: "checkbox",
|
|
@@ -3319,7 +3331,7 @@ function PreAuthPayment(props) {
|
|
|
3319
3331
|
checked: saveCardInfo,
|
|
3320
3332
|
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
3321
3333
|
}
|
|
3322
|
-
), /* @__PURE__ */ React12.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React12.createElement("label", { htmlFor: "save_card" }, "Save card for future payments")))), /* @__PURE__ */ React12.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: 0 } }, /* @__PURE__ */ React12.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))))))))))
|
|
3334
|
+
), /* @__PURE__ */ React12.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React12.createElement("label", { htmlFor: "save_card" }, "Save card for future payments "), /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React12.createElement("g", { clipPath: "url(#clip0_12420_50192)" }, /* @__PURE__ */ React12.createElement("rect", { width: "20", height: "20", fill: "white" }), /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }), /* @__PURE__ */ React12.createElement("path", { d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z", fill: "#161616" })), /* @__PURE__ */ React12.createElement("defs", null, /* @__PURE__ */ React12.createElement("clipPath", { id: "clip0_12420_50192" }, /* @__PURE__ */ React12.createElement("rect", { width: "20", height: "20", fill: "white" }))))))), /* @__PURE__ */ React12.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: 0 } }, /* @__PURE__ */ React12.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))))))))))
|
|
3323
3335
|
)));
|
|
3324
3336
|
}
|
|
3325
3337
|
|