@fractalpay/fractalpay-next-dev 0.0.253 → 0.0.255
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +16 -42
- package/dist/index.js +518 -1841
- package/dist/index.js.map +1 -1
- package/global.d.ts +0 -1
- package/package.json +1 -1
- package/types/apple-pay.d.ts +0 -18
package/dist/index.js
CHANGED
|
@@ -39,7 +39,7 @@ var require_package = __commonJS({
|
|
|
39
39
|
"package.json"(exports, module) {
|
|
40
40
|
module.exports = {
|
|
41
41
|
name: "@fractalpay/fractalpay-next-dev",
|
|
42
|
-
version: "0.0.
|
|
42
|
+
version: "0.0.255",
|
|
43
43
|
private: false,
|
|
44
44
|
type: "module",
|
|
45
45
|
scripts: {
|
|
@@ -113,25 +113,8 @@ import { useState, useEffect } from "react";
|
|
|
113
113
|
import { jsx } from "react/jsx-runtime";
|
|
114
114
|
var LoaderStyle = (props) => {
|
|
115
115
|
return /* @__PURE__ */ jsx("style", { children: `
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
position: fixed; /* Fixed position to cover the viewport */
|
|
119
|
-
top: 0;
|
|
120
|
-
left: 0;
|
|
121
|
-
width: 100%;
|
|
122
|
-
height: 100%;
|
|
123
|
-
display: flex;
|
|
124
|
-
justify-content: center;
|
|
125
|
-
align-items: center;
|
|
126
|
-
/* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
|
|
127
|
-
background-color: rgba(31, 29, 29, 0.52); /* Semi-transparent black background */
|
|
128
|
-
|
|
129
|
-
backdrop-filter: blur(0.5px); /* Blur effect */
|
|
130
|
-
z-index: 999999999999 !important; /* Ensure it's on top of other elements */
|
|
131
|
-
transform: translate(0%, 0%) !important
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.loader-dark {
|
|
116
|
+
|
|
117
|
+
.loader {
|
|
135
118
|
position: fixed; /* Fixed position to cover the viewport */
|
|
136
119
|
top: 0;
|
|
137
120
|
left: 0;
|
|
@@ -143,7 +126,7 @@ var LoaderStyle = (props) => {
|
|
|
143
126
|
/* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
|
|
144
127
|
background-color: rgba(31, 29, 29, 0.52); /* Semi-transparent black background */
|
|
145
128
|
|
|
146
|
-
backdrop-filter: blur(
|
|
129
|
+
backdrop-filter: blur(.5px); /* Blur effect */
|
|
147
130
|
z-index: 999999999999 !important; /* Ensure it's on top of other elements */
|
|
148
131
|
transform: translate(0%, 0%) !important
|
|
149
132
|
}
|
|
@@ -218,11 +201,10 @@ var LoaderStyle_default = LoaderStyle;
|
|
|
218
201
|
|
|
219
202
|
// src/app/components/Loader/Loader.tsx
|
|
220
203
|
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
221
|
-
var Loader = (
|
|
222
|
-
var _b = _a, { intensity = "light" } = _b, props = __objRest(_b, ["intensity"]);
|
|
204
|
+
var Loader = (props) => {
|
|
223
205
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
224
206
|
/* @__PURE__ */ jsx2(LoaderStyle_default, {}),
|
|
225
|
-
(props == null ? void 0 : props.loading) && /* @__PURE__ */ jsx2("div", { className:
|
|
207
|
+
(props == null ? void 0 : props.loading) && /* @__PURE__ */ jsx2("div", { className: "loader", children: /* @__PURE__ */ jsxs("div", { className: "lds-ellipsis", children: [
|
|
226
208
|
/* @__PURE__ */ jsx2("div", {}),
|
|
227
209
|
/* @__PURE__ */ jsx2("div", {}),
|
|
228
210
|
/* @__PURE__ */ jsx2("div", {}),
|
|
@@ -236,65 +218,41 @@ var Loader_default = Loader;
|
|
|
236
218
|
var { name } = require_package();
|
|
237
219
|
var S3Url = "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/";
|
|
238
220
|
if (name === "@fractalpay/fractalpay-next-dev") {
|
|
239
|
-
|
|
240
|
-
|
|
221
|
+
baseUrl = "http://192.168.1.51:8082/";
|
|
222
|
+
masterBaseUrl = "http://192.168.1.51:8081/";
|
|
241
223
|
fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
|
|
242
224
|
datacapUrl = "https://token-cert.dcap.com/v1/client";
|
|
243
225
|
threedsSecurePublicKey = "pk_test_51RH5Wc2SlJvyNZ80hpUDy88r4rVdpijfKbNaWaUyQEE6rOrPmG2JQyAj7G5amBD5z5daC56WaeT4jfNhrrPcGOEP00UyKu6AOw";
|
|
244
|
-
applePayMerchantId = "fractal";
|
|
245
|
-
googlePayMerchantId = "12345678901234567890";
|
|
246
|
-
googlePayEnvironment = "TEST";
|
|
247
|
-
googlePayGatewayMerchantId = "fractal";
|
|
248
226
|
} else if (name === "@fractalpay/fractalpay-next-test") {
|
|
249
227
|
masterBaseUrl = "https://testapi.fractalpay.com/";
|
|
250
228
|
baseUrl = "https://staging-widget.fractalpay.com/";
|
|
251
229
|
fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
|
|
252
230
|
datacapUrl = "https://token-cert.dcap.com/v1/client";
|
|
253
231
|
threedsSecurePublicKey = "pk_test_51RH5Wc2SlJvyNZ80hpUDy88r4rVdpijfKbNaWaUyQEE6rOrPmG2JQyAj7G5amBD5z5daC56WaeT4jfNhrrPcGOEP00UyKu6AOw";
|
|
254
|
-
applePayMerchantId = "fractal";
|
|
255
|
-
googlePayMerchantId = "12345678901234567890";
|
|
256
|
-
googlePayEnvironment = "TEST";
|
|
257
|
-
googlePayGatewayMerchantId = "fractal";
|
|
258
232
|
} else if (name === "@fractalpay/fractalpay-next-testprod") {
|
|
259
233
|
masterBaseUrl = "https://sky-node-prod.fractalpay.com/";
|
|
260
234
|
baseUrl = "https://widget-prod.fractalpay.com/";
|
|
261
235
|
fractalGatewayUrl = "https://api.merchant-trends.com/";
|
|
262
236
|
datacapUrl = "https://token.dcap.com/v1/client";
|
|
263
237
|
threedsSecurePublicKey = "pk_live_51RH5WXCZ90rBGeaYwqmjWqgUmudTgxL6uKOE1keu617jvRx9OvW2ke6zGf6SKgv4ixsBLcIPQ4sQIEhp8MgBX39500CqULxOPB";
|
|
264
|
-
applePayMerchantId = "fractal";
|
|
265
|
-
googlePayMerchantId = "BCR2DN4T6OC2TCQH";
|
|
266
|
-
googlePayEnvironment = "PRODUCTION";
|
|
267
|
-
googlePayGatewayMerchantId = "fractal";
|
|
268
238
|
} else if (name === "@fractalpay/fractalpay-next") {
|
|
269
239
|
masterBaseUrl = "https://api.fractalpay.com/";
|
|
270
240
|
baseUrl = "https://widget.fractalpay.com/";
|
|
271
241
|
fractalGatewayUrl = "https://api.merchant-trends.com/";
|
|
272
242
|
datacapUrl = "https://token.dcap.com/v1/client";
|
|
273
243
|
threedsSecurePublicKey = "pk_live_51RH5WXCZ90rBGeaYwqmjWqgUmudTgxL6uKOE1keu617jvRx9OvW2ke6zGf6SKgv4ixsBLcIPQ4sQIEhp8MgBX39500CqULxOPB";
|
|
274
|
-
applePayMerchantId = "fractal";
|
|
275
|
-
googlePayMerchantId = "BCR2DN4T6OC2TCQH";
|
|
276
|
-
googlePayEnvironment = "PRODUCTION";
|
|
277
|
-
googlePayGatewayMerchantId = "fractal";
|
|
278
244
|
} else {
|
|
279
245
|
baseUrl = "http://localhost:8082/";
|
|
280
246
|
masterBaseUrl = "http://localhost:8081/";
|
|
281
247
|
fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
|
|
282
248
|
datacapUrl = "https://token-cert.dcap.com/v1/client";
|
|
283
249
|
threedsSecurePublicKey = "pk_test_51RH5Wc2SlJvyNZ80hpUDy88r4rVdpijfKbNaWaUyQEE6rOrPmG2JQyAj7G5amBD5z5daC56WaeT4jfNhrrPcGOEP00UyKu6AOw";
|
|
284
|
-
applePayMerchantId = "fractal";
|
|
285
|
-
googlePayMerchantId = "12345678901234567890";
|
|
286
|
-
googlePayEnvironment = "TEST";
|
|
287
|
-
googlePayGatewayMerchantId = "fractal";
|
|
288
250
|
}
|
|
289
251
|
var masterBaseUrl;
|
|
290
252
|
var baseUrl;
|
|
291
253
|
var fractalGatewayUrl;
|
|
292
254
|
var datacapUrl;
|
|
293
255
|
var threedsSecurePublicKey;
|
|
294
|
-
var applePayMerchantId;
|
|
295
|
-
var googlePayMerchantId;
|
|
296
|
-
var googlePayEnvironment;
|
|
297
|
-
var googlePayGatewayMerchantId;
|
|
298
256
|
|
|
299
257
|
// src/app/components/Errortext.ts
|
|
300
258
|
var ErrorText = {
|
|
@@ -2950,7 +2908,7 @@ function ErrorCardMszStyle() {
|
|
|
2950
2908
|
|
|
2951
2909
|
// src/app/components/ErrorCardMessage/ErrorCardMessage.tsx
|
|
2952
2910
|
import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2953
|
-
var ErrorCardMessage = ({ onClose, error
|
|
2911
|
+
var ErrorCardMessage = ({ onClose, error }) => {
|
|
2954
2912
|
return /* @__PURE__ */ jsxs6(Fragment6, { children: [
|
|
2955
2913
|
/* @__PURE__ */ jsx12(ErrorCardMszStyle, {}),
|
|
2956
2914
|
/* @__PURE__ */ jsx12("div", { className: "card-error", children: /* @__PURE__ */ jsx12("div", { className: "payment-error-container", children: /* @__PURE__ */ jsxs6("div", { className: "error-icon", children: [
|
|
@@ -2959,7 +2917,7 @@ var ErrorCardMessage = ({ onClose, error, autoTrigger = false }) => {
|
|
|
2959
2917
|
/* @__PURE__ */ jsx12("div", { className: "payment-error-text", children: error }),
|
|
2960
2918
|
/* @__PURE__ */ jsx12("div", { className: "thank-you-text", children: "Try again later " })
|
|
2961
2919
|
] }),
|
|
2962
|
-
|
|
2920
|
+
/* @__PURE__ */ jsx12("div", { className: "error-btn-div", children: /* @__PURE__ */ jsx12("button", { onClick: onClose, children: "OK" }) })
|
|
2963
2921
|
] }) }) })
|
|
2964
2922
|
] });
|
|
2965
2923
|
};
|
|
@@ -2976,28 +2934,14 @@ var socketClient_default = socket;
|
|
|
2976
2934
|
|
|
2977
2935
|
// src/app/components/Atoms/CardBankRadio/CardBankRadio.tsx
|
|
2978
2936
|
import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2979
|
-
var CardBankRadio = (
|
|
2980
|
-
|
|
2981
|
-
const savingsBadgeClass = `frac-saving-badge ${skydesign ? "frac-saving-badge-corner" : "frac-saving-badge-corner frac-saving-badge-with-radio"}`;
|
|
2982
|
-
return /* @__PURE__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsx13(
|
|
2937
|
+
var CardBankRadio = (props) => {
|
|
2938
|
+
return /* @__PURE__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsxs7(
|
|
2983
2939
|
"div",
|
|
2984
2940
|
{
|
|
2985
2941
|
className: `frac-card-bank-radio ${props.activetab === props.value ? "frac-active" : ""}`,
|
|
2986
2942
|
onClick: () => props.onChange(props.value),
|
|
2987
2943
|
role: "radio",
|
|
2988
|
-
children:
|
|
2989
|
-
/* @__PURE__ */ jsxs7("div", { className: "frac-card-title-main", children: [
|
|
2990
|
-
/* @__PURE__ */ jsxs7("div", { className: "box-inner-card-text", children: [
|
|
2991
|
-
/* @__PURE__ */ jsx13("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
|
|
2992
|
-
/* @__PURE__ */ jsx13("div", { className: "frac-card-label-text", children: props.label })
|
|
2993
|
-
] }),
|
|
2994
|
-
/* @__PURE__ */ jsx13("div", { className: "frac-card-label", children: /* @__PURE__ */ jsx13("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) }) })
|
|
2995
|
-
] }),
|
|
2996
|
-
savingsText ? /* @__PURE__ */ jsx13("button", { type: "button", className: savingsBadgeClass, children: savingsText }) : null,
|
|
2997
|
-
/* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("input", { name: "paymenttype", checked: props.activetab === props.value, type: "hidden", value: props.value, onChange: (e) => {
|
|
2998
|
-
props.onChange(e.target.value);
|
|
2999
|
-
} }) })
|
|
3000
|
-
] }) : /* @__PURE__ */ jsxs7(Fragment7, { children: [
|
|
2944
|
+
children: [
|
|
3001
2945
|
/* @__PURE__ */ jsxs7("div", { className: "frac-card-title-main", children: [
|
|
3002
2946
|
/* @__PURE__ */ jsx13("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
|
|
3003
2947
|
/* @__PURE__ */ jsxs7("div", { className: "frac-card-label", children: [
|
|
@@ -3005,11 +2949,10 @@ var CardBankRadio = (_a) => {
|
|
|
3005
2949
|
/* @__PURE__ */ jsx13("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) })
|
|
3006
2950
|
] })
|
|
3007
2951
|
] }),
|
|
3008
|
-
savingsText ? /* @__PURE__ */ jsx13("button", { type: "button", className: savingsBadgeClass, children: savingsText }) : null,
|
|
3009
2952
|
/* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("input", { name: "paymenttype", checked: props.activetab === props.value, type: "radio", value: props.value, onChange: (e) => {
|
|
3010
2953
|
props.onChange(e.target.value);
|
|
3011
2954
|
} }) })
|
|
3012
|
-
]
|
|
2955
|
+
]
|
|
3013
2956
|
}
|
|
3014
2957
|
) });
|
|
3015
2958
|
};
|
|
@@ -3034,7 +2977,6 @@ function CardBankRadioStyles({}) {
|
|
|
3034
2977
|
justify-content: space-between;
|
|
3035
2978
|
align-items: center;
|
|
3036
2979
|
align-self: stretch;
|
|
3037
|
-
position: relative;
|
|
3038
2980
|
}
|
|
3039
2981
|
|
|
3040
2982
|
input[type="radio"] {
|
|
@@ -3092,28 +3034,6 @@ function CardBankRadioStyles({}) {
|
|
|
3092
3034
|
.frac-card-bank-radio.frac-active {
|
|
3093
3035
|
background: #F6F6F7;
|
|
3094
3036
|
}
|
|
3095
|
-
|
|
3096
|
-
.frac-saving-badge {
|
|
3097
|
-
padding: 1px 7px !important;
|
|
3098
|
-
border: 1px solid #9ad7ab;
|
|
3099
|
-
border-radius: 999px;
|
|
3100
|
-
background: #e8f8ec;
|
|
3101
|
-
color: #1e6a34;
|
|
3102
|
-
font-size: 10px;
|
|
3103
|
-
font-weight: 600;
|
|
3104
|
-
line-height: 15px;
|
|
3105
|
-
pointer-events: none;
|
|
3106
|
-
}
|
|
3107
|
-
|
|
3108
|
-
.frac-saving-badge-corner {
|
|
3109
|
-
position: absolute;
|
|
3110
|
-
top: 8px;
|
|
3111
|
-
right: 10px;
|
|
3112
|
-
}
|
|
3113
|
-
|
|
3114
|
-
.frac-saving-badge-with-radio {
|
|
3115
|
-
right: 34px;
|
|
3116
|
-
}
|
|
3117
3037
|
` });
|
|
3118
3038
|
}
|
|
3119
3039
|
|
|
@@ -3291,7 +3211,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
|
|
|
3291
3211
|
{
|
|
3292
3212
|
id: "card_number",
|
|
3293
3213
|
className: "form-control card-number-new",
|
|
3294
|
-
style: { height: `${isSky ? "36px" : "46px"}
|
|
3214
|
+
style: { height: `${isSky ? "36px" : "46px"}`, display: "inline-block" }
|
|
3295
3215
|
}
|
|
3296
3216
|
),
|
|
3297
3217
|
/* @__PURE__ */ jsx17("div", { className: "card-crdi card-expiry-new", children: /* @__PURE__ */ jsxs10("div", { className: "exp-date-year-container", children: [
|
|
@@ -3300,7 +3220,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
|
|
|
3300
3220
|
{
|
|
3301
3221
|
id: "exp_month",
|
|
3302
3222
|
className: "form-control required card-cvv-in",
|
|
3303
|
-
style: { height: "36px", display: "block"
|
|
3223
|
+
style: { height: "36px", display: "inline-block" }
|
|
3304
3224
|
}
|
|
3305
3225
|
) }),
|
|
3306
3226
|
/* @__PURE__ */ jsx17("div", { className: "exp-year form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
|
|
@@ -3308,7 +3228,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
|
|
|
3308
3228
|
{
|
|
3309
3229
|
id: "exp_year",
|
|
3310
3230
|
className: "form-control required card-cvv-in",
|
|
3311
|
-
style: { height: "36px", display: "block"
|
|
3231
|
+
style: { height: "36px", display: "inline-block" }
|
|
3312
3232
|
}
|
|
3313
3233
|
) }),
|
|
3314
3234
|
/* @__PURE__ */ jsx17("div", { className: "security-digit form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
|
|
@@ -3316,7 +3236,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
|
|
|
3316
3236
|
{
|
|
3317
3237
|
id: "cvv",
|
|
3318
3238
|
className: "form-control card-cvv-in required",
|
|
3319
|
-
style: { height: "36px", display: "block"
|
|
3239
|
+
style: { height: "36px", display: "inline-block" }
|
|
3320
3240
|
}
|
|
3321
3241
|
) })
|
|
3322
3242
|
] }) })
|
|
@@ -3439,8 +3359,7 @@ var DataCapFields = ({
|
|
|
3439
3359
|
isOpen,
|
|
3440
3360
|
tokenKey,
|
|
3441
3361
|
setLoader,
|
|
3442
|
-
isAddCard
|
|
3443
|
-
isEmbedded
|
|
3362
|
+
isAddCard
|
|
3444
3363
|
}) => {
|
|
3445
3364
|
const iframeId = "datacap-iframe";
|
|
3446
3365
|
const resolverRef = useRef2(null);
|
|
@@ -3466,20 +3385,6 @@ var DataCapFields = ({
|
|
|
3466
3385
|
|
|
3467
3386
|
`;
|
|
3468
3387
|
}
|
|
3469
|
-
if (isEmbedded) {
|
|
3470
|
-
customCSS += `
|
|
3471
|
-
|
|
3472
|
-
input {
|
|
3473
|
-
background-color: #F6F6F7;
|
|
3474
|
-
box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1;
|
|
3475
|
-
}
|
|
3476
|
-
|
|
3477
|
-
select {
|
|
3478
|
-
background-color: #F6F6F7;
|
|
3479
|
-
box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
|
|
3480
|
-
}
|
|
3481
|
-
`;
|
|
3482
|
-
}
|
|
3483
3388
|
const initialize = async () => {
|
|
3484
3389
|
setLoader == null ? void 0 : setLoader(true);
|
|
3485
3390
|
setIframeReady(false);
|
|
@@ -3511,18 +3416,13 @@ var DataCapFields = ({
|
|
|
3511
3416
|
};
|
|
3512
3417
|
initialize();
|
|
3513
3418
|
}, [isOpen, tokenKey]);
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
return () => {
|
|
3522
|
-
delete window.requestDcToken;
|
|
3523
|
-
};
|
|
3524
|
-
}, []);
|
|
3525
|
-
console.log(setLoader, "loadingIframe");
|
|
3419
|
+
window.requestDcToken = () => {
|
|
3420
|
+
return new Promise((resolve, reject) => {
|
|
3421
|
+
setLoader == null ? void 0 : setLoader(true);
|
|
3422
|
+
resolverRef.current = { resolve, reject };
|
|
3423
|
+
window.DatacapHostedWebToken.requestToken();
|
|
3424
|
+
});
|
|
3425
|
+
};
|
|
3526
3426
|
return /* @__PURE__ */ jsx18(
|
|
3527
3427
|
"iframe",
|
|
3528
3428
|
{
|
|
@@ -3784,7 +3684,7 @@ function GetPaymentPage(props) {
|
|
|
3784
3684
|
}
|
|
3785
3685
|
}
|
|
3786
3686
|
if (!isBankConsentChecked) {
|
|
3787
|
-
setErrorBankConsent("Above consent is
|
|
3687
|
+
setErrorBankConsent("Above consent is required");
|
|
3788
3688
|
}
|
|
3789
3689
|
setAchError(errors);
|
|
3790
3690
|
return Object.keys(errors).length > 0 || !isBankConsentChecked;
|
|
@@ -7700,7 +7600,7 @@ function PartialPayment(props) {
|
|
|
7700
7600
|
}
|
|
7701
7601
|
}
|
|
7702
7602
|
if (!isBankConsentChecked) {
|
|
7703
|
-
setErrorBankConsent("Above consent is
|
|
7603
|
+
setErrorBankConsent("Above consent is required");
|
|
7704
7604
|
}
|
|
7705
7605
|
setAchError(errors);
|
|
7706
7606
|
return Object.keys(errors).length > 0 || !isBankConsentChecked;
|
|
@@ -8694,7 +8594,7 @@ function PartialPayment(props) {
|
|
|
8694
8594
|
}
|
|
8695
8595
|
|
|
8696
8596
|
// src/app/components/Skysystemz/PayButtonWithForm.tsx
|
|
8697
|
-
import { useEffect as
|
|
8597
|
+
import { useEffect as useEffect16, useState as useState11, useMemo } from "react";
|
|
8698
8598
|
|
|
8699
8599
|
// src/app/components/Skysystemz/SkyChargewidgetstyles.tsx
|
|
8700
8600
|
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
@@ -8930,17 +8830,6 @@ function SkyChargewidgetstyles() {
|
|
|
8930
8830
|
text-align : left !important;
|
|
8931
8831
|
text-transform: uppercase !important;
|
|
8932
8832
|
}
|
|
8933
|
-
.frac-form .frac-fee-text{
|
|
8934
|
-
display: block;
|
|
8935
|
-
padding: 10px 0 4px;
|
|
8936
|
-
font-family: 'IBM Plex Mono', monospace !important;
|
|
8937
|
-
color: #727272 !important;
|
|
8938
|
-
font-size: 12px;
|
|
8939
|
-
line-height: 1.4;
|
|
8940
|
-
}
|
|
8941
|
-
.frac-form .frac-fee-amount{
|
|
8942
|
-
color: #c62828 !important;
|
|
8943
|
-
}
|
|
8944
8833
|
.form-control-frac{
|
|
8945
8834
|
display: block;
|
|
8946
8835
|
width: 100%;
|
|
@@ -8975,7 +8864,7 @@ function SkyChargewidgetstyles() {
|
|
|
8975
8864
|
}
|
|
8976
8865
|
.exp-date-year-container .form-group {
|
|
8977
8866
|
flex: 1;
|
|
8978
|
-
padding-left:.75rem
|
|
8867
|
+
padding-left:.75rem;
|
|
8979
8868
|
}
|
|
8980
8869
|
.card-crdi {
|
|
8981
8870
|
display: flex;
|
|
@@ -8992,7 +8881,7 @@ function SkyChargewidgetstyles() {
|
|
|
8992
8881
|
}
|
|
8993
8882
|
.exp-date-year-container .form-group-frac{
|
|
8994
8883
|
flex:1;
|
|
8995
|
-
|
|
8884
|
+
padding: 0px !important
|
|
8996
8885
|
|
|
8997
8886
|
}
|
|
8998
8887
|
|
|
@@ -9493,54 +9382,13 @@ margin:0px !important;
|
|
|
9493
9382
|
padding:0px !important;
|
|
9494
9383
|
}
|
|
9495
9384
|
|
|
9496
|
-
|
|
9497
|
-
.toggle-num-wrapper-new div#card_number {
|
|
9498
|
-
display: block !important;
|
|
9499
|
-
}
|
|
9500
|
-
.toggle-num-wrapper-new .input-main-wrap-frac {
|
|
9501
|
-
height: 36px;
|
|
9502
|
-
}
|
|
9503
|
-
.toggle-num-wrapper-new:focus {
|
|
9504
|
-
border: 1px solid #004eab !important;
|
|
9505
|
-
}
|
|
9506
|
-
.frac-or {
|
|
9507
|
-
position: relative;
|
|
9508
|
-
margin: 15px 0;
|
|
9509
|
-
text-align: center;
|
|
9510
|
-
}
|
|
9511
|
-
.frac-or:before {
|
|
9512
|
-
position: absolute;
|
|
9513
|
-
left: 0;
|
|
9514
|
-
transform: translateY(-50%);
|
|
9515
|
-
top: 50%;
|
|
9516
|
-
height: 1px;
|
|
9517
|
-
width: 100%;
|
|
9518
|
-
background: #E0DFE2;
|
|
9519
|
-
content: '';
|
|
9520
|
-
z-index: 1;
|
|
9521
|
-
}
|
|
9522
|
-
.frac-or span {
|
|
9523
|
-
background: transparent;
|
|
9524
|
-
font-size: 13px;
|
|
9525
|
-
margin: 0 auto;
|
|
9526
|
-
width: 15px;
|
|
9527
|
-
font-weight: 500;
|
|
9528
|
-
text-transform: uppercase;
|
|
9529
|
-
color: #727272;
|
|
9530
|
-
padding: 3px;
|
|
9531
|
-
position: relative;
|
|
9532
|
-
z-index: 3;
|
|
9533
|
-
}
|
|
9534
|
-
button#gpay-button-online-api-id{
|
|
9535
|
-
width: 100%;
|
|
9536
|
-
}
|
|
9537
|
-
|
|
9385
|
+
|
|
9538
9386
|
|
|
9539
9387
|
` });
|
|
9540
9388
|
}
|
|
9541
9389
|
|
|
9542
9390
|
// src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
|
|
9543
|
-
import { useCallback, useEffect as
|
|
9391
|
+
import { useCallback, useEffect as useEffect15, useRef as useRef10, useState as useState10 } from "react";
|
|
9544
9392
|
import axios9 from "axios";
|
|
9545
9393
|
import Swal5 from "sweetalert2";
|
|
9546
9394
|
|
|
@@ -9681,597 +9529,109 @@ function CheckoutWrapper({ clientSecret, onSuccess, showLoader, setError, sessio
|
|
|
9681
9529
|
// src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
|
|
9682
9530
|
import { IoArrowBack as IoArrowBack4 } from "react-icons/io5";
|
|
9683
9531
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
9684
|
-
|
|
9685
|
-
|
|
9686
|
-
|
|
9687
|
-
|
|
9688
|
-
|
|
9689
|
-
|
|
9690
|
-
|
|
9691
|
-
|
|
9692
|
-
|
|
9693
|
-
|
|
9694
|
-
|
|
9695
|
-
|
|
9696
|
-
|
|
9697
|
-
|
|
9698
|
-
|
|
9699
|
-
|
|
9700
|
-
|
|
9701
|
-
|
|
9702
|
-
|
|
9703
|
-
|
|
9704
|
-
|
|
9705
|
-
|
|
9706
|
-
|
|
9707
|
-
|
|
9708
|
-
|
|
9709
|
-
|
|
9710
|
-
|
|
9711
|
-
|
|
9712
|
-
|
|
9713
|
-
|
|
9714
|
-
|
|
9715
|
-
|
|
9716
|
-
|
|
9717
|
-
|
|
9718
|
-
|
|
9719
|
-
|
|
9720
|
-
|
|
9721
|
-
|
|
9722
|
-
|
|
9723
|
-
|
|
9724
|
-
|
|
9725
|
-
|
|
9726
|
-
|
|
9727
|
-
|
|
9728
|
-
|
|
9729
|
-
|
|
9730
|
-
|
|
9731
|
-
|
|
9732
|
-
|
|
9733
|
-
|
|
9734
|
-
|
|
9735
|
-
|
|
9736
|
-
|
|
9737
|
-
|
|
9738
|
-
|
|
9739
|
-
|
|
9740
|
-
|
|
9741
|
-
|
|
9742
|
-
|
|
9743
|
-
|
|
9744
|
-
|
|
9745
|
-
letter-spacing: -0.02em;
|
|
9746
|
-
color: #161616;
|
|
9747
|
-
}
|
|
9748
|
-
|
|
9749
|
-
.card-error-overlay .thank-you-text-overlay {
|
|
9750
|
-
font-family: 'Inter', sans-serif;
|
|
9751
|
-
font-weight: 500;
|
|
9752
|
-
font-size: 16px;
|
|
9753
|
-
line-height: 18px;
|
|
9754
|
-
text-align: center;
|
|
9755
|
-
letter-spacing: -0.02em;
|
|
9756
|
-
color: #161616 !important;
|
|
9757
|
-
opacity: 0.5;
|
|
9758
|
-
padding-top:10px
|
|
9759
|
-
}
|
|
9760
|
-
|
|
9761
|
-
.card-error-overlay .error-btn-div-overlay{
|
|
9762
|
-
padding-top:20px;
|
|
9763
|
-
width: 100%;
|
|
9764
|
-
|
|
9765
|
-
}
|
|
9766
|
-
.card-error-overlay .error-btn-div-overlay button{
|
|
9767
|
-
outline: 0;
|
|
9768
|
-
height: 46px;
|
|
9769
|
-
font-size: 16px;
|
|
9770
|
-
background: #727272;
|
|
9771
|
-
border: none;
|
|
9772
|
-
display: block;
|
|
9773
|
-
color: #fff;
|
|
9774
|
-
width: 100%;
|
|
9775
|
-
border-radius: 180px;
|
|
9776
|
-
margin: 10px 0;
|
|
9777
|
-
text-decoration: none;
|
|
9778
|
-
}
|
|
9779
|
-
.card-error-overlay .error-btn-div-overlay button:hover, .card-error-overlay .error-btn-div-overlay button:focus {
|
|
9780
|
-
background: #222;
|
|
9781
|
-
color: #fff;
|
|
9782
|
-
cursor: pointer;
|
|
9783
|
-
}
|
|
9784
|
-
.payment-error-container-overlay {
|
|
9785
|
-
width: fit-content;
|
|
9786
|
-
position: relative;
|
|
9787
|
-
top: 50%;
|
|
9788
|
-
left: 50%;
|
|
9789
|
-
transform: translate(-50%, -50%);
|
|
9790
|
-
background: rgba(255, 255, 255, 0.15);
|
|
9791
|
-
backdrop-filter: blur(12px);
|
|
9792
|
-
-webkit-backdrop-filter: blur(12px);
|
|
9793
|
-
border-radius: 12px;
|
|
9794
|
-
z-index: 11111;
|
|
9795
|
-
max-width: 240px;
|
|
9796
|
-
min-width: 224px;
|
|
9797
|
-
padding: 20px;
|
|
9798
|
-
margin-left: 17px !important;
|
|
9799
|
-
}
|
|
9800
|
-
.card-error-overlay {
|
|
9801
|
-
position: absolute;
|
|
9802
|
-
top: 0;
|
|
9803
|
-
left: 0;
|
|
9804
|
-
width: 100%;
|
|
9805
|
-
height: 100%;
|
|
9806
|
-
background: rgb(87 87 87 / 15%);
|
|
9807
|
-
backdrop-filter: blur(2px);
|
|
9808
|
-
-webkit-backdrop-filter: blur(12px);
|
|
9809
|
-
z-index: 1111;
|
|
9810
|
-
}
|
|
9811
|
-
` });
|
|
9812
|
-
}
|
|
9813
|
-
|
|
9814
|
-
// src/app/components/ErrorCardMessage/ErrorCardOverlay.tsx
|
|
9815
|
-
import { Fragment as Fragment18, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
9816
|
-
var ErrorCardOverlay = ({ onClose, error, autoTrigger = false }) => {
|
|
9817
|
-
return /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
9818
|
-
/* @__PURE__ */ jsx33(ErrorCardOverlayStyle, {}),
|
|
9819
|
-
/* @__PURE__ */ jsx33("div", { className: "card-error-overlay", children: /* @__PURE__ */ jsx33("div", { className: "payment-error-container-overlay", children: /* @__PURE__ */ jsxs19("div", { className: "error-icon-overlay", children: [
|
|
9820
|
-
/* @__PURE__ */ jsx33("div", { className: "circle", children: /* @__PURE__ */ jsx33("i", { className: "fa fa-times", "aria-hidden": "true" }) }),
|
|
9821
|
-
/* @__PURE__ */ jsxs19("div", { className: "error-text-overlay", children: [
|
|
9822
|
-
/* @__PURE__ */ jsx33("div", { className: "payment-error-text-overlay", children: error }),
|
|
9823
|
-
/* @__PURE__ */ jsx33("div", { className: "thank-you-text-overlay", children: "Try again later " })
|
|
9824
|
-
] }),
|
|
9825
|
-
!autoTrigger && /* @__PURE__ */ jsx33("div", { className: "error-btn-div-overlay", children: /* @__PURE__ */ jsx33("button", { onClick: onClose, children: "OK" }) })
|
|
9826
|
-
] }) }) })
|
|
9827
|
-
] });
|
|
9828
|
-
};
|
|
9829
|
-
var ErrorCardOverlay_default = ErrorCardOverlay;
|
|
9830
|
-
|
|
9831
|
-
// src/app/components/Atoms/Googlepay/Googlepay.tsx
|
|
9832
|
-
import { useRef as useRef10 } from "react";
|
|
9833
|
-
|
|
9834
|
-
// src/app/components/Atoms/Googlepay/GooglePayScriptLoader.tsx
|
|
9835
|
-
import { useEffect as useEffect15 } from "react";
|
|
9836
|
-
var googlePayScriptLoaded = false;
|
|
9837
|
-
var GooglePayScriptLoader = ({
|
|
9838
|
-
onLoad
|
|
9839
|
-
}) => {
|
|
9840
|
-
useEffect15(() => {
|
|
9841
|
-
if (googlePayScriptLoaded) {
|
|
9842
|
-
onLoad == null ? void 0 : onLoad();
|
|
9843
|
-
return;
|
|
9844
|
-
}
|
|
9845
|
-
const existingScript = document.querySelector(
|
|
9846
|
-
`script[src="https://pay.google.com/gp/p/js/pay.js"]`
|
|
9847
|
-
);
|
|
9848
|
-
if (!existingScript) {
|
|
9849
|
-
const script2 = document.createElement("script");
|
|
9850
|
-
script2.src = "https://pay.google.com/gp/p/js/pay.js";
|
|
9851
|
-
script2.async = true;
|
|
9852
|
-
script2.onload = () => {
|
|
9853
|
-
console.log("\u2705 Google Pay script loaded");
|
|
9854
|
-
googlePayScriptLoaded = true;
|
|
9855
|
-
console.log("google:", window.google);
|
|
9856
|
-
onLoad == null ? void 0 : onLoad();
|
|
9857
|
-
};
|
|
9858
|
-
script2.onerror = (err) => {
|
|
9859
|
-
console.error("\u274C Google Pay script failed", err);
|
|
9860
|
-
};
|
|
9861
|
-
document.head.appendChild(script2);
|
|
9862
|
-
} else {
|
|
9863
|
-
googlePayScriptLoaded = true;
|
|
9864
|
-
onLoad == null ? void 0 : onLoad();
|
|
9865
|
-
}
|
|
9866
|
-
}, []);
|
|
9867
|
-
return null;
|
|
9868
|
-
};
|
|
9869
|
-
|
|
9870
|
-
// src/app/components/Atoms/Googlepay/Googlepay.tsx
|
|
9871
|
-
import { Fragment as Fragment19, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
9872
|
-
function GooglePayComponent({
|
|
9873
|
-
amount,
|
|
9874
|
-
googlePayEnvironment: googlePayEnvironment2,
|
|
9875
|
-
googlePayGatewayMerchantId: googlePayGatewayMerchantId2,
|
|
9876
|
-
googlePayMerchantId: googlePayMerchantId2,
|
|
9877
|
-
googlePayMerchantName,
|
|
9878
|
-
require3ds = false,
|
|
9879
|
-
completeFractalFlow,
|
|
9880
|
-
setLoading
|
|
9881
|
-
}) {
|
|
9882
|
-
const containerRef = useRef10(null);
|
|
9883
|
-
const paymentsClientRef = useRef10(null);
|
|
9884
|
-
const baseRequest = {
|
|
9885
|
-
apiVersion: 2,
|
|
9886
|
-
apiVersionMinor: 0
|
|
9532
|
+
import { Fragment as Fragment18, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
9533
|
+
var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_token, customerId, callback, merchantName = "merchant", isPreAuth, surcharge = "0", submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds = false, autoTrigger = false, show, setShow, setHandleCloseRef, isPartial, bankSurcharge, partialRef, loadingPrev = false, orderGuid: ordGuid, remainingAmount: remAmount }) => {
|
|
9534
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
|
|
9535
|
+
const hasRunRef = useRef10(false);
|
|
9536
|
+
const cardListRunRef = useRef10(false);
|
|
9537
|
+
const threeDSContainerRef = useRef10(null);
|
|
9538
|
+
const [activetab, setActive] = useState10("card");
|
|
9539
|
+
const [activeList, setActiveList] = useState10("card");
|
|
9540
|
+
const [cardData, setCardData] = useState10();
|
|
9541
|
+
const [cardError, setCardError] = useState10({});
|
|
9542
|
+
const [achData, setAchData] = useState10();
|
|
9543
|
+
const [achError, setAchError] = useState10({});
|
|
9544
|
+
const [saveACHinfo, setSaveACHinfo] = useState10(false);
|
|
9545
|
+
const [saveCardInfo, setSaveCardInfo] = useState10(false);
|
|
9546
|
+
const [error, setError] = useState10("");
|
|
9547
|
+
const [errorIframe, setErrorIframe] = useState10("");
|
|
9548
|
+
const [success, setSuccess] = useState10(false);
|
|
9549
|
+
let [tranId, setTranId] = useState10("");
|
|
9550
|
+
const [loading, setLoading] = useState10(false);
|
|
9551
|
+
const [loading2, setLoading2] = useState10(false);
|
|
9552
|
+
const [loadingIframe, setLoadingIframe] = useState10(false);
|
|
9553
|
+
const [cardList, setCardList] = useState10([]);
|
|
9554
|
+
const [bankList, setBankList] = useState10([]);
|
|
9555
|
+
const [selectedCard, setSelectedCard] = useState10();
|
|
9556
|
+
const [cashDiscount, setCashDiscount] = useState10(Number(amount));
|
|
9557
|
+
const [activeinCard, setActiveinCard] = useState10("form");
|
|
9558
|
+
const [activeinBank, setActiveinBank] = useState10("form");
|
|
9559
|
+
const [isBankActive, setIsBankActive] = useState10(false);
|
|
9560
|
+
const [processingFee, setProcessingFee] = useState10(0);
|
|
9561
|
+
const [clientSecret, setClientSecret] = useState10("");
|
|
9562
|
+
const [errorMessage, setErrorMessage] = useState10(null);
|
|
9563
|
+
const [initialLoader, setInitialLoader] = useState10(false);
|
|
9564
|
+
const [is3DSEnable, setIs3DSEnable] = useState10(false);
|
|
9565
|
+
const [stripeResponse, setStripeResponse] = useState10(null);
|
|
9566
|
+
const [orderLoader, setOrderLoader] = useState10(false);
|
|
9567
|
+
const [orderGuid, setOrderGuid] = useState10(ordGuid || null);
|
|
9568
|
+
const [partialAmount, setPartialAmount] = useState10("");
|
|
9569
|
+
const [partialError, setPartialError] = useState10("");
|
|
9570
|
+
const [remainingAmount, setRemainingAmount] = useState10("");
|
|
9571
|
+
const [paymentGateway, setPaymentGateway] = useState10();
|
|
9572
|
+
const [dcToken, setDCToken] = useState10();
|
|
9573
|
+
const [isBankConsentChecked, setIsBankConsentChecked] = useState10(false);
|
|
9574
|
+
const [errorBankConsent, setErrorBankConsent] = useState10("");
|
|
9575
|
+
let mastercard2 = S3Url + "widget/mc-img.svg";
|
|
9576
|
+
let visa2 = S3Url + "widget/visa-img.svg";
|
|
9577
|
+
let americanexp2 = S3Url + "widget/ae-img.svg";
|
|
9578
|
+
let discover2 = S3Url + "widget/discover-img.svg";
|
|
9579
|
+
let defaultcard2 = S3Url + "widget/card.svg";
|
|
9580
|
+
let trash2 = S3Url + "widget/Trash.svg";
|
|
9581
|
+
let bank2 = S3Url + "widget/bank.svg";
|
|
9582
|
+
let secure2 = S3Url + "widget/secure-img.png";
|
|
9583
|
+
let pov2 = S3Url + "widget/pov-by.png";
|
|
9584
|
+
let pax2 = S3Url + "widget/pax.svg";
|
|
9585
|
+
let cardicon = S3Url + "widget/cardicon.svg";
|
|
9586
|
+
let bankicon = S3Url + "widget/bankicon.svg";
|
|
9587
|
+
const showLoader = () => setLoading(true);
|
|
9588
|
+
const hideLoader = () => setLoading(false);
|
|
9589
|
+
const CalculateCashDiscount = (amount2, surcharge2) => {
|
|
9590
|
+
const surchargeVal = (parseFloat(surcharge2) || 0) / 100;
|
|
9591
|
+
const originalAmount = amount2 / (1 + surchargeVal);
|
|
9592
|
+
return Math.round(originalAmount * 100) / 100;
|
|
9887
9593
|
};
|
|
9888
|
-
const
|
|
9889
|
-
const
|
|
9890
|
-
|
|
9891
|
-
|
|
9892
|
-
|
|
9893
|
-
|
|
9894
|
-
|
|
9594
|
+
const tokenizerRef = useRef10(null);
|
|
9595
|
+
const fractalStyles = {
|
|
9596
|
+
input: {
|
|
9597
|
+
"font-family": "'Inter', sans-serif",
|
|
9598
|
+
"font-size": "16px",
|
|
9599
|
+
"color": "#212529",
|
|
9600
|
+
"background-color": "transparent",
|
|
9601
|
+
"padding": "0px",
|
|
9602
|
+
"appearance": "none",
|
|
9603
|
+
"outline": "none",
|
|
9604
|
+
"border": "none",
|
|
9605
|
+
"box-shadow": "none"
|
|
9606
|
+
},
|
|
9607
|
+
":focus": {
|
|
9608
|
+
"color": "#212529",
|
|
9609
|
+
"outline": "none",
|
|
9610
|
+
"border": "none"
|
|
9611
|
+
},
|
|
9612
|
+
"::placeholder": {
|
|
9613
|
+
"color": "#212529"
|
|
9895
9614
|
}
|
|
9896
9615
|
};
|
|
9897
|
-
const
|
|
9898
|
-
|
|
9899
|
-
type: "PAYMENT_GATEWAY",
|
|
9900
|
-
parameters: {
|
|
9901
|
-
gateway: googlePayGatewayMerchantId2,
|
|
9902
|
-
gatewayMerchantId: googlePayGatewayMerchantId2
|
|
9903
|
-
}
|
|
9904
|
-
}
|
|
9905
|
-
});
|
|
9906
|
-
const handlePaymentAuthorization = async (paymentData) => {
|
|
9907
|
-
var _a, _b;
|
|
9616
|
+
const handleCharge = async (data) => {
|
|
9617
|
+
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
|
|
9908
9618
|
try {
|
|
9909
|
-
|
|
9910
|
-
|
|
9911
|
-
|
|
9912
|
-
|
|
9913
|
-
|
|
9914
|
-
|
|
9915
|
-
|
|
9916
|
-
|
|
9917
|
-
|
|
9918
|
-
}
|
|
9919
|
-
|
|
9920
|
-
|
|
9921
|
-
|
|
9922
|
-
|
|
9923
|
-
|
|
9924
|
-
error: {
|
|
9925
|
-
intent: "PAYMENT_AUTHORIZATION",
|
|
9926
|
-
message: "Payment failed",
|
|
9927
|
-
reason: "PAYMENT_DATA_INVALID"
|
|
9928
|
-
}
|
|
9929
|
-
};
|
|
9930
|
-
}
|
|
9931
|
-
};
|
|
9932
|
-
const getPaymentsClient = () => {
|
|
9933
|
-
if (!paymentsClientRef.current && typeof window !== "undefined") {
|
|
9934
|
-
const google = window.google;
|
|
9935
|
-
if (!google) return null;
|
|
9936
|
-
paymentsClientRef.current = new google.payments.api.PaymentsClient({
|
|
9937
|
-
environment: googlePayEnvironment2,
|
|
9938
|
-
// ✅ ADD THIS
|
|
9939
|
-
paymentDataCallbacks: {
|
|
9940
|
-
onPaymentAuthorized: handlePaymentAuthorization
|
|
9619
|
+
let dataObj = __spreadValues({
|
|
9620
|
+
pass_fee_amount: Number(amount) - cashDiscount,
|
|
9621
|
+
pass_fee,
|
|
9622
|
+
Token: data == null ? void 0 : data.Token,
|
|
9623
|
+
amount: partialAmount ? partialAmount : amount,
|
|
9624
|
+
postal_code: data == null ? void 0 : data.postalCode,
|
|
9625
|
+
require3ds,
|
|
9626
|
+
isPartial,
|
|
9627
|
+
orderGuid: orderGuid || ordGuid
|
|
9628
|
+
}, saveCardInfo ? {
|
|
9629
|
+
card: {
|
|
9630
|
+
postal_code: cardData == null ? void 0 : cardData.zipCode,
|
|
9631
|
+
customer_id: customerId,
|
|
9632
|
+
gateway_token: (data == null ? void 0 : data.Token) || (data == null ? void 0 : data.gateway_token),
|
|
9633
|
+
name: cardData == null ? void 0 : cardData.cardName
|
|
9941
9634
|
}
|
|
9942
|
-
});
|
|
9943
|
-
}
|
|
9944
|
-
return paymentsClientRef.current;
|
|
9945
|
-
};
|
|
9946
|
-
const getIsReadyToPayRequest = () => __spreadProps(__spreadValues({}, baseRequest), {
|
|
9947
|
-
allowedPaymentMethods: [baseCardPaymentMethod]
|
|
9948
|
-
});
|
|
9949
|
-
const getTransactionInfo = () => ({
|
|
9950
|
-
countryCode: "US",
|
|
9951
|
-
currencyCode: "USD",
|
|
9952
|
-
totalPriceStatus: "FINAL",
|
|
9953
|
-
totalPrice: amount,
|
|
9954
|
-
checkoutOption: "COMPLETE_IMMEDIATE_PURCHASE"
|
|
9955
|
-
});
|
|
9956
|
-
const getPaymentDataRequest = () => __spreadProps(__spreadValues({}, baseRequest), {
|
|
9957
|
-
allowedPaymentMethods: [cardPaymentMethod],
|
|
9958
|
-
transactionInfo: getTransactionInfo(),
|
|
9959
|
-
merchantInfo: {
|
|
9960
|
-
merchantId: googlePayMerchantId2,
|
|
9961
|
-
merchantName: googlePayMerchantName
|
|
9962
|
-
},
|
|
9963
|
-
// ✅ ADD THIS
|
|
9964
|
-
callbackIntents: ["PAYMENT_AUTHORIZATION"]
|
|
9965
|
-
});
|
|
9966
|
-
const initializeGooglePay = async () => {
|
|
9967
|
-
try {
|
|
9968
|
-
const client = getPaymentsClient();
|
|
9969
|
-
if (!client) {
|
|
9970
|
-
console.error("Google Pay client not ready");
|
|
9971
|
-
return;
|
|
9972
|
-
}
|
|
9973
|
-
const response = await client.isReadyToPay(
|
|
9974
|
-
getIsReadyToPayRequest()
|
|
9975
|
-
);
|
|
9976
|
-
if (response.result && containerRef.current) {
|
|
9977
|
-
const button = client.createButton({
|
|
9978
|
-
onClick: onGooglePayClick,
|
|
9979
|
-
allowedPaymentMethods: [baseCardPaymentMethod],
|
|
9980
|
-
buttonType: "pay",
|
|
9981
|
-
buttonColor: "black",
|
|
9982
|
-
buttonRadius: 8
|
|
9983
|
-
});
|
|
9984
|
-
if (containerRef.current) {
|
|
9985
|
-
containerRef.current.innerHTML = "";
|
|
9986
|
-
}
|
|
9987
|
-
containerRef.current.appendChild(button);
|
|
9988
|
-
}
|
|
9989
|
-
} catch (err) {
|
|
9990
|
-
console.error("Google Pay init error:", err);
|
|
9991
|
-
}
|
|
9992
|
-
};
|
|
9993
|
-
const onGooglePayClick = async () => {
|
|
9994
|
-
const client = getPaymentsClient();
|
|
9995
|
-
if (!client) {
|
|
9996
|
-
console.error("Google Pay client not ready");
|
|
9997
|
-
return;
|
|
9998
|
-
}
|
|
9999
|
-
try {
|
|
10000
|
-
await client.loadPaymentData(getPaymentDataRequest());
|
|
10001
|
-
} catch (err) {
|
|
10002
|
-
if ((err == null ? void 0 : err.statusCode) !== "CANCELED") {
|
|
10003
|
-
console.error(err);
|
|
10004
|
-
}
|
|
10005
|
-
}
|
|
10006
|
-
};
|
|
10007
|
-
const onScriptLoad = () => {
|
|
10008
|
-
if (!googlePayEnvironment2 || !googlePayGatewayMerchantId2 || !amount || !googlePayMerchantId2) {
|
|
10009
|
-
console.error("Missing Google Pay config");
|
|
10010
|
-
return;
|
|
10011
|
-
}
|
|
10012
|
-
setTimeout(() => {
|
|
10013
|
-
initializeGooglePay();
|
|
10014
|
-
}, 0);
|
|
10015
|
-
};
|
|
10016
|
-
return /* @__PURE__ */ jsxs20(Fragment19, { children: [
|
|
10017
|
-
/* @__PURE__ */ jsx34("div", { ref: containerRef, className: "text-center" }),
|
|
10018
|
-
/* @__PURE__ */ jsx34(GooglePayScriptLoader, { onLoad: onScriptLoad })
|
|
10019
|
-
] });
|
|
10020
|
-
}
|
|
10021
|
-
|
|
10022
|
-
// src/app/components/Atoms/Applepay/ApplePayButton.tsx
|
|
10023
|
-
import { useEffect as useEffect17, useRef as useRef11 } from "react";
|
|
10024
|
-
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
10025
|
-
function ApplePayButton({
|
|
10026
|
-
applePayMerchantId: applePayMerchantId2,
|
|
10027
|
-
applePayAmount,
|
|
10028
|
-
applePayMerchantName,
|
|
10029
|
-
showLoader,
|
|
10030
|
-
completeFractalFlow
|
|
10031
|
-
}) {
|
|
10032
|
-
const applePayRef = useRef11(null);
|
|
10033
|
-
const paymentRequestMethods = [
|
|
10034
|
-
{
|
|
10035
|
-
supportedMethods: "https://apple.com/apple-pay",
|
|
10036
|
-
data: {
|
|
10037
|
-
version: 3,
|
|
10038
|
-
merchantIdentifier: applePayMerchantId2,
|
|
10039
|
-
// ✅ FIXED
|
|
10040
|
-
merchantCapabilities: ["supports3DS"],
|
|
10041
|
-
supportedNetworks: ["amex", "discover", "mastercard", "visa"],
|
|
10042
|
-
// ✅ FIXED
|
|
10043
|
-
countryCode: "US"
|
|
10044
|
-
}
|
|
10045
|
-
}
|
|
10046
|
-
];
|
|
10047
|
-
const paymentRequestOptions = {
|
|
10048
|
-
requestPayerName: false,
|
|
10049
|
-
requestPayerEmail: false,
|
|
10050
|
-
requestPayerPhone: false,
|
|
10051
|
-
requestShipping: false
|
|
10052
|
-
};
|
|
10053
|
-
function buildPaymentDetails() {
|
|
10054
|
-
return {
|
|
10055
|
-
total: {
|
|
10056
|
-
label: applePayMerchantName,
|
|
10057
|
-
amount: {
|
|
10058
|
-
currency: "USD",
|
|
10059
|
-
value: applePayAmount
|
|
10060
|
-
}
|
|
10061
|
-
}
|
|
10062
|
-
};
|
|
10063
|
-
}
|
|
10064
|
-
async function validateMerchant(event) {
|
|
10065
|
-
console.log("\u{1F7E1} STEP 1: Merchant validation started");
|
|
10066
|
-
try {
|
|
10067
|
-
console.log("Validation URL:", event.validationURL);
|
|
10068
|
-
console.log("Domain:", window.location.hostname);
|
|
10069
|
-
const res = await fetch(
|
|
10070
|
-
`${masterBaseUrl}api/v1/widget/generate-apple-pay-session`,
|
|
10071
|
-
{
|
|
10072
|
-
method: "POST",
|
|
10073
|
-
headers: {
|
|
10074
|
-
"Content-Type": "application/json"
|
|
10075
|
-
},
|
|
10076
|
-
body: JSON.stringify({
|
|
10077
|
-
validationUrl: event.validationURL,
|
|
10078
|
-
applePayMerchantId: applePayMerchantId2,
|
|
10079
|
-
applepayDisplayName: applePayMerchantName,
|
|
10080
|
-
requestDomain: window.location.hostname
|
|
10081
|
-
// ✅ IMPORTANT
|
|
10082
|
-
})
|
|
10083
|
-
}
|
|
10084
|
-
);
|
|
10085
|
-
console.log("\u{1F7E1} STEP 2: Response status:", res.status);
|
|
10086
|
-
const data = await res.json();
|
|
10087
|
-
console.log("\u{1F7E2} STEP 3: Session response:", data);
|
|
10088
|
-
if (!data) {
|
|
10089
|
-
console.log("\u274C Invalid session data");
|
|
10090
|
-
event.complete(null);
|
|
10091
|
-
return;
|
|
10092
|
-
}
|
|
10093
|
-
console.log("\u{1F7E2} STEP 4: Completing merchant validation");
|
|
10094
|
-
event.complete(data);
|
|
10095
|
-
} catch (err) {
|
|
10096
|
-
console.log("\u274C Merchant validation failed:", err == null ? void 0 : err.message);
|
|
10097
|
-
event.complete(null);
|
|
10098
|
-
}
|
|
10099
|
-
}
|
|
10100
|
-
async function authorizePayment(paymentResponse) {
|
|
10101
|
-
console.log("\u{1F7E1} STEP 5: Authorizing payment");
|
|
10102
|
-
try {
|
|
10103
|
-
const token = paymentResponse.details.token.paymentData;
|
|
10104
|
-
console.log("\u{1F7E2} STEP 6: Got token");
|
|
10105
|
-
await completeFractalFlow(token, null, "apple_pay");
|
|
10106
|
-
await paymentResponse.complete("success");
|
|
10107
|
-
console.log("\u2705 Payment completed successfully");
|
|
10108
|
-
} catch (err) {
|
|
10109
|
-
console.log("\u274C Authorization failed:", err == null ? void 0 : err.message);
|
|
10110
|
-
await paymentResponse.complete("fail");
|
|
10111
|
-
}
|
|
10112
|
-
}
|
|
10113
|
-
async function handleApplePayClick() {
|
|
10114
|
-
console.log("\u{1F7E1} STEP A: Click detected");
|
|
10115
|
-
try {
|
|
10116
|
-
const request = new PaymentRequest(
|
|
10117
|
-
paymentRequestMethods,
|
|
10118
|
-
buildPaymentDetails(),
|
|
10119
|
-
paymentRequestOptions
|
|
10120
|
-
);
|
|
10121
|
-
request.onmerchantvalidation = validateMerchant;
|
|
10122
|
-
console.log("\u{1F7E1} STEP B: Calling show()");
|
|
10123
|
-
const response = await request.show();
|
|
10124
|
-
console.log("\u{1F7E2} STEP C: Payment sheet opened");
|
|
10125
|
-
await authorizePayment(response);
|
|
10126
|
-
} catch (err) {
|
|
10127
|
-
console.log("\u274C Apple Pay flow failed:", err == null ? void 0 : err.message);
|
|
10128
|
-
}
|
|
10129
|
-
}
|
|
10130
|
-
useEffect17(() => {
|
|
10131
|
-
if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
|
|
10132
|
-
console.log("\u2705 Apple Pay is available");
|
|
10133
|
-
} else {
|
|
10134
|
-
console.log("\u274C Apple Pay NOT available");
|
|
10135
|
-
}
|
|
10136
|
-
}, []);
|
|
10137
|
-
useEffect17(() => {
|
|
10138
|
-
const btn = applePayRef.current;
|
|
10139
|
-
if (!btn) return;
|
|
10140
|
-
const handleClick = () => handleApplePayClick();
|
|
10141
|
-
btn.addEventListener("click", handleClick);
|
|
10142
|
-
return () => {
|
|
10143
|
-
btn.removeEventListener("click", handleClick);
|
|
10144
|
-
};
|
|
10145
|
-
}, []);
|
|
10146
|
-
return /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
|
|
10147
|
-
"apple-pay-button",
|
|
10148
|
-
{
|
|
10149
|
-
ref: applePayRef,
|
|
10150
|
-
buttonstyle: "black",
|
|
10151
|
-
type: "pay",
|
|
10152
|
-
locale: "en-US"
|
|
10153
|
-
}
|
|
10154
|
-
) });
|
|
10155
|
-
}
|
|
10156
|
-
|
|
10157
|
-
// src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
|
|
10158
|
-
import { Fragment as Fragment20, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
10159
|
-
var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_token, customerId, callback, merchantName = "merchant", isPreAuth, surcharge = "0", submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds = false, autoTrigger = false, show, setShow, setHandleCloseRef, isPartial, bankSurcharge, partialRef, loadingPrev = false, orderGuid: ordGuid, remainingAmount: remAmount, onSubmit, onLoad = true }) => {
|
|
10160
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
|
|
10161
|
-
const hasRunRef = useRef12(false);
|
|
10162
|
-
const cardFormRef = useRef12(null);
|
|
10163
|
-
const bankFormRef = useRef12(null);
|
|
10164
|
-
const expiryYearRef = useRef12(null);
|
|
10165
|
-
const expiryMonthRef = useRef12(null);
|
|
10166
|
-
const cardListRunRef = useRef12(false);
|
|
10167
|
-
const threeDSContainerRef = useRef12(null);
|
|
10168
|
-
const [activetab, setActive] = useState11("card");
|
|
10169
|
-
const [activeList, setActiveList] = useState11("card");
|
|
10170
|
-
const [cardData, setCardData] = useState11();
|
|
10171
|
-
const [cardError, setCardError] = useState11({});
|
|
10172
|
-
const [achData, setAchData] = useState11();
|
|
10173
|
-
const [achError, setAchError] = useState11({});
|
|
10174
|
-
const [saveACHinfo, setSaveACHinfo] = useState11(false);
|
|
10175
|
-
const [saveCardInfo, setSaveCardInfo] = useState11(false);
|
|
10176
|
-
const [error, setError] = useState11("");
|
|
10177
|
-
const [errorIframe, setErrorIframe] = useState11("");
|
|
10178
|
-
const [success, setSuccess] = useState11(false);
|
|
10179
|
-
let [tranId, setTranId] = useState11("");
|
|
10180
|
-
const [loading, setLoading] = useState11(false);
|
|
10181
|
-
const [loading2, setLoading2] = useState11(false);
|
|
10182
|
-
const [loadingIframe, setLoadingIframe] = useState11(false);
|
|
10183
|
-
const [cardList, setCardList] = useState11([]);
|
|
10184
|
-
const [bankList, setBankList] = useState11([]);
|
|
10185
|
-
const [selectedCard, setSelectedCard] = useState11();
|
|
10186
|
-
const [cashDiscount, setCashDiscount] = useState11(Number(amount));
|
|
10187
|
-
const [activeinCard, setActiveinCard] = useState11("form");
|
|
10188
|
-
const [activeinBank, setActiveinBank] = useState11("form");
|
|
10189
|
-
const [isBankActive, setIsBankActive] = useState11(false);
|
|
10190
|
-
const [processingFee, setProcessingFee] = useState11(0);
|
|
10191
|
-
const [clientSecret, setClientSecret] = useState11("");
|
|
10192
|
-
const [errorMessage, setErrorMessage] = useState11(null);
|
|
10193
|
-
const [initialLoader, setInitialLoader] = useState11(false);
|
|
10194
|
-
const [is3DSEnable, setIs3DSEnable] = useState11(false);
|
|
10195
|
-
const [stripeResponse, setStripeResponse] = useState11(null);
|
|
10196
|
-
const [orderLoader, setOrderLoader] = useState11(false);
|
|
10197
|
-
const [orderGuid, setOrderGuid] = useState11(ordGuid || null);
|
|
10198
|
-
const [partialAmount, setPartialAmount] = useState11("");
|
|
10199
|
-
const [partialError, setPartialError] = useState11("");
|
|
10200
|
-
const [remainingAmount, setRemainingAmount] = useState11("");
|
|
10201
|
-
const [paymentGateway, setPaymentGateway] = useState11();
|
|
10202
|
-
const [dcToken, setDCToken] = useState11();
|
|
10203
|
-
const [isBankConsentChecked, setIsBankConsentChecked] = useState11(false);
|
|
10204
|
-
const [errorBankConsent, setErrorBankConsent] = useState11("");
|
|
10205
|
-
let mastercard2 = S3Url + "widget/mc-img.svg";
|
|
10206
|
-
let visa2 = S3Url + "widget/visa-img.svg";
|
|
10207
|
-
let americanexp2 = S3Url + "widget/ae-img.svg";
|
|
10208
|
-
let discover2 = S3Url + "widget/discover-img.svg";
|
|
10209
|
-
let defaultcard2 = S3Url + "widget/card.svg";
|
|
10210
|
-
let trash2 = S3Url + "widget/Trash.svg";
|
|
10211
|
-
let bank2 = S3Url + "widget/bank.svg";
|
|
10212
|
-
let secure2 = S3Url + "widget/secure-img.png";
|
|
10213
|
-
let pov2 = S3Url + "widget/pov-by.png";
|
|
10214
|
-
let pax2 = S3Url + "widget/pax.svg";
|
|
10215
|
-
let cardicon = S3Url + "widget/cardicon.svg";
|
|
10216
|
-
let bankicon = S3Url + "widget/bankicon.svg";
|
|
10217
|
-
let defualtcardborder = S3Url + "widget/defualtcardborder.svg";
|
|
10218
|
-
let unionicon = S3Url + "widget/unionpay.svg";
|
|
10219
|
-
let dinersicon = S3Url + "widget/diners.svg";
|
|
10220
|
-
let jcbicon = S3Url + "widget/jcb.svg";
|
|
10221
|
-
const showLoader = () => setLoading(true);
|
|
10222
|
-
const hideLoader = () => setLoading(false);
|
|
10223
|
-
const CalculateCashDiscount = (amount2, surcharge2) => {
|
|
10224
|
-
const surchargeVal = (parseFloat(surcharge2) || 0) / 100;
|
|
10225
|
-
const originalAmount = amount2 / (1 + surchargeVal);
|
|
10226
|
-
return Math.round(originalAmount * 100) / 100;
|
|
10227
|
-
};
|
|
10228
|
-
const cardFeeAmount = Number(pass_fee_amount || 0);
|
|
10229
|
-
const bankFeeAmount = Number(bankSurcharge || 0);
|
|
10230
|
-
const bankSavingsAmount = Math.max(bankFeeAmount > 0 ? cardFeeAmount - bankFeeAmount : cardFeeAmount, 0);
|
|
10231
|
-
const bankSavingsText = bankSavingsAmount > 0 ? `Save ${formatUSD(bankSavingsAmount.toFixed(2))}` : "";
|
|
10232
|
-
const tokenizerRef = useRef12(null);
|
|
10233
|
-
const fractalStyles = {
|
|
10234
|
-
input: {
|
|
10235
|
-
"font-family": "'Inter', sans-serif",
|
|
10236
|
-
"font-size": "16px",
|
|
10237
|
-
"color": "#212529",
|
|
10238
|
-
"background-color": "transparent",
|
|
10239
|
-
"padding": "0px",
|
|
10240
|
-
"appearance": "none",
|
|
10241
|
-
"outline": "none",
|
|
10242
|
-
"border": "none",
|
|
10243
|
-
"box-shadow": "none"
|
|
10244
|
-
},
|
|
10245
|
-
":focus": {
|
|
10246
|
-
"color": "#212529",
|
|
10247
|
-
"outline": "none",
|
|
10248
|
-
"border": "none"
|
|
10249
|
-
},
|
|
10250
|
-
"::placeholder": {
|
|
10251
|
-
"color": "#212529"
|
|
10252
|
-
}
|
|
10253
|
-
};
|
|
10254
|
-
const handleCharge = async (data) => {
|
|
10255
|
-
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
|
|
10256
|
-
try {
|
|
10257
|
-
let dataObj = __spreadValues(__spreadValues({
|
|
10258
|
-
pass_fee_amount: Number(amount) - cashDiscount,
|
|
10259
|
-
pass_fee,
|
|
10260
|
-
Token: data == null ? void 0 : data.Token,
|
|
10261
|
-
amount: partialAmount ? partialAmount : amount,
|
|
10262
|
-
postal_code: data == null ? void 0 : data.postalCode,
|
|
10263
|
-
require3ds,
|
|
10264
|
-
isPartial,
|
|
10265
|
-
orderGuid: orderGuid || ordGuid
|
|
10266
|
-
}, saveCardInfo ? {
|
|
10267
|
-
card: {
|
|
10268
|
-
postal_code: cardData == null ? void 0 : cardData.zipCode,
|
|
10269
|
-
customer_id: customerId,
|
|
10270
|
-
gateway_token: (data == null ? void 0 : data.Token) || (data == null ? void 0 : data.gateway_token),
|
|
10271
|
-
name: cardData == null ? void 0 : cardData.cardName
|
|
10272
|
-
}
|
|
10273
|
-
} : null), (data == null ? void 0 : data.typeoftoken) ? {
|
|
10274
|
-
typeoftoken: data == null ? void 0 : data.typeoftoken
|
|
10275
9635
|
} : null);
|
|
10276
9636
|
if (require3ds && (data == null ? void 0 : data.stripe_3ds_auth_id)) {
|
|
10277
9637
|
dataObj.stripe_3ds_auth_id = data == null ? void 0 : data.stripe_3ds_auth_id;
|
|
@@ -10396,28 +9756,19 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10396
9756
|
}
|
|
10397
9757
|
}
|
|
10398
9758
|
if (!isBankConsentChecked) {
|
|
10399
|
-
setErrorBankConsent("Above consent is
|
|
9759
|
+
setErrorBankConsent("Above consent is required");
|
|
10400
9760
|
}
|
|
10401
9761
|
setAchError(errors);
|
|
10402
9762
|
return Object.keys(errors).length > 0 || !isBankConsentChecked;
|
|
10403
9763
|
};
|
|
10404
|
-
const completeFractalFlow = async (tokenizeData, intentid
|
|
9764
|
+
const completeFractalFlow = async (tokenizeData, intentid) => {
|
|
10405
9765
|
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
|
|
10406
9766
|
try {
|
|
10407
|
-
if (typeoftoken == "google_pay") {
|
|
10408
|
-
handleCharge({
|
|
10409
|
-
Token: tokenizeData,
|
|
10410
|
-
postalCode: cardData == null ? void 0 : cardData.zipCode,
|
|
10411
|
-
typeoftoken
|
|
10412
|
-
});
|
|
10413
|
-
return;
|
|
10414
|
-
}
|
|
10415
9767
|
let token = tokenizeData;
|
|
10416
9768
|
let verifyandsaveresp = await axios9.post(`${masterBaseUrl}api/v1/gateway/verify-and-save/${session_token}`, {
|
|
10417
9769
|
token,
|
|
10418
9770
|
require3ds,
|
|
10419
|
-
pass_fee
|
|
10420
|
-
typeoftoken
|
|
9771
|
+
pass_fee
|
|
10421
9772
|
});
|
|
10422
9773
|
if ((verifyandsaveresp == null ? void 0 : verifyandsaveresp.status) == 200) {
|
|
10423
9774
|
let responsetemp = (_a2 = verifyandsaveresp == null ? void 0 : verifyandsaveresp.data) == null ? void 0 : _a2.data;
|
|
@@ -10449,7 +9800,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10449
9800
|
}
|
|
10450
9801
|
};
|
|
10451
9802
|
const handleFractalTokenFlow = async () => {
|
|
10452
|
-
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2,
|
|
9803
|
+
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t, _u, _v, _w;
|
|
10453
9804
|
try {
|
|
10454
9805
|
const requestOptions = {
|
|
10455
9806
|
method: "POST",
|
|
@@ -10490,29 +9841,17 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10490
9841
|
three_ds_data
|
|
10491
9842
|
);
|
|
10492
9843
|
} catch (error2) {
|
|
10493
|
-
|
|
10494
|
-
let readableMessage = "Something went wrong!";
|
|
10495
|
-
try {
|
|
10496
|
-
const rawError = ((_n2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _n2.data) || (error2 == null ? void 0 : error2.message) || "";
|
|
10497
|
-
const errorText = typeof rawError === "string" ? rawError : JSON.stringify(rawError);
|
|
10498
|
-
const lines = ((_p2 = (_o2 = errorText.split) == null ? void 0 : _o2.call(errorText, "\n")) == null ? void 0 : _p2.filter(Boolean)) || [];
|
|
10499
|
-
const lastLine = lines.at(-1) || "";
|
|
10500
|
-
const parts = (_q2 = lastLine.split) == null ? void 0 : _q2.call(lastLine, ": ");
|
|
10501
|
-
readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
|
|
10502
|
-
} catch (e) {
|
|
10503
|
-
readableMessage = "Something went wrong!";
|
|
10504
|
-
}
|
|
10505
|
-
setErrorIframe(readableMessage);
|
|
9844
|
+
setErrorIframe(error2);
|
|
10506
9845
|
hideLoader();
|
|
10507
9846
|
}
|
|
10508
9847
|
if (tokenizeData == null ? void 0 : tokenizeData.token) {
|
|
10509
9848
|
let ThreedsData = tokenizeData == null ? void 0 : tokenizeData.stripe_three_ds_response;
|
|
10510
|
-
if (require3ds && !ThreedsData && (ThreedsData == null ? void 0 : ThreedsData.status) === "200 OK" && ((
|
|
9849
|
+
if (require3ds && !ThreedsData && (ThreedsData == null ? void 0 : ThreedsData.status) === "200 OK" && ((_n2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _n2.challenge_url)) {
|
|
10511
9850
|
setError("Something went wrong. Please try again later.");
|
|
10512
9851
|
}
|
|
10513
9852
|
if (require3ds) {
|
|
10514
|
-
if (!((
|
|
10515
|
-
completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, (
|
|
9853
|
+
if (!((_o2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _o2.challenge_url)) {
|
|
9854
|
+
completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, (_p2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _p2.id);
|
|
10516
9855
|
} else {
|
|
10517
9856
|
hideLoader();
|
|
10518
9857
|
setStripeResponse(__spreadProps(__spreadValues({}, ThreedsData == null ? void 0 : ThreedsData.data), {
|
|
@@ -10528,11 +9867,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10528
9867
|
console.log(error2, "error");
|
|
10529
9868
|
let readableMessage = "Something went wrong!";
|
|
10530
9869
|
try {
|
|
10531
|
-
const rawError = ((
|
|
9870
|
+
const rawError = ((_q2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _q2.data) || (error2 == null ? void 0 : error2.message) || "";
|
|
10532
9871
|
const errorText = typeof rawError === "string" ? rawError : JSON.stringify(rawError);
|
|
10533
|
-
const lines = ((
|
|
9872
|
+
const lines = ((_s2 = (_r2 = errorText.split) == null ? void 0 : _r2.call(errorText, "\n")) == null ? void 0 : _s2.filter(Boolean)) || [];
|
|
10534
9873
|
const lastLine = lines.at(-1) || "";
|
|
10535
|
-
const parts = (
|
|
9874
|
+
const parts = (_t = lastLine.split) == null ? void 0 : _t.call(lastLine, ": ");
|
|
10536
9875
|
readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
|
|
10537
9876
|
} catch (e) {
|
|
10538
9877
|
readableMessage = "Something went wrong!";
|
|
@@ -10540,8 +9879,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10540
9879
|
setError(readableMessage);
|
|
10541
9880
|
callback({
|
|
10542
9881
|
error: readableMessage,
|
|
10543
|
-
result: (
|
|
10544
|
-
statusCode: (
|
|
9882
|
+
result: (_v = (_u = error2 == null ? void 0 : error2.response) == null ? void 0 : _u.data) == null ? void 0 : _v.result,
|
|
9883
|
+
statusCode: (_w = error2 == null ? void 0 : error2.response) == null ? void 0 : _w.status
|
|
10545
9884
|
});
|
|
10546
9885
|
}
|
|
10547
9886
|
};
|
|
@@ -10958,8 +10297,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10958
10297
|
});
|
|
10959
10298
|
};
|
|
10960
10299
|
const handlechargeCustomer = async (e) => {
|
|
10961
|
-
var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
|
|
10962
|
-
e
|
|
10300
|
+
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
|
|
10301
|
+
e.currentTarget.blur();
|
|
10963
10302
|
if (loading) return;
|
|
10964
10303
|
let customer_id = customerId;
|
|
10965
10304
|
let card_id = selectedCard == null ? void 0 : selectedCard.id;
|
|
@@ -11006,6 +10345,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
11006
10345
|
statusCode: (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.status
|
|
11007
10346
|
});
|
|
11008
10347
|
hideLoader();
|
|
10348
|
+
setError(((_i2 = (_h2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _h2.data) == null ? void 0 : _i2.message) || "Something went wrong!");
|
|
11009
10349
|
}
|
|
11010
10350
|
} else {
|
|
11011
10351
|
setError("Please Select A Card/Bank");
|
|
@@ -11081,21 +10421,21 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
11081
10421
|
setOrderLoader(false);
|
|
11082
10422
|
}
|
|
11083
10423
|
};
|
|
11084
|
-
|
|
10424
|
+
useEffect15(() => {
|
|
11085
10425
|
if (!show && !autoTrigger) {
|
|
11086
10426
|
hasRunRef.current = false;
|
|
11087
10427
|
cardListRunRef.current = false;
|
|
11088
10428
|
}
|
|
11089
10429
|
}, [show, autoTrigger]);
|
|
11090
|
-
|
|
11091
|
-
if (!hasRunRef.current && (show || autoTrigger)
|
|
10430
|
+
useEffect15(() => {
|
|
10431
|
+
if (!hasRunRef.current && (show || autoTrigger)) {
|
|
11092
10432
|
getPaymentDetails();
|
|
11093
10433
|
if (isPartial && !partialRef) {
|
|
11094
10434
|
crateOrderFrac();
|
|
11095
10435
|
}
|
|
11096
10436
|
}
|
|
11097
|
-
}, [show, autoTrigger, isPartial
|
|
11098
|
-
|
|
10437
|
+
}, [show, autoTrigger, isPartial]);
|
|
10438
|
+
useEffect15(() => {
|
|
11099
10439
|
if ((show || autoTrigger) && pass_fee_amount) {
|
|
11100
10440
|
let cashdisc = Number(amount) - Number(pass_fee_amount);
|
|
11101
10441
|
if (cashdisc && !isNaN(cashdisc)) {
|
|
@@ -11157,7 +10497,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
11157
10497
|
console.error("3DS Auth failed \u274C", status);
|
|
11158
10498
|
setError(`3DS Authentication ${status}`);
|
|
11159
10499
|
};
|
|
11160
|
-
|
|
10500
|
+
useEffect15(() => {
|
|
11161
10501
|
if (setHandleCloseRef) {
|
|
11162
10502
|
setHandleCloseRef(() => handleClose);
|
|
11163
10503
|
}
|
|
@@ -11175,95 +10515,24 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
11175
10515
|
setPartialError("");
|
|
11176
10516
|
}
|
|
11177
10517
|
};
|
|
11178
|
-
|
|
10518
|
+
useEffect15(() => {
|
|
11179
10519
|
if (typeof FractalTokenizer === "undefined") return;
|
|
11180
10520
|
const tokenizer = new FractalTokenizer({
|
|
11181
10521
|
styles: {}
|
|
11182
10522
|
});
|
|
11183
10523
|
}, []);
|
|
11184
|
-
|
|
11185
|
-
|
|
11186
|
-
|
|
11187
|
-
|
|
11188
|
-
|
|
11189
|
-
useEffect18(() => {
|
|
11190
|
-
stateRef.current = {
|
|
11191
|
-
activeinBank,
|
|
11192
|
-
activeinCard,
|
|
11193
|
-
activetab
|
|
11194
|
-
};
|
|
11195
|
-
}, [activeinBank, activeinCard, activetab]);
|
|
11196
|
-
const submit = useCallback(() => {
|
|
11197
|
-
var _a2, _b2;
|
|
11198
|
-
const { activeinBank: activeinBank2, activeinCard: activeinCard2, activetab: activetab2 } = stateRef.current;
|
|
11199
|
-
if (activetab2 === "card") {
|
|
11200
|
-
if (activeinCard2 === "form") {
|
|
11201
|
-
(_a2 = cardFormRef.current) == null ? void 0 : _a2.requestSubmit();
|
|
11202
|
-
} else if (activeinCard2 === "list") {
|
|
11203
|
-
handlechargeCustomer();
|
|
11204
|
-
}
|
|
11205
|
-
} else if (activetab2 === "ach") {
|
|
11206
|
-
if (activeinBank2 === "form") {
|
|
11207
|
-
(_b2 = bankFormRef.current) == null ? void 0 : _b2.requestSubmit();
|
|
11208
|
-
} else if (activeinBank2 === "list") {
|
|
11209
|
-
handlechargeCustomer();
|
|
11210
|
-
}
|
|
11211
|
-
}
|
|
11212
|
-
}, []);
|
|
11213
|
-
useEffect18(() => {
|
|
11214
|
-
onSubmit == null ? void 0 : onSubmit(submit);
|
|
11215
|
-
}, [onSubmit, submit]);
|
|
11216
|
-
function detectCardType(cardinput) {
|
|
11217
|
-
if (!cardinput) return null;
|
|
11218
|
-
const number = cardinput.replace(/\D/g, "");
|
|
11219
|
-
const patterns = {
|
|
11220
|
-
visa: /^4/,
|
|
11221
|
-
mastercard: /^(5[1-5]|2[2-7][0-9]{2})/,
|
|
11222
|
-
amex: /^3[47]/,
|
|
11223
|
-
discover: /^(6011|65|64[4-9])/,
|
|
11224
|
-
diners: /^(30[0-5]|36|38)/,
|
|
11225
|
-
jcb: /^(35[2-8][0-9])/,
|
|
11226
|
-
unionpay: /^62/
|
|
11227
|
-
};
|
|
11228
|
-
for (const [type, regex] of Object.entries(patterns)) {
|
|
11229
|
-
if (regex.test(number)) {
|
|
11230
|
-
return type;
|
|
11231
|
-
}
|
|
11232
|
-
}
|
|
11233
|
-
return "unknown";
|
|
11234
|
-
}
|
|
11235
|
-
function getCardImage(cardInput) {
|
|
11236
|
-
const cardType = detectCardType(cardInput);
|
|
11237
|
-
switch (cardType) {
|
|
11238
|
-
case "visa":
|
|
11239
|
-
return /* @__PURE__ */ jsx36("img", { src: visa2, alt: "visa", width: 33 });
|
|
11240
|
-
case "mastercard":
|
|
11241
|
-
return /* @__PURE__ */ jsx36("img", { src: mastercard2, width: 33, alt: "mastercard" });
|
|
11242
|
-
case "amex":
|
|
11243
|
-
return /* @__PURE__ */ jsx36("img", { src: americanexp2, alt: "amex", width: 33 });
|
|
11244
|
-
case "discover":
|
|
11245
|
-
return /* @__PURE__ */ jsx36("img", { src: discover2, width: 33, alt: "discover" });
|
|
11246
|
-
case "diners":
|
|
11247
|
-
return /* @__PURE__ */ jsx36("img", { src: dinersicon, alt: "Diners Club" });
|
|
11248
|
-
case "jcb":
|
|
11249
|
-
return /* @__PURE__ */ jsx36("img", { src: jcbicon, alt: "JCB" });
|
|
11250
|
-
case "unionpay":
|
|
11251
|
-
return /* @__PURE__ */ jsx36("img", { src: unionicon, alt: "UnionPay" });
|
|
11252
|
-
default:
|
|
11253
|
-
return /* @__PURE__ */ jsx36("img", { src: defualtcardborder, alt: "card" });
|
|
11254
|
-
}
|
|
11255
|
-
}
|
|
11256
|
-
return /* @__PURE__ */ jsxs21(Fragment20, { children: [
|
|
11257
|
-
(initialLoader || !onLoad) && /* @__PURE__ */ jsx36(Loader_default, { intensity: "dark", loading: initialLoader || !onLoad }),
|
|
11258
|
-
error && /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(ErrorCardOverlay_default, { error, onClose: handleClose, autoTrigger }) }),
|
|
11259
|
-
errorIframe && /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(ErrorCardOverlay_default, { error: errorIframe, onClose: () => {
|
|
10524
|
+
console.log(activeinCard === "list", "activeinCard", activeList);
|
|
10525
|
+
return /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10526
|
+
initialLoader && /* @__PURE__ */ jsx32(Loader_default, { loading: initialLoader }),
|
|
10527
|
+
error && /* @__PURE__ */ jsx32("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx32(ErrorCardMessage_default, { error, onClose: handleClose }) }),
|
|
10528
|
+
errorIframe && /* @__PURE__ */ jsx32("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx32(ErrorCardMessage_default, { error: errorIframe, onClose: () => {
|
|
11260
10529
|
setErrorIframe("");
|
|
11261
|
-
}
|
|
11262
|
-
/* @__PURE__ */
|
|
11263
|
-
(loading || loading2 || loadingIframe) && /* @__PURE__ */
|
|
11264
|
-
/* @__PURE__ */
|
|
11265
|
-
/* @__PURE__ */
|
|
11266
|
-
(stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */
|
|
10530
|
+
} }) }),
|
|
10531
|
+
!error && !errorIframe && /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10532
|
+
(loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx32(Loader_default, { loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
|
|
10533
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-card-payment-page frac-form frac-new-form", children: [
|
|
10534
|
+
/* @__PURE__ */ jsx32("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
|
|
10535
|
+
(stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx32(
|
|
11267
10536
|
ThreeDSChallenge,
|
|
11268
10537
|
{
|
|
11269
10538
|
containerRef: threeDSContainerRef,
|
|
@@ -11273,33 +10542,40 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
11273
10542
|
onSuccess: handleSuccess,
|
|
11274
10543
|
onError: handleError
|
|
11275
10544
|
}
|
|
11276
|
-
) : /* @__PURE__ */
|
|
11277
|
-
/* @__PURE__ */
|
|
11278
|
-
/* @__PURE__ */
|
|
11279
|
-
/* @__PURE__ */
|
|
10545
|
+
) : /* @__PURE__ */ jsxs19("div", { className: "parent-pay-container", children: [
|
|
10546
|
+
/* @__PURE__ */ jsx32("span", { style: { display: autoTrigger ? "none" : "block" }, className: "request-payment-close-popup", onClick: handleClose, children: /* @__PURE__ */ jsxs19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
|
|
10547
|
+
/* @__PURE__ */ jsx32("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx32("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" }) }),
|
|
10548
|
+
/* @__PURE__ */ jsx32("defs", { children: /* @__PURE__ */ jsx32("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx32("rect", { width: "16", height: "16", fill: "white" }) }) })
|
|
11280
10549
|
] }) }),
|
|
11281
|
-
/* @__PURE__ */
|
|
11282
|
-
/* @__PURE__ */
|
|
11283
|
-
|
|
11284
|
-
/* @__PURE__ */
|
|
11285
|
-
/* @__PURE__ */
|
|
11286
|
-
/* @__PURE__ */
|
|
11287
|
-
/* @__PURE__ */
|
|
11288
|
-
(cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */
|
|
10550
|
+
/* @__PURE__ */ jsx32("div", { className: "pay-main-logo-res" }),
|
|
10551
|
+
/* @__PURE__ */ jsxs19("div", { className: "pay-container", children: [
|
|
10552
|
+
/* @__PURE__ */ jsxs19("div", { className: "pay-header pay-conatiner-one", children: [
|
|
10553
|
+
/* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-first", children: [
|
|
10554
|
+
/* @__PURE__ */ jsxs19("div", { className: "pay-logo-container", children: [
|
|
10555
|
+
/* @__PURE__ */ jsx32("div", { className: "pay-main-logo" }),
|
|
10556
|
+
/* @__PURE__ */ jsx32("h1", { className: "pay-heading", children: "Pay" }),
|
|
10557
|
+
(cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs19("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
|
|
11289
10558
|
" ",
|
|
11290
|
-
/* @__PURE__ */
|
|
10559
|
+
/* @__PURE__ */ jsx32(IoArrowBack4, {}),
|
|
11291
10560
|
" Back"
|
|
11292
10561
|
] })
|
|
11293
10562
|
] }),
|
|
11294
|
-
/* @__PURE__ */
|
|
11295
|
-
/* @__PURE__ */
|
|
11296
|
-
/* @__PURE__ */
|
|
11297
|
-
/* @__PURE__ */
|
|
11298
|
-
!isPreAuth && isBankActive && !isPartial && /* @__PURE__ */
|
|
10563
|
+
/* @__PURE__ */ jsx32("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs19("div", { className: "pay-amount-conatiner", children: [
|
|
10564
|
+
/* @__PURE__ */ jsx32("small", { className: "pay-payment-amount", children: "Select payment type" }),
|
|
10565
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-card-bank-radio-main", children: [
|
|
10566
|
+
/* @__PURE__ */ jsx32(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
|
|
10567
|
+
!isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx32(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab })
|
|
11299
10568
|
] }),
|
|
11300
|
-
|
|
11301
|
-
/* @__PURE__ */
|
|
11302
|
-
|
|
10569
|
+
pass_fee && activetab === "card" && cashDiscount && Number(amount) - Number(cashDiscount) > 0 ? /* @__PURE__ */ jsxs19("div", { className: "frac-cash-discount-fee", children: [
|
|
10570
|
+
/* @__PURE__ */ jsxs19("small", { children: [
|
|
10571
|
+
activetab === "card" ? "Cash Discount" : "Cash Discount Savings",
|
|
10572
|
+
" "
|
|
10573
|
+
] }),
|
|
10574
|
+
/* @__PURE__ */ jsx32("p", { children: formatUSD((Number(amount) - Number(cashDiscount)).toFixed(2)) })
|
|
10575
|
+
] }) : null,
|
|
10576
|
+
isPartial && /* @__PURE__ */ jsxs19("div", { className: "frac-partial-payment-input", children: [
|
|
10577
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
|
|
10578
|
+
/* @__PURE__ */ jsx32(
|
|
11303
10579
|
NumericFormat2,
|
|
11304
10580
|
{
|
|
11305
10581
|
prefix: "$",
|
|
@@ -11323,403 +10599,331 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
11323
10599
|
}
|
|
11324
10600
|
}
|
|
11325
10601
|
),
|
|
11326
|
-
partialError && /* @__PURE__ */
|
|
10602
|
+
partialError && /* @__PURE__ */ jsx32("span", { className: "error-span", children: partialError })
|
|
11327
10603
|
] })
|
|
11328
10604
|
] }) })
|
|
11329
10605
|
] }),
|
|
11330
|
-
/* @__PURE__ */
|
|
11331
|
-
/* @__PURE__ */
|
|
11332
|
-
/* @__PURE__ */
|
|
10606
|
+
/* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-last", children: [
|
|
10607
|
+
/* @__PURE__ */ jsx32("img", { src: secure2, alt: "" }),
|
|
10608
|
+
/* @__PURE__ */ jsx32("img", { src: pov2, alt: "" }),
|
|
11333
10609
|
"Secure payments powered by Fractal"
|
|
11334
10610
|
] })
|
|
11335
10611
|
] }),
|
|
11336
|
-
/* @__PURE__ */
|
|
11337
|
-
|
|
11338
|
-
/* @__PURE__ */
|
|
11339
|
-
/* @__PURE__ */
|
|
11340
|
-
|
|
10612
|
+
/* @__PURE__ */ jsx32("div", { className: "pay-tab pay-conatiner-two", children: /* @__PURE__ */ jsx32("div", { className: "col-md-12", children: /* @__PURE__ */ jsx32("div", { id: "payment-form-div", children: is3DSEnable ? clientSecret && /* @__PURE__ */ jsx32(CheckoutWrapper, { onSuccess, clientSecret, amount, showLoader, hideLoader, callback, session_token, handleClose, setError, isPreAuth }) : /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10613
|
+
/* @__PURE__ */ jsxs19("div", { id: "ach", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
|
|
10614
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
|
|
10615
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-backarrow", children: (cardList == null ? void 0 : cardList.length) > 0 && activeinCard === "form" && /* @__PURE__ */ jsxs19("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinCard("list"), children: [
|
|
10616
|
+
" ",
|
|
10617
|
+
/* @__PURE__ */ jsx32(IoArrowBack4, {})
|
|
10618
|
+
] }) }),
|
|
10619
|
+
/* @__PURE__ */ jsx32("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
|
|
11341
10620
|
] }),
|
|
11342
|
-
|
|
11343
|
-
/* @__PURE__ */
|
|
11344
|
-
/* @__PURE__ */
|
|
11345
|
-
|
|
11346
|
-
|
|
11347
|
-
|
|
11348
|
-
|
|
11349
|
-
|
|
11350
|
-
|
|
11351
|
-
|
|
11352
|
-
|
|
11353
|
-
|
|
11354
|
-
|
|
11355
|
-
|
|
11356
|
-
|
|
11357
|
-
|
|
11358
|
-
|
|
11359
|
-
|
|
11360
|
-
|
|
11361
|
-
|
|
11362
|
-
|
|
11363
|
-
|
|
11364
|
-
|
|
11365
|
-
|
|
11366
|
-
|
|
11367
|
-
|
|
11368
|
-
|
|
11369
|
-
" ",
|
|
11370
|
-
/* @__PURE__ */ jsx36(IoArrowBack4, {})
|
|
11371
|
-
] }) }),
|
|
11372
|
-
/* @__PURE__ */ jsx36("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
|
|
10621
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
|
|
10622
|
+
/* @__PURE__ */ jsx32("img", { src: visa2, alt: "", width: 33 }),
|
|
10623
|
+
/* @__PURE__ */ jsx32("img", { src: mastercard2, width: 33, alt: "" }),
|
|
10624
|
+
/* @__PURE__ */ jsx32("img", { src: americanexp2, alt: "", width: 33 }),
|
|
10625
|
+
/* @__PURE__ */ jsx32("img", { src: discover2, width: 33, alt: "" })
|
|
10626
|
+
] }),
|
|
10627
|
+
activeinCard === "list" && (cardList == null ? void 0 : cardList.length) > 0 ? /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10628
|
+
/* @__PURE__ */ jsx32(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
|
|
10629
|
+
setActiveinCard("form");
|
|
10630
|
+
} }),
|
|
10631
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { padding: "0" }, children: /* @__PURE__ */ jsx32("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: partialAmount ? formatUSD((_c = Number(partialAmount)) == null ? void 0 : _c.toFixed(2)) : formatUSD((_d = Number(amount)) == null ? void 0 : _d.toFixed(2)) }) })
|
|
10632
|
+
] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs19("form", { id: "paymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
|
|
10633
|
+
if (e.key === "Enter" && loading) {
|
|
10634
|
+
e.preventDefault();
|
|
10635
|
+
e.stopPropagation();
|
|
10636
|
+
}
|
|
10637
|
+
}, children: [
|
|
10638
|
+
/* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
|
|
10639
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10640
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
|
|
10641
|
+
/* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
|
|
10642
|
+
const value = e.target.value;
|
|
10643
|
+
if (/^[a-zA-Z\s]*$/.test(value)) {
|
|
10644
|
+
handleCardChange("cardName", value);
|
|
10645
|
+
}
|
|
10646
|
+
} }),
|
|
10647
|
+
(cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
|
|
11373
10648
|
] }),
|
|
11374
|
-
/* @__PURE__ */
|
|
11375
|
-
/* @__PURE__ */
|
|
11376
|
-
/* @__PURE__ */
|
|
11377
|
-
|
|
11378
|
-
|
|
11379
|
-
|
|
10649
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10650
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
|
|
10651
|
+
/* @__PURE__ */ jsx32("div", { className: "toggle-num-wrapper", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx32(
|
|
10652
|
+
FractalFields_default,
|
|
10653
|
+
{
|
|
10654
|
+
fractalStyles,
|
|
10655
|
+
tokenizerRef,
|
|
10656
|
+
isSky: true
|
|
10657
|
+
}
|
|
10658
|
+
) })
|
|
10659
|
+
] }),
|
|
10660
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10661
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "zip", children: "ZIP" }),
|
|
10662
|
+
/* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_e = cardData == null ? void 0 : cardData.zipCode) != null ? _e : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
|
|
10663
|
+
(cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
|
|
10664
|
+
] }),
|
|
10665
|
+
customerId && /* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
|
|
10666
|
+
/* @__PURE__ */ jsx32(
|
|
10667
|
+
"input",
|
|
10668
|
+
{
|
|
10669
|
+
type: "checkbox",
|
|
10670
|
+
id: "save_card",
|
|
10671
|
+
className: "toggle-checkbox",
|
|
10672
|
+
checked: saveCardInfo,
|
|
10673
|
+
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
10674
|
+
}
|
|
10675
|
+
),
|
|
10676
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "save_card", className: "toggle-label" }),
|
|
10677
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "save_card", children: "Save card for future payments " }),
|
|
10678
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-wrapper", children: [
|
|
10679
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs19(
|
|
10680
|
+
"svg",
|
|
10681
|
+
{
|
|
10682
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10683
|
+
width: "20",
|
|
10684
|
+
height: "20",
|
|
10685
|
+
viewBox: "0 0 20 20",
|
|
10686
|
+
fill: "none",
|
|
10687
|
+
children: [
|
|
10688
|
+
/* @__PURE__ */ jsx32("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
|
|
10689
|
+
/* @__PURE__ */ jsx32(
|
|
10690
|
+
"path",
|
|
10691
|
+
{
|
|
10692
|
+
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",
|
|
10693
|
+
fill: "#161616"
|
|
10694
|
+
}
|
|
10695
|
+
)
|
|
10696
|
+
]
|
|
10697
|
+
}
|
|
10698
|
+
) }),
|
|
10699
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
|
|
10700
|
+
"If checked, I agree to give the ",
|
|
10701
|
+
/* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
|
|
10702
|
+
" permission to charge this credit card for agreed-upon purchases in the future."
|
|
10703
|
+
] }) })
|
|
10704
|
+
] })
|
|
10705
|
+
] }) })
|
|
11380
10706
|
] }),
|
|
11381
|
-
|
|
11382
|
-
|
|
11383
|
-
|
|
11384
|
-
|
|
11385
|
-
|
|
11386
|
-
|
|
11387
|
-
|
|
11388
|
-
|
|
11389
|
-
|
|
11390
|
-
|
|
11391
|
-
|
|
11392
|
-
|
|
11393
|
-
|
|
11394
|
-
|
|
11395
|
-
|
|
11396
|
-
|
|
11397
|
-
|
|
11398
|
-
|
|
10707
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx32("button", { type: "submit", style: { margin: 0 }, className: "pay-button", children: partialAmount ? formatUSD((_f = Number(partialAmount)) == null ? void 0 : _f.toFixed(2)) : formatUSD((_g = Number(amount)) == null ? void 0 : _g.toFixed(2)) }) })
|
|
10708
|
+
] }) : /* @__PURE__ */ jsxs19("form", { id: "PaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
|
|
10709
|
+
if (e.key === "Enter" && loading) {
|
|
10710
|
+
e.preventDefault();
|
|
10711
|
+
e.stopPropagation();
|
|
10712
|
+
}
|
|
10713
|
+
}, children: [
|
|
10714
|
+
/* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
|
|
10715
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10716
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
|
|
10717
|
+
/* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
|
|
10718
|
+
const value = e.target.value;
|
|
10719
|
+
if (/^[a-zA-Z\s]*$/.test(value)) {
|
|
10720
|
+
handleCardChange("cardName", value);
|
|
10721
|
+
}
|
|
10722
|
+
} }),
|
|
10723
|
+
(cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
|
|
10724
|
+
] }),
|
|
10725
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx32(
|
|
10726
|
+
DataCapFields,
|
|
11399
10727
|
{
|
|
11400
|
-
|
|
11401
|
-
|
|
11402
|
-
|
|
11403
|
-
googlePayMerchantId,
|
|
11404
|
-
googlePayMerchantName: merchantName,
|
|
11405
|
-
completeFractalFlow,
|
|
11406
|
-
setLoading
|
|
10728
|
+
isOpen: show || autoTrigger,
|
|
10729
|
+
tokenKey: dcToken,
|
|
10730
|
+
setLoader: activeinCard === "form" ? setLoadingIframe : null
|
|
11407
10731
|
}
|
|
11408
|
-
),
|
|
11409
|
-
/* @__PURE__ */
|
|
11410
|
-
|
|
11411
|
-
|
|
11412
|
-
|
|
11413
|
-
|
|
11414
|
-
|
|
11415
|
-
|
|
11416
|
-
|
|
11417
|
-
/* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
|
|
11418
|
-
/* @__PURE__ */ jsx36("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
|
|
11419
|
-
/* @__PURE__ */ jsx36("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
|
|
11420
|
-
const value = e.target.value;
|
|
11421
|
-
if (/^[a-zA-Z\s]*$/.test(value)) {
|
|
11422
|
-
handleCardChange("cardName", value);
|
|
11423
|
-
}
|
|
11424
|
-
} }),
|
|
11425
|
-
(cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
|
|
11426
|
-
] }),
|
|
11427
|
-
/* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
|
|
11428
|
-
/* @__PURE__ */ jsx36("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
|
|
11429
|
-
/* @__PURE__ */ jsx36("div", { className: "toggle-num-wrapper toggle-num-wrapper-new", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx36(
|
|
11430
|
-
FractalFields_default,
|
|
11431
|
-
{
|
|
11432
|
-
fractalStyles,
|
|
11433
|
-
tokenizerRef,
|
|
11434
|
-
isSky: true
|
|
11435
|
-
}
|
|
11436
|
-
) })
|
|
11437
|
-
] }),
|
|
11438
|
-
/* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
|
|
11439
|
-
/* @__PURE__ */ jsx36("label", { htmlFor: "zip", children: "ZIP" }),
|
|
11440
|
-
/* @__PURE__ */ jsx36("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_g = cardData == null ? void 0 : cardData.zipCode) != null ? _g : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
|
|
11441
|
-
(cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
|
|
11442
|
-
pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs21("small", { className: "frac-fee-text", children: [
|
|
11443
|
-
"Credit cards include a fee amount of ",
|
|
11444
|
-
/* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
|
|
11445
|
-
"."
|
|
11446
|
-
] })
|
|
11447
|
-
] }),
|
|
11448
|
-
customerId && /* @__PURE__ */ jsx36("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
|
|
11449
|
-
/* @__PURE__ */ jsx36(
|
|
11450
|
-
"input",
|
|
11451
|
-
{
|
|
11452
|
-
type: "checkbox",
|
|
11453
|
-
id: "save_card",
|
|
11454
|
-
className: "toggle-checkbox",
|
|
11455
|
-
checked: saveCardInfo,
|
|
11456
|
-
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
11457
|
-
}
|
|
11458
|
-
),
|
|
11459
|
-
/* @__PURE__ */ jsx36("label", { htmlFor: "save_card", className: "toggle-label" }),
|
|
11460
|
-
/* @__PURE__ */ jsx36("label", { htmlFor: "save_card", children: "Save card for future payments " }),
|
|
11461
|
-
/* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-wrapper", children: [
|
|
11462
|
-
/* @__PURE__ */ jsx36("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs21(
|
|
11463
|
-
"svg",
|
|
11464
|
-
{
|
|
11465
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
11466
|
-
width: "20",
|
|
11467
|
-
height: "20",
|
|
11468
|
-
viewBox: "0 0 20 20",
|
|
11469
|
-
fill: "none",
|
|
11470
|
-
children: [
|
|
11471
|
-
/* @__PURE__ */ jsx36("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
|
|
11472
|
-
/* @__PURE__ */ jsx36(
|
|
11473
|
-
"path",
|
|
11474
|
-
{
|
|
11475
|
-
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",
|
|
11476
|
-
fill: "#161616"
|
|
11477
|
-
}
|
|
11478
|
-
)
|
|
11479
|
-
]
|
|
11480
|
-
}
|
|
11481
|
-
) }),
|
|
11482
|
-
/* @__PURE__ */ jsx36("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs21("p", { children: [
|
|
11483
|
-
"If checked, I agree to give the ",
|
|
11484
|
-
/* @__PURE__ */ jsx36("b", { children: merchantName || "merchant" }),
|
|
11485
|
-
" permission to charge this credit card for agreed-upon purchases in the future."
|
|
11486
|
-
] }) })
|
|
11487
|
-
] })
|
|
11488
|
-
] }) })
|
|
11489
|
-
] }),
|
|
11490
|
-
/* @__PURE__ */ jsx36("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx36("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_h = Number(partialAmount)) == null ? void 0 : _h.toFixed(2)) : formatUSD((_i = Number(amount)) == null ? void 0 : _i.toFixed(2)) }) })
|
|
11491
|
-
] })
|
|
11492
|
-
] }) : /* @__PURE__ */ jsxs21("form", { id: "PaymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
|
|
11493
|
-
if (e.key === "Enter" && loading) {
|
|
11494
|
-
e.preventDefault();
|
|
11495
|
-
e.stopPropagation();
|
|
11496
|
-
}
|
|
11497
|
-
}, children: [
|
|
11498
|
-
/* @__PURE__ */ jsxs21("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
|
|
11499
|
-
/* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
|
|
11500
|
-
/* @__PURE__ */ jsx36("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
|
|
11501
|
-
/* @__PURE__ */ jsx36("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
|
|
11502
|
-
const value = e.target.value;
|
|
11503
|
-
if (/^[a-zA-Z\s]*$/.test(value)) {
|
|
11504
|
-
handleCardChange("cardName", value);
|
|
11505
|
-
}
|
|
11506
|
-
} }),
|
|
11507
|
-
(cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
|
|
11508
|
-
] }),
|
|
11509
|
-
/* @__PURE__ */ jsx36("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx36(
|
|
11510
|
-
DataCapFields,
|
|
10732
|
+
) }),
|
|
10733
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10734
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "zip", children: "ZIP" }),
|
|
10735
|
+
/* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_h = cardData == null ? void 0 : cardData.zipCode) != null ? _h : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
|
|
10736
|
+
(cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
|
|
10737
|
+
] }),
|
|
10738
|
+
customerId && /* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
|
|
10739
|
+
/* @__PURE__ */ jsx32(
|
|
10740
|
+
"input",
|
|
11511
10741
|
{
|
|
11512
|
-
|
|
11513
|
-
|
|
11514
|
-
|
|
11515
|
-
|
|
10742
|
+
type: "checkbox",
|
|
10743
|
+
id: "save_card",
|
|
10744
|
+
className: "toggle-checkbox",
|
|
10745
|
+
checked: saveCardInfo,
|
|
10746
|
+
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
11516
10747
|
}
|
|
11517
|
-
)
|
|
11518
|
-
/* @__PURE__ */
|
|
11519
|
-
|
|
11520
|
-
|
|
11521
|
-
|
|
11522
|
-
|
|
11523
|
-
"Credit cards include a fee amount of ",
|
|
11524
|
-
/* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
|
|
11525
|
-
"."
|
|
11526
|
-
] })
|
|
11527
|
-
] }),
|
|
11528
|
-
customerId && /* @__PURE__ */ jsx36("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
|
|
11529
|
-
/* @__PURE__ */ jsx36(
|
|
11530
|
-
"input",
|
|
10748
|
+
),
|
|
10749
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "save_card", className: "toggle-label" }),
|
|
10750
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "save_card", children: "Save card for future payments " }),
|
|
10751
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-wrapper", children: [
|
|
10752
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs19(
|
|
10753
|
+
"svg",
|
|
11531
10754
|
{
|
|
11532
|
-
|
|
11533
|
-
|
|
11534
|
-
|
|
11535
|
-
|
|
11536
|
-
|
|
10755
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10756
|
+
width: "20",
|
|
10757
|
+
height: "20",
|
|
10758
|
+
viewBox: "0 0 20 20",
|
|
10759
|
+
fill: "none",
|
|
10760
|
+
children: [
|
|
10761
|
+
/* @__PURE__ */ jsx32("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
|
|
10762
|
+
/* @__PURE__ */ jsx32(
|
|
10763
|
+
"path",
|
|
10764
|
+
{
|
|
10765
|
+
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",
|
|
10766
|
+
fill: "#161616"
|
|
10767
|
+
}
|
|
10768
|
+
)
|
|
10769
|
+
]
|
|
11537
10770
|
}
|
|
11538
|
-
),
|
|
11539
|
-
/* @__PURE__ */
|
|
11540
|
-
|
|
11541
|
-
|
|
11542
|
-
|
|
11543
|
-
|
|
11544
|
-
|
|
11545
|
-
|
|
11546
|
-
width: "20",
|
|
11547
|
-
height: "20",
|
|
11548
|
-
viewBox: "0 0 20 20",
|
|
11549
|
-
fill: "none",
|
|
11550
|
-
children: [
|
|
11551
|
-
/* @__PURE__ */ jsx36("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
|
|
11552
|
-
/* @__PURE__ */ jsx36(
|
|
11553
|
-
"path",
|
|
11554
|
-
{
|
|
11555
|
-
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",
|
|
11556
|
-
fill: "#161616"
|
|
11557
|
-
}
|
|
11558
|
-
)
|
|
11559
|
-
]
|
|
11560
|
-
}
|
|
11561
|
-
) }),
|
|
11562
|
-
/* @__PURE__ */ jsx36("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs21("p", { children: [
|
|
11563
|
-
"If checked, I agree to give the ",
|
|
11564
|
-
/* @__PURE__ */ jsx36("b", { children: merchantName || "merchant" }),
|
|
11565
|
-
" permission to charge this credit card for agreed-upon purchases in the future."
|
|
11566
|
-
] }) })
|
|
11567
|
-
] })
|
|
11568
|
-
] }) })
|
|
11569
|
-
] }),
|
|
11570
|
-
/* @__PURE__ */ jsx36("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx36("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_k = Number(partialAmount)) == null ? void 0 : _k.toFixed(2)) : formatUSD((_l = Number(amount)) == null ? void 0 : _l.toFixed(2)) }) })
|
|
11571
|
-
] })
|
|
11572
|
-
] }),
|
|
11573
|
-
/* @__PURE__ */ jsx36("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs21(Fragment20, { children: [
|
|
11574
|
-
!onSubmit && /* @__PURE__ */ jsxs21("div", { className: "frac-heading-card-wrap", children: [
|
|
11575
|
-
/* @__PURE__ */ jsx36("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs21("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
|
|
11576
|
-
" ",
|
|
11577
|
-
/* @__PURE__ */ jsx36(IoArrowBack4, {})
|
|
11578
|
-
] }) }),
|
|
11579
|
-
/* @__PURE__ */ jsx36("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
|
|
10771
|
+
) }),
|
|
10772
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
|
|
10773
|
+
"If checked, I agree to give the ",
|
|
10774
|
+
/* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
|
|
10775
|
+
" permission to charge this credit card for agreed-upon purchases in the future."
|
|
10776
|
+
] }) })
|
|
10777
|
+
] })
|
|
10778
|
+
] }) })
|
|
11580
10779
|
] }),
|
|
11581
|
-
|
|
11582
|
-
|
|
11583
|
-
|
|
11584
|
-
|
|
11585
|
-
|
|
11586
|
-
|
|
11587
|
-
|
|
11588
|
-
|
|
11589
|
-
|
|
11590
|
-
|
|
10780
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx32("button", { type: "submit", style: { margin: 0 }, className: "pay-button", children: partialAmount ? formatUSD((_i = Number(partialAmount)) == null ? void 0 : _i.toFixed(2)) : formatUSD((_j = Number(amount)) == null ? void 0 : _j.toFixed(2)) }) })
|
|
10781
|
+
] })
|
|
10782
|
+
] }),
|
|
10783
|
+
/* @__PURE__ */ jsx32("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10784
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
|
|
10785
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs19("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
|
|
10786
|
+
" ",
|
|
10787
|
+
/* @__PURE__ */ jsx32(IoArrowBack4, {})
|
|
10788
|
+
] }) }),
|
|
10789
|
+
/* @__PURE__ */ jsx32("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
|
|
10790
|
+
] }),
|
|
10791
|
+
activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10792
|
+
/* @__PURE__ */ jsx32(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
|
|
10793
|
+
setActiveinBank("form");
|
|
10794
|
+
} }),
|
|
10795
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { padding: "0" }, children: /* @__PURE__ */ jsx32("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_k = Number(bankAmount)) == null ? void 0 : _k.toFixed(2)) }) })
|
|
10796
|
+
] }) : /* @__PURE__ */ jsxs19("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
|
|
10797
|
+
if (e.key === "Enter" && loading) {
|
|
10798
|
+
e.preventDefault();
|
|
10799
|
+
e.stopPropagation();
|
|
10800
|
+
}
|
|
10801
|
+
}, children: [
|
|
10802
|
+
/* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: {
|
|
10803
|
+
minHeight: "444px",
|
|
10804
|
+
maxHeight: "444px"
|
|
11591
10805
|
}, children: [
|
|
11592
|
-
/* @__PURE__ */
|
|
11593
|
-
|
|
11594
|
-
|
|
11595
|
-
|
|
11596
|
-
|
|
11597
|
-
|
|
11598
|
-
|
|
11599
|
-
|
|
11600
|
-
|
|
11601
|
-
|
|
11602
|
-
|
|
11603
|
-
|
|
11604
|
-
"
|
|
11605
|
-
|
|
11606
|
-
|
|
11607
|
-
|
|
11608
|
-
|
|
11609
|
-
|
|
11610
|
-
|
|
11611
|
-
|
|
11612
|
-
|
|
11613
|
-
|
|
11614
|
-
|
|
11615
|
-
|
|
11616
|
-
|
|
11617
|
-
|
|
11618
|
-
|
|
11619
|
-
|
|
11620
|
-
|
|
11621
|
-
"
|
|
11622
|
-
|
|
11623
|
-
|
|
11624
|
-
|
|
11625
|
-
|
|
11626
|
-
|
|
11627
|
-
|
|
11628
|
-
|
|
11629
|
-
|
|
11630
|
-
|
|
11631
|
-
|
|
11632
|
-
|
|
11633
|
-
|
|
11634
|
-
|
|
11635
|
-
|
|
11636
|
-
|
|
11637
|
-
|
|
11638
|
-
"
|
|
11639
|
-
|
|
11640
|
-
|
|
11641
|
-
|
|
11642
|
-
|
|
11643
|
-
|
|
11644
|
-
|
|
11645
|
-
|
|
11646
|
-
|
|
11647
|
-
|
|
11648
|
-
|
|
11649
|
-
|
|
11650
|
-
|
|
11651
|
-
|
|
11652
|
-
|
|
11653
|
-
|
|
11654
|
-
|
|
11655
|
-
"
|
|
11656
|
-
|
|
11657
|
-
|
|
11658
|
-
|
|
11659
|
-
|
|
11660
|
-
|
|
11661
|
-
|
|
11662
|
-
|
|
11663
|
-
|
|
11664
|
-
|
|
11665
|
-
|
|
11666
|
-
|
|
11667
|
-
|
|
11668
|
-
|
|
11669
|
-
|
|
11670
|
-
|
|
11671
|
-
|
|
11672
|
-
"
|
|
11673
|
-
|
|
11674
|
-
|
|
11675
|
-
|
|
11676
|
-
|
|
11677
|
-
|
|
11678
|
-
|
|
11679
|
-
|
|
11680
|
-
|
|
11681
|
-
|
|
11682
|
-
|
|
11683
|
-
|
|
11684
|
-
|
|
11685
|
-
|
|
11686
|
-
|
|
11687
|
-
/* @__PURE__ */ jsx36("label", { htmlFor: "accounttype", children: "Select account type" }),
|
|
11688
|
-
/* @__PURE__ */ jsxs21("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_t = achData == null ? void 0 : achData.accountType) != null ? _t : "", onChange: handleChangeAch, children: [
|
|
11689
|
-
/* @__PURE__ */ jsx36("option", { value: "", children: "Select account" }),
|
|
11690
|
-
accountTypes.map((type) => /* @__PURE__ */ jsx36("option", { value: type.value, children: type.label }, type.value))
|
|
11691
|
-
] }),
|
|
11692
|
-
bankFeeAmount > 0 && /* @__PURE__ */ jsxs21("small", { className: "frac-fee-text", children: [
|
|
11693
|
-
"There is a processing fee of ",
|
|
11694
|
-
/* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
|
|
11695
|
-
"."
|
|
11696
|
-
] }),
|
|
11697
|
-
/* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
|
|
11698
|
-
/* @__PURE__ */ jsx36("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
|
|
11699
|
-
setIsBankConsentChecked(e.target.checked);
|
|
11700
|
-
if (e.target.checked) {
|
|
11701
|
-
setErrorBankConsent("");
|
|
11702
|
-
}
|
|
11703
|
-
} }),
|
|
11704
|
-
/* @__PURE__ */ jsx36("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
|
|
11705
|
-
] }),
|
|
11706
|
-
errorBankConsent && /* @__PURE__ */ jsx36("span", { className: "error-span", children: errorBankConsent }),
|
|
11707
|
-
customerId && /* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
|
|
11708
|
-
/* @__PURE__ */ jsx36("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
|
|
11709
|
-
/* @__PURE__ */ jsx36("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
|
|
11710
|
-
] }),
|
|
11711
|
-
saveACHinfo && /* @__PURE__ */ jsx36("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs21("p", { children: [
|
|
11712
|
-
"If checked, I agree to give the ",
|
|
11713
|
-
/* @__PURE__ */ jsx36("b", { children: merchantName || "merchant" }),
|
|
11714
|
-
" permission to charge this bank account for agreed-upon purchases in the future."
|
|
11715
|
-
] }) })
|
|
10806
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10807
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "nameonaccount", children: "Name on account" }),
|
|
10808
|
+
/* @__PURE__ */ jsx32("input", { type: "text", id: "nameonaccount", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", name: "name", value: (_l = achData == null ? void 0 : achData.name) != null ? _l : "", onChange: handleChangeAch }),
|
|
10809
|
+
(achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
|
|
10810
|
+
] }),
|
|
10811
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10812
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "routingnumber", children: "Routing number" }),
|
|
10813
|
+
/* @__PURE__ */ jsx32(
|
|
10814
|
+
"input",
|
|
10815
|
+
{
|
|
10816
|
+
type: "text",
|
|
10817
|
+
id: "routingnumber",
|
|
10818
|
+
className: "form-control-frac",
|
|
10819
|
+
maxLength: 9,
|
|
10820
|
+
placeholder: "000000000",
|
|
10821
|
+
name: "routingNumber",
|
|
10822
|
+
value: (_m = achData == null ? void 0 : achData.routingNumber) != null ? _m : "",
|
|
10823
|
+
onChange: handleChangeAch
|
|
10824
|
+
}
|
|
10825
|
+
),
|
|
10826
|
+
(achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
|
|
10827
|
+
] }),
|
|
10828
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10829
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "accountnumber", children: "Account number" }),
|
|
10830
|
+
/* @__PURE__ */ jsx32(
|
|
10831
|
+
"input",
|
|
10832
|
+
{
|
|
10833
|
+
type: "text",
|
|
10834
|
+
id: "accountnumber",
|
|
10835
|
+
className: "form-control-frac",
|
|
10836
|
+
maxLength: 16,
|
|
10837
|
+
placeholder: "0000000000",
|
|
10838
|
+
name: "accountNumber",
|
|
10839
|
+
value: (_n = achData == null ? void 0 : achData.accountNumber) != null ? _n : "",
|
|
10840
|
+
onChange: handleChangeAch
|
|
10841
|
+
}
|
|
10842
|
+
),
|
|
10843
|
+
(achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
|
|
10844
|
+
] }),
|
|
10845
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10846
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
|
|
10847
|
+
/* @__PURE__ */ jsx32(
|
|
10848
|
+
"input",
|
|
10849
|
+
{
|
|
10850
|
+
type: "text",
|
|
10851
|
+
id: "confirmaccountnumber",
|
|
10852
|
+
className: "form-control-frac",
|
|
10853
|
+
maxLength: 16,
|
|
10854
|
+
placeholder: "0000000000",
|
|
10855
|
+
name: "confirmAccountNumber",
|
|
10856
|
+
value: (_o = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _o : "",
|
|
10857
|
+
onChange: handleChangeAch
|
|
10858
|
+
}
|
|
10859
|
+
),
|
|
10860
|
+
(achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
|
|
10861
|
+
] }),
|
|
10862
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10863
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "bankname", children: "Bank name" }),
|
|
10864
|
+
/* @__PURE__ */ jsx32(
|
|
10865
|
+
"input",
|
|
10866
|
+
{
|
|
10867
|
+
type: "text",
|
|
10868
|
+
id: "bankname",
|
|
10869
|
+
className: "form-control-frac",
|
|
10870
|
+
maxLength: 100,
|
|
10871
|
+
placeholder: "My Bank",
|
|
10872
|
+
name: "bankName",
|
|
10873
|
+
value: (_p = achData == null ? void 0 : achData.bankName) != null ? _p : "",
|
|
10874
|
+
onChange: handleChangeAch
|
|
10875
|
+
}
|
|
10876
|
+
),
|
|
10877
|
+
(achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.bankName })
|
|
10878
|
+
] }),
|
|
10879
|
+
((achData == null ? void 0 : achData.accountType) === "business saving" || (achData == null ? void 0 : achData.accountType) === "business checking") && /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10880
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "companyName", children: "Company name" }),
|
|
10881
|
+
/* @__PURE__ */ jsx32(
|
|
10882
|
+
"input",
|
|
10883
|
+
{
|
|
10884
|
+
type: "text",
|
|
10885
|
+
id: "companyName",
|
|
10886
|
+
className: "form-control-frac",
|
|
10887
|
+
maxLength: 100,
|
|
10888
|
+
placeholder: "My Company",
|
|
10889
|
+
name: "companyName",
|
|
10890
|
+
value: (_q = achData == null ? void 0 : achData.companyName) != null ? _q : "",
|
|
10891
|
+
onChange: handleChangeAch
|
|
10892
|
+
}
|
|
10893
|
+
),
|
|
10894
|
+
(achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
|
|
10895
|
+
] }),
|
|
10896
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10897
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "accounttype", children: "Select account type" }),
|
|
10898
|
+
/* @__PURE__ */ jsxs19("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_r = achData == null ? void 0 : achData.accountType) != null ? _r : "", onChange: handleChangeAch, children: [
|
|
10899
|
+
/* @__PURE__ */ jsx32("option", { value: "", children: "Select account" }),
|
|
10900
|
+
accountTypes.map((type) => /* @__PURE__ */ jsx32("option", { value: type.value, children: type.label }, type.value))
|
|
11716
10901
|
] })
|
|
11717
10902
|
] }),
|
|
11718
|
-
/* @__PURE__ */
|
|
11719
|
-
|
|
11720
|
-
|
|
11721
|
-
|
|
11722
|
-
|
|
10903
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
|
|
10904
|
+
/* @__PURE__ */ jsx32("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
|
|
10905
|
+
setIsBankConsentChecked(e.target.checked);
|
|
10906
|
+
if (e.target.checked) {
|
|
10907
|
+
setErrorBankConsent("");
|
|
10908
|
+
}
|
|
10909
|
+
} }),
|
|
10910
|
+
/* @__PURE__ */ jsx32("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
|
|
10911
|
+
] }),
|
|
10912
|
+
errorBankConsent && /* @__PURE__ */ jsx32("span", { className: "error-span", children: errorBankConsent }),
|
|
10913
|
+
customerId && /* @__PURE__ */ jsxs19("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
|
|
10914
|
+
/* @__PURE__ */ jsx32("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
|
|
10915
|
+
/* @__PURE__ */ jsx32("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
|
|
10916
|
+
] }),
|
|
10917
|
+
saveACHinfo && /* @__PURE__ */ jsx32("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs19("p", { children: [
|
|
10918
|
+
"If checked, I agree to give the ",
|
|
10919
|
+
/* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
|
|
10920
|
+
" permission to charge this bank account for agreed-upon purchases in the future."
|
|
10921
|
+
] }) })
|
|
10922
|
+
] }),
|
|
10923
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac ", children: /* @__PURE__ */ jsx32("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: formatUSD((_s = Number(bankAmount)) == null ? void 0 : _s.toFixed(2)) }) })
|
|
10924
|
+
] })
|
|
10925
|
+
] }) })
|
|
10926
|
+
] }) }) }) })
|
|
11723
10927
|
] })
|
|
11724
10928
|
] })
|
|
11725
10929
|
] })
|
|
@@ -11730,7 +10934,7 @@ var ModelContentSky_default = ModelContentSky;
|
|
|
11730
10934
|
|
|
11731
10935
|
// src/app/components/Skysystemz/PayButtonWithForm.tsx
|
|
11732
10936
|
import axios10 from "axios";
|
|
11733
|
-
import { Fragment as
|
|
10937
|
+
import { Fragment as Fragment19, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
11734
10938
|
var PaymentWidget = ({
|
|
11735
10939
|
amount,
|
|
11736
10940
|
bankAmount,
|
|
@@ -11752,12 +10956,12 @@ var PaymentWidget = ({
|
|
|
11752
10956
|
bankSurcharge,
|
|
11753
10957
|
partialRef
|
|
11754
10958
|
}) => {
|
|
11755
|
-
const [show, setShow] =
|
|
11756
|
-
const [loading, setLoading] =
|
|
11757
|
-
const [childHandleClose, setChildHandleClose] =
|
|
10959
|
+
const [show, setShow] = useState11(autoTrigger || false);
|
|
10960
|
+
const [loading, setLoading] = useState11(false);
|
|
10961
|
+
const [childHandleClose, setChildHandleClose] = useState11(() => () => {
|
|
11758
10962
|
});
|
|
11759
|
-
const [orderGuid, setOrderGuid] =
|
|
11760
|
-
const [remainingAmount, setRemainingAmount] =
|
|
10963
|
+
const [orderGuid, setOrderGuid] = useState11(null);
|
|
10964
|
+
const [remainingAmount, setRemainingAmount] = useState11(null);
|
|
11761
10965
|
const initialCommonProps = useMemo(
|
|
11762
10966
|
() => ({
|
|
11763
10967
|
amount,
|
|
@@ -11804,8 +11008,8 @@ var PaymentWidget = ({
|
|
|
11804
11008
|
partialRef
|
|
11805
11009
|
]
|
|
11806
11010
|
);
|
|
11807
|
-
const [commonProps, setCommonProps] =
|
|
11808
|
-
|
|
11011
|
+
const [commonProps, setCommonProps] = useState11(initialCommonProps);
|
|
11012
|
+
useEffect16(() => {
|
|
11809
11013
|
if (show) {
|
|
11810
11014
|
setCommonProps(initialCommonProps);
|
|
11811
11015
|
}
|
|
@@ -11836,556 +11040,29 @@ var PaymentWidget = ({
|
|
|
11836
11040
|
setLoading(false);
|
|
11837
11041
|
}
|
|
11838
11042
|
};
|
|
11839
|
-
|
|
11840
|
-
if (show && isPartial && partialRef) {
|
|
11841
|
-
getskyosOrderDetails();
|
|
11842
|
-
}
|
|
11843
|
-
}, [show, isPartial, partialRef]);
|
|
11844
|
-
return /* @__PURE__ */ jsxs22(Fragment21, { children: [
|
|
11845
|
-
/* @__PURE__ */ jsx37("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
|
|
11846
|
-
/* @__PURE__ */ jsx37(DataScript, {}),
|
|
11847
|
-
/* @__PURE__ */ jsx37(FractalTokenizerScript, {}),
|
|
11848
|
-
/* @__PURE__ */ jsx37(SkyChargewidgetstyles, {}),
|
|
11849
|
-
/* @__PURE__ */ jsx37(CardBankRadioStyles, {}),
|
|
11850
|
-
/* @__PURE__ */ jsx37(CustomModal2styles_default, {}),
|
|
11851
|
-
/* @__PURE__ */ jsx37(DataCapScriptLoader, {}),
|
|
11852
|
-
!autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
|
|
11853
|
-
submitBtnText,
|
|
11854
|
-
submitBtnIcon
|
|
11855
|
-
] }),
|
|
11856
|
-
!autoTrigger ? /* @__PURE__ */ jsx37(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
|
|
11857
|
-
] });
|
|
11858
|
-
};
|
|
11859
|
-
|
|
11860
|
-
// src/app/components/Skysystemz/EmbeddedCheckout.tsx
|
|
11861
|
-
import { useEffect as useEffect21, useState as useState13, useMemo as useMemo2 } from "react";
|
|
11862
|
-
import axios11 from "axios";
|
|
11863
|
-
|
|
11864
|
-
// src/app/components/Skysystemz/EmbeddedCheckoutStyles.tsx
|
|
11865
|
-
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
11866
|
-
function EmbeddedCheckoutStyles({ extraCustomCSS }) {
|
|
11867
|
-
return /* @__PURE__ */ jsx38("style", { children: `
|
|
11868
|
-
|
|
11869
|
-
.pay-amount-conatiner{
|
|
11870
|
-
margin-top: 20px !important;
|
|
11871
|
-
margin-bottom: 20px !important ;
|
|
11872
|
-
}
|
|
11873
|
-
|
|
11874
|
-
.frac-pay-container.pay-container {
|
|
11875
|
-
grid-template-columns:1fr;
|
|
11876
|
-
}
|
|
11877
|
-
|
|
11878
|
-
|
|
11879
|
-
/* Card */
|
|
11880
|
-
.plan-card {
|
|
11881
|
-
width: 100%;
|
|
11882
|
-
font-family: Inter, sans-serif;
|
|
11883
|
-
background: #fff;
|
|
11884
|
-
}
|
|
11885
|
-
|
|
11886
|
-
/* Header */
|
|
11887
|
-
.card-header {
|
|
11888
|
-
padding: 12px 0 0 0;
|
|
11889
|
-
}
|
|
11890
|
-
|
|
11891
|
-
/* Button */
|
|
11892
|
-
.collapse-btn {
|
|
11893
|
-
width: 100%;
|
|
11894
|
-
background: none;
|
|
11895
|
-
border: none;
|
|
11896
|
-
display: flex;
|
|
11897
|
-
justify-content: space-between;
|
|
11898
|
-
align-items: center;
|
|
11899
|
-
cursor: pointer;
|
|
11900
|
-
font-size: 15px;
|
|
11901
|
-
padding: 0;
|
|
11902
|
-
}
|
|
11903
|
-
|
|
11904
|
-
/* Arrow */
|
|
11905
|
-
.arrow {
|
|
11906
|
-
transition: transform 0.3s ease;
|
|
11907
|
-
height: 8px;
|
|
11908
|
-
}
|
|
11909
|
-
|
|
11910
|
-
/* Open State */
|
|
11911
|
-
.collapse-btn.open .arrow {
|
|
11912
|
-
transform: rotate(180deg); /* Down */
|
|
11913
|
-
}
|
|
11914
|
-
|
|
11915
|
-
/* Body */
|
|
11916
|
-
.card-body {
|
|
11917
|
-
padding: 0;
|
|
11918
|
-
}
|
|
11919
|
-
|
|
11920
|
-
/* Plan Header */
|
|
11921
|
-
.plan-header {
|
|
11922
|
-
font-size: 15px;
|
|
11923
|
-
font-weight: 600;
|
|
11924
|
-
}
|
|
11925
|
-
|
|
11926
|
-
/* Scrollable List */
|
|
11927
|
-
.plan-list {
|
|
11928
|
-
max-height: 200px;
|
|
11929
|
-
overflow-y: auto;
|
|
11930
|
-
padding-right: 6px;
|
|
11931
|
-
}
|
|
11932
|
-
|
|
11933
|
-
/* Items */
|
|
11934
|
-
.plan-item {
|
|
11935
|
-
display: flex;
|
|
11936
|
-
justify-content: space-between;
|
|
11937
|
-
padding: 6px 0;
|
|
11938
|
-
font-size: 14px;
|
|
11939
|
-
}
|
|
11940
|
-
|
|
11941
|
-
/* Badges */
|
|
11942
|
-
.badge {
|
|
11943
|
-
padding: 4px 10px;
|
|
11944
|
-
border-radius: 12px;
|
|
11945
|
-
font-size: 12px;
|
|
11946
|
-
font-weight: 500;
|
|
11947
|
-
}
|
|
11948
|
-
|
|
11949
|
-
.badge-included {
|
|
11950
|
-
background: #f1f3f5;
|
|
11951
|
-
color: #495057;
|
|
11952
|
-
}
|
|
11953
|
-
|
|
11954
|
-
.badge-available {
|
|
11955
|
-
background: #f8f9fa;
|
|
11956
|
-
color: #212529;
|
|
11957
|
-
}
|
|
11958
|
-
|
|
11959
|
-
/* Helpers */
|
|
11960
|
-
.row-between {
|
|
11961
|
-
display: flex;
|
|
11962
|
-
justify-content: space-between;
|
|
11963
|
-
}
|
|
11964
|
-
|
|
11965
|
-
.text-end {
|
|
11966
|
-
text-align: right;
|
|
11967
|
-
}
|
|
11968
|
-
|
|
11969
|
-
.text-muted {
|
|
11970
|
-
color: #6c757d;
|
|
11971
|
-
font-size: 12px;
|
|
11972
|
-
}
|
|
11973
|
-
|
|
11974
|
-
.fw-semibold {
|
|
11975
|
-
font-weight: 600;
|
|
11976
|
-
}
|
|
11977
|
-
|
|
11978
|
-
.mb-2 {
|
|
11979
|
-
margin-bottom: 8px;
|
|
11980
|
-
}
|
|
11981
|
-
|
|
11982
|
-
/* Divider */
|
|
11983
|
-
.divider {
|
|
11984
|
-
height: 1px;
|
|
11985
|
-
background: #e5e7eb;
|
|
11986
|
-
margin: 8px 0;
|
|
11987
|
-
}
|
|
11988
|
-
|
|
11989
|
-
/* Collapse Animation */
|
|
11990
|
-
.collapse {
|
|
11991
|
-
max-height: 0;
|
|
11992
|
-
overflow: hidden;
|
|
11993
|
-
transition: max-height 0.3s ease;
|
|
11994
|
-
}
|
|
11995
|
-
|
|
11996
|
-
.collapse.show {
|
|
11997
|
-
max-height: 1000px;
|
|
11998
|
-
}
|
|
11999
|
-
.frac-pay-container.pay-container {
|
|
12000
|
-
grid-template-columns:1fr;
|
|
12001
|
-
}
|
|
12002
|
-
.frac-payment-form-div .amt-pay-con {
|
|
12003
|
-
padding-right: 0px;
|
|
12004
|
-
}
|
|
12005
|
-
.frac-payment-form-div .ach-scrl {
|
|
12006
|
-
padding-right: 0px;
|
|
12007
|
-
gap: 10px;
|
|
12008
|
-
max-height: fit-content !important;
|
|
12009
|
-
min-height: fit-content !important;
|
|
12010
|
-
overflow: hidden !important;
|
|
12011
|
-
}
|
|
12012
|
-
.frac-payment-form-div .frac-card-bank-radio-main {
|
|
12013
|
-
display: flex;
|
|
12014
|
-
flex-direction: row;
|
|
12015
|
-
align-items: flex-start;
|
|
12016
|
-
align-self: stretch;
|
|
12017
|
-
border-radius: 14px;
|
|
12018
|
-
border: none;
|
|
12019
|
-
overflow: visible;
|
|
12020
|
-
gap: 10px;
|
|
12021
|
-
}
|
|
12022
|
-
.frac-payment-form-div .frac-card-bank-radio {
|
|
12023
|
-
display: flex;
|
|
12024
|
-
padding: 12px 16px;
|
|
12025
|
-
justify-content: space-between;
|
|
12026
|
-
align-items: center;
|
|
12027
|
-
align-self: stretch;
|
|
12028
|
-
width: 50%;
|
|
12029
|
-
border: 1px solid #E0DFE2;
|
|
12030
|
-
border-radius: 10px;
|
|
12031
|
-
box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 4px;
|
|
12032
|
-
}
|
|
12033
|
-
.frac-payment-form-div .frac-card-bank-radio.frac-active {
|
|
12034
|
-
background: #fff;
|
|
12035
|
-
border: 2px solid #004eab !important;
|
|
12036
|
-
}
|
|
12037
|
-
|
|
12038
|
-
.frac-payment-form-div .form-control-frac {
|
|
12039
|
-
border: 1px solid #dee2e6 !important;
|
|
12040
|
-
border-radius: 0.375rem !important;
|
|
12041
|
-
background-color: #F6F6F7;
|
|
12042
|
-
box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
|
|
12043
|
-
}
|
|
12044
|
-
.frac-payment-form-div .form-control-frac:focus {
|
|
12045
|
-
border: 1px solid #004eab !important;
|
|
12046
|
-
}
|
|
12047
|
-
.frac-payment-form-div .card-expiry-new {
|
|
12048
|
-
border: none;
|
|
12049
|
-
gap: 10px;
|
|
12050
|
-
}
|
|
12051
|
-
.frac-payment-form-div .exp-date-year-container {
|
|
12052
|
-
gap: 10px;
|
|
12053
|
-
width: 100%;
|
|
12054
|
-
}
|
|
12055
|
-
.frac-payment-form-div .card-type-logo-wrap{
|
|
12056
|
-
position: absolute;
|
|
12057
|
-
right: 10px;
|
|
12058
|
-
max-width: 30px;
|
|
12059
|
-
}
|
|
12060
|
-
.detials-wrap.detials-wrap-1 {
|
|
12061
|
-
display: flex;
|
|
12062
|
-
flex-wrap: wrap;
|
|
12063
|
-
}
|
|
12064
|
-
@media screen and (max-width: 1280px) {
|
|
12065
|
-
.frac-pay-container.pay-container {
|
|
12066
|
-
grid-template-columns: 1fr;
|
|
12067
|
-
border: none;
|
|
12068
|
-
}
|
|
12069
|
-
}
|
|
12070
|
-
@media screen and (max-width: 899px) {
|
|
12071
|
-
.detials-wrap {
|
|
12072
|
-
grid-template-columns: 1fr !important;
|
|
12073
|
-
}
|
|
12074
|
-
.frac-payment-form-div .exp-date-year-container{
|
|
12075
|
-
width: 100%;}
|
|
12076
|
-
|
|
12077
|
-
}
|
|
12078
|
-
@media screen and (max-width: 575px) {
|
|
12079
|
-
.frac-payment-form-div .card-type-logo-wrap{
|
|
12080
|
-
max-width: 30px;
|
|
12081
|
-
}
|
|
12082
|
-
form#ACHPaymentForm .ach-scrl {
|
|
12083
|
-
grid-template-columns: 1fr !important;
|
|
12084
|
-
}
|
|
12085
|
-
@media screen and (max-width: 375px) {
|
|
12086
|
-
.frac-payment-form-div .exp-date-year-container {
|
|
12087
|
-
flex-direction: column;
|
|
12088
|
-
}
|
|
12089
|
-
.parent-pay-container {
|
|
12090
|
-
padding: 10px;
|
|
12091
|
-
}
|
|
12092
|
-
}
|
|
12093
|
-
}
|
|
12094
|
-
.box-inner-card-text{
|
|
12095
|
-
display: flex;
|
|
12096
|
-
gap: 0px;
|
|
12097
|
-
flex-direction: column;
|
|
12098
|
-
}
|
|
12099
|
-
.box-inner-card-text .frac-payment-type-logo {
|
|
12100
|
-
width: 17px;
|
|
12101
|
-
height: 17px;
|
|
12102
|
-
aspect-ratio: 1/1;
|
|
12103
|
-
}
|
|
12104
|
-
.exp-date-year-wrap.form-control-frac input {
|
|
12105
|
-
background: transparent;
|
|
12106
|
-
border: none;
|
|
12107
|
-
outline: none;
|
|
12108
|
-
font-size: 1rem;
|
|
12109
|
-
font-weight: 400;
|
|
12110
|
-
}
|
|
12111
|
-
.exp-date-year-wrap.form-control-frac {
|
|
12112
|
-
display: flex;
|
|
12113
|
-
gap: 2px;
|
|
12114
|
-
}
|
|
12115
|
-
.exp-date-year-wrap input.exp-month {
|
|
12116
|
-
width: 32px;
|
|
12117
|
-
}
|
|
12118
|
-
.detials-wrap {
|
|
12119
|
-
display: grid;
|
|
12120
|
-
grid-template-columns: 1fr 1fr;
|
|
12121
|
-
gap: 10px;
|
|
12122
|
-
}
|
|
12123
|
-
.detials-wrap.detials-wrap-2{
|
|
12124
|
-
grid-template-columns: 1fr 1fr;
|
|
12125
|
-
}
|
|
12126
|
-
form#ACHPaymentForm .ach-scrl {
|
|
12127
|
-
display: grid;
|
|
12128
|
-
grid-gap: 0px 10px;
|
|
12129
|
-
grid-template-columns: 1fr;
|
|
12130
|
-
}
|
|
12131
|
-
.plan-list {
|
|
12132
|
-
max-height: 130px;
|
|
12133
|
-
min-height: 130px;
|
|
12134
|
-
overflow-y: auto;
|
|
12135
|
-
padding-right: 6px;
|
|
12136
|
-
}
|
|
12137
|
-
.plan-list::-webkit-scrollbar {
|
|
12138
|
-
width: 3px;
|
|
12139
|
-
background-color: #F5F5F5;
|
|
12140
|
-
}
|
|
12141
|
-
.plan-list::-webkit-scrollbar-thumb {
|
|
12142
|
-
background-color: #35254D;
|
|
12143
|
-
}
|
|
12144
|
-
div#cvv {
|
|
12145
|
-
border-top-left-radius: 0;
|
|
12146
|
-
border-bottom-left-radius: 0;
|
|
12147
|
-
border-top: 0;
|
|
12148
|
-
border-bottom: 0;
|
|
12149
|
-
border-right: 0;
|
|
12150
|
-
}
|
|
12151
|
-
div#exp_year {
|
|
12152
|
-
height: 36px;
|
|
12153
|
-
width: calc(100% + 1px);
|
|
12154
|
-
border-radius: 0;
|
|
12155
|
-
border-top: 0;
|
|
12156
|
-
border-bottom: 0;
|
|
12157
|
-
border-right: 1px solid #dee2e6;
|
|
12158
|
-
}
|
|
12159
|
-
div#exp_month {
|
|
12160
|
-
width: calc(100% + 1px);
|
|
12161
|
-
border-top-right-radius: 0;
|
|
12162
|
-
border-bottom-right-radius: 0;
|
|
12163
|
-
border: 0;
|
|
12164
|
-
border-right: 1px solid #dee2e6;
|
|
12165
|
-
}
|
|
12166
|
-
.exp-date-year-container .form-group {
|
|
12167
|
-
flex: 1;
|
|
12168
|
-
}
|
|
12169
|
-
.input-main-wrap-frac{
|
|
12170
|
-
margin:0px !important;
|
|
12171
|
-
padding:0px !important;
|
|
12172
|
-
}
|
|
12173
|
-
.toggle-num-wrapper.toggle-num-wrapper-new {
|
|
12174
|
-
border: 1px solid #dee2e6 !important;
|
|
12175
|
-
border-radius: 0.375rem !important;
|
|
12176
|
-
background-color: #F6F6F7;
|
|
12177
|
-
box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
|
|
12178
|
-
}
|
|
12179
|
-
.toggle-num-wrapper-new div#card_number {
|
|
12180
|
-
padding: 0px 10px;
|
|
12181
|
-
border: none;
|
|
12182
|
-
border-bottom: 1px solid #dee2e6;
|
|
12183
|
-
}
|
|
12184
|
-
.toggle-num-wrapper-new .card-crdi.card-expiry-new {
|
|
12185
|
-
padding: 0px 10px;
|
|
12186
|
-
}
|
|
12187
|
-
.toggle-num-wrapper-new .input-main-wrap-frac {
|
|
12188
|
-
height: 36px;
|
|
12189
|
-
}
|
|
12190
|
-
.toggle-num-wrapper-new:focus {
|
|
12191
|
-
border: 1px solid #004eab !important;
|
|
12192
|
-
}
|
|
12193
|
-
.frac-card-title-main {
|
|
12194
|
-
display: flex;
|
|
12195
|
-
align-items: start;
|
|
12196
|
-
gap: 4px;
|
|
12197
|
-
flex-direction: column;
|
|
12198
|
-
}
|
|
12199
|
-
.parent-pay-container {
|
|
12200
|
-
padding: 24px;
|
|
12201
|
-
background-color: #ffffff !important;
|
|
12202
|
-
border-radius: 15px;
|
|
12203
|
-
min-width: 300px;
|
|
12204
|
-
}
|
|
12205
|
-
|
|
12206
|
-
|
|
12207
|
-
${extraCustomCSS}
|
|
12208
|
-
|
|
12209
|
-
` });
|
|
12210
|
-
}
|
|
12211
|
-
|
|
12212
|
-
// src/app/components/Atoms/Applepay/ApplePayScriptLoader.tsx
|
|
12213
|
-
import { useEffect as useEffect20 } from "react";
|
|
12214
|
-
var applePayScriptLoaded = false;
|
|
12215
|
-
var ApplePayScriptLoader = () => {
|
|
12216
|
-
useEffect20(() => {
|
|
12217
|
-
if (applePayScriptLoaded) return;
|
|
12218
|
-
const existingScript = document.querySelector(
|
|
12219
|
-
`script[src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"]`
|
|
12220
|
-
);
|
|
12221
|
-
if (!existingScript) {
|
|
12222
|
-
const script2 = document.createElement("script");
|
|
12223
|
-
script2.src = "https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js";
|
|
12224
|
-
script2.async = true;
|
|
12225
|
-
script2.onload = () => {
|
|
12226
|
-
console.log("\u2705 Apple Pay script loaded");
|
|
12227
|
-
applePayScriptLoaded = true;
|
|
12228
|
-
console.log("ApplePaySession:", window.ApplePaySession);
|
|
12229
|
-
};
|
|
12230
|
-
script2.onerror = (err) => {
|
|
12231
|
-
console.error("\u274C Apple Pay script failed", err);
|
|
12232
|
-
};
|
|
12233
|
-
document.head.appendChild(script2);
|
|
12234
|
-
} else {
|
|
12235
|
-
applePayScriptLoaded = true;
|
|
12236
|
-
}
|
|
12237
|
-
}, []);
|
|
12238
|
-
return null;
|
|
12239
|
-
};
|
|
12240
|
-
|
|
12241
|
-
// src/app/components/Skysystemz/EmbeddedCheckout.tsx
|
|
12242
|
-
import { Fragment as Fragment22, jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
12243
|
-
var EmbeddedCheckout = ({
|
|
12244
|
-
amount,
|
|
12245
|
-
bankAmount,
|
|
12246
|
-
submitBtnText = "Pay",
|
|
12247
|
-
session_token,
|
|
12248
|
-
customerId,
|
|
12249
|
-
callback,
|
|
12250
|
-
merchantName = "merchant",
|
|
12251
|
-
isPreAuth,
|
|
12252
|
-
surcharge = "0",
|
|
12253
|
-
submitBtnClass,
|
|
12254
|
-
submitBtnIcon,
|
|
12255
|
-
isRequest,
|
|
12256
|
-
pass_fee,
|
|
12257
|
-
pass_fee_amount,
|
|
12258
|
-
require3ds = false,
|
|
12259
|
-
autoTrigger = false,
|
|
12260
|
-
isPartial,
|
|
12261
|
-
bankSurcharge,
|
|
12262
|
-
partialRef,
|
|
12263
|
-
onSubmit,
|
|
12264
|
-
onLoad,
|
|
12265
|
-
customCSS: customCSS2
|
|
12266
|
-
}) => {
|
|
12267
|
-
const [show, setShow] = useState13(false);
|
|
12268
|
-
const [loading, setLoading] = useState13(false);
|
|
12269
|
-
const [childHandleClose, setChildHandleClose] = useState13(() => () => {
|
|
12270
|
-
});
|
|
12271
|
-
const [orderGuid, setOrderGuid] = useState13(null);
|
|
12272
|
-
const [remainingAmount, setRemainingAmount] = useState13(null);
|
|
12273
|
-
const initialCommonProps = useMemo2(
|
|
12274
|
-
() => ({
|
|
12275
|
-
amount,
|
|
12276
|
-
bankAmount,
|
|
12277
|
-
submitBtnText,
|
|
12278
|
-
session_token,
|
|
12279
|
-
customerId,
|
|
12280
|
-
callback,
|
|
12281
|
-
merchantName,
|
|
12282
|
-
isPreAuth,
|
|
12283
|
-
surcharge,
|
|
12284
|
-
submitBtnClass,
|
|
12285
|
-
submitBtnIcon,
|
|
12286
|
-
isRequest,
|
|
12287
|
-
pass_fee,
|
|
12288
|
-
pass_fee_amount,
|
|
12289
|
-
require3ds,
|
|
12290
|
-
autoTrigger,
|
|
12291
|
-
setShow,
|
|
12292
|
-
setHandleCloseRef: setChildHandleClose,
|
|
12293
|
-
isPartial,
|
|
12294
|
-
bankSurcharge,
|
|
12295
|
-
partialRef
|
|
12296
|
-
}),
|
|
12297
|
-
[
|
|
12298
|
-
amount,
|
|
12299
|
-
bankAmount,
|
|
12300
|
-
submitBtnText,
|
|
12301
|
-
session_token,
|
|
12302
|
-
customerId,
|
|
12303
|
-
callback,
|
|
12304
|
-
merchantName,
|
|
12305
|
-
isPreAuth,
|
|
12306
|
-
surcharge,
|
|
12307
|
-
submitBtnClass,
|
|
12308
|
-
submitBtnIcon,
|
|
12309
|
-
isRequest,
|
|
12310
|
-
pass_fee,
|
|
12311
|
-
pass_fee_amount,
|
|
12312
|
-
require3ds,
|
|
12313
|
-
autoTrigger,
|
|
12314
|
-
isPartial,
|
|
12315
|
-
bankSurcharge,
|
|
12316
|
-
partialRef
|
|
12317
|
-
]
|
|
12318
|
-
);
|
|
12319
|
-
const [commonProps, setCommonProps] = useState13(initialCommonProps);
|
|
12320
|
-
useEffect21(() => {
|
|
12321
|
-
if (show) {
|
|
12322
|
-
setCommonProps(initialCommonProps);
|
|
12323
|
-
}
|
|
12324
|
-
}, [show, initialCommonProps]);
|
|
12325
|
-
const getskyosOrderDetails = async () => {
|
|
12326
|
-
var _a;
|
|
12327
|
-
setLoading(true);
|
|
12328
|
-
try {
|
|
12329
|
-
const res = await axios11.get(
|
|
12330
|
-
`${masterBaseUrl}api/v1/gateway/get-order-details/${session_token}`,
|
|
12331
|
-
{ params: { isPartial, partialRef } }
|
|
12332
|
-
);
|
|
12333
|
-
if ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.result) {
|
|
12334
|
-
const data = res.data.data;
|
|
12335
|
-
if (data == null ? void 0 : data.orderGuid) {
|
|
12336
|
-
setOrderGuid(data == null ? void 0 : data.orderGuid);
|
|
12337
|
-
setRemainingAmount(data == null ? void 0 : data.remainingAmount);
|
|
12338
|
-
}
|
|
12339
|
-
setCommonProps((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
12340
|
-
amount: data.amount,
|
|
12341
|
-
pass_fee_amount: data.pass_fee_amount,
|
|
12342
|
-
pass_fee: data.pass_fee
|
|
12343
|
-
}));
|
|
12344
|
-
}
|
|
12345
|
-
} catch (error) {
|
|
12346
|
-
console.log("error while getting skyosorderdeatils", error);
|
|
12347
|
-
} finally {
|
|
12348
|
-
setLoading(false);
|
|
12349
|
-
}
|
|
12350
|
-
};
|
|
12351
|
-
useEffect21(() => {
|
|
11043
|
+
useEffect16(() => {
|
|
12352
11044
|
if (show && isPartial && partialRef) {
|
|
12353
11045
|
getskyosOrderDetails();
|
|
12354
11046
|
}
|
|
12355
11047
|
}, [show, isPartial, partialRef]);
|
|
12356
|
-
|
|
12357
|
-
|
|
12358
|
-
|
|
12359
|
-
|
|
12360
|
-
|
|
12361
|
-
|
|
12362
|
-
|
|
12363
|
-
|
|
12364
|
-
|
|
12365
|
-
}
|
|
12366
|
-
console.log(`ApplePaySession: ${supported}, canMakePayments: ${canPay}`);
|
|
12367
|
-
}, []);
|
|
12368
|
-
return /* @__PURE__ */ jsxs23(Fragment22, { children: [
|
|
12369
|
-
/* @__PURE__ */ jsx39("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
|
|
12370
|
-
/* @__PURE__ */ jsx39(DataScript, {}),
|
|
12371
|
-
/* @__PURE__ */ jsx39(FractalTokenizerScript, {}),
|
|
12372
|
-
/* @__PURE__ */ jsx39(SkyChargewidgetstyles, {}),
|
|
12373
|
-
/* @__PURE__ */ jsx39(CardBankRadioStyles, {}),
|
|
12374
|
-
/* @__PURE__ */ jsx39(CustomModal2styles_default, {}),
|
|
12375
|
-
/* @__PURE__ */ jsx39(DataCapScriptLoader, {}),
|
|
12376
|
-
/* @__PURE__ */ jsx39(ApplePayScriptLoader, {}),
|
|
12377
|
-
/* @__PURE__ */ jsx39(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS2 }),
|
|
12378
|
-
!autoTrigger && /* @__PURE__ */ jsxs23("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
|
|
11048
|
+
return /* @__PURE__ */ jsxs20(Fragment19, { children: [
|
|
11049
|
+
/* @__PURE__ */ jsx33("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
|
|
11050
|
+
/* @__PURE__ */ jsx33(DataScript, {}),
|
|
11051
|
+
/* @__PURE__ */ jsx33(FractalTokenizerScript, {}),
|
|
11052
|
+
/* @__PURE__ */ jsx33(SkyChargewidgetstyles, {}),
|
|
11053
|
+
/* @__PURE__ */ jsx33(CardBankRadioStyles, {}),
|
|
11054
|
+
/* @__PURE__ */ jsx33(CustomModal2styles_default, {}),
|
|
11055
|
+
/* @__PURE__ */ jsx33(DataCapScriptLoader, {}),
|
|
11056
|
+
!autoTrigger && /* @__PURE__ */ jsxs20("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
|
|
12379
11057
|
submitBtnText,
|
|
12380
11058
|
submitBtnIcon
|
|
12381
11059
|
] }),
|
|
12382
|
-
!autoTrigger ? /* @__PURE__ */
|
|
11060
|
+
!autoTrigger ? /* @__PURE__ */ jsx33(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx33(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx33(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
|
|
12383
11061
|
] });
|
|
12384
11062
|
};
|
|
12385
11063
|
export {
|
|
12386
11064
|
AddCardEasyPay as AddCard,
|
|
12387
11065
|
CardOnFile,
|
|
12388
|
-
EmbeddedCheckout,
|
|
12389
11066
|
GetPaymentPage,
|
|
12390
11067
|
PartialPayment,
|
|
12391
11068
|
PaymentWidget,
|