@pinerohit11/testwidget 0.1.33 → 0.1.34
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.cjs +260 -252
- package/dist/index.js +260 -252
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -54,227 +54,15 @@ var import_bootstrap_min2 = require("bootstrap/dist/css/bootstrap.min.css");
|
|
|
54
54
|
|
|
55
55
|
// src/app/components/Greet.tsx
|
|
56
56
|
var import_axios = __toESM(require("axios"), 1);
|
|
57
|
-
var
|
|
57
|
+
var import_react2 = __toESM(require("react"), 1);
|
|
58
58
|
var import_react_bootstrap = require("react-bootstrap");
|
|
59
59
|
var import_bootstrap_min = require("bootstrap/dist/css/bootstrap.min.css");
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
const [toggleQr, setToggleQr] = (0, import_react.useState)(false);
|
|
67
|
-
const [formData, setFormData] = (0, import_react.useState)({
|
|
68
|
-
name: "John Doe",
|
|
69
|
-
card_number: "4761 7310 0000 0043",
|
|
70
|
-
exp_month: "12",
|
|
71
|
-
exp_year: "2024",
|
|
72
|
-
cvv: "201",
|
|
73
|
-
zip: ""
|
|
74
|
-
});
|
|
75
|
-
const [loading, setLoading] = (0, import_react.useState)(false);
|
|
76
|
-
const [show, setShow] = (0, import_react.useState)(false);
|
|
77
|
-
const handleSubmit = async (e) => {
|
|
78
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
79
|
-
e.preventDefault();
|
|
80
|
-
const data = {
|
|
81
|
-
description: "widget payment",
|
|
82
|
-
amount: amount || "1.00",
|
|
83
|
-
phone_number: "1234567908",
|
|
84
|
-
zip: formData.zip,
|
|
85
|
-
orderId: orderId || "",
|
|
86
|
-
fractalpayPublicKey: fractalPayClientKey
|
|
87
|
-
};
|
|
88
|
-
if (Object.keys(error).length < 1) {
|
|
89
|
-
try {
|
|
90
|
-
setLoading(true);
|
|
91
|
-
const res = await import_axios.default.post(`${baseUrl}create-widget-order`, data, {
|
|
92
|
-
headers: {
|
|
93
|
-
"Content-Type": "application/json"
|
|
94
|
-
}
|
|
95
|
-
});
|
|
96
|
-
if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
|
|
97
|
-
console.log("token", (_b = res.data) == null ? void 0 : _b.data);
|
|
98
|
-
setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
|
|
99
|
-
const tokenCallback = async (response) => {
|
|
100
|
-
var _a2, _b2, _c2;
|
|
101
|
-
console.log("response for token call back", response);
|
|
102
|
-
if (response.Error) {
|
|
103
|
-
alert("if");
|
|
104
|
-
console.log("Error: ", response);
|
|
105
|
-
setLoading(false);
|
|
106
|
-
} else {
|
|
107
|
-
const headers = {
|
|
108
|
-
"Content-Type": "application/x-www-form-urlencoded"
|
|
109
|
-
};
|
|
110
|
-
const quickData = __spreadValues({
|
|
111
|
-
name: formData.name,
|
|
112
|
-
postal_code: formData.zip
|
|
113
|
-
}, response);
|
|
114
|
-
try {
|
|
115
|
-
const resp = await import_axios.default.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
|
|
116
|
-
headers
|
|
117
|
-
});
|
|
118
|
-
setLoading(false);
|
|
119
|
-
console.log("quick response", resp);
|
|
120
|
-
if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
|
|
121
|
-
console.log("Payment success!", resp == null ? void 0 : resp.data);
|
|
122
|
-
setFormData({
|
|
123
|
-
name: "John Doe",
|
|
124
|
-
card_number: "4761 7310 0000 0043",
|
|
125
|
-
exp_month: "12",
|
|
126
|
-
exp_year: "2024",
|
|
127
|
-
cvv: "201",
|
|
128
|
-
zip: ""
|
|
129
|
-
});
|
|
130
|
-
} else {
|
|
131
|
-
console.log("Payment failed!", resp == null ? void 0 : resp.data);
|
|
132
|
-
}
|
|
133
|
-
} catch (error2) {
|
|
134
|
-
console.log("Error: ", error2);
|
|
135
|
-
setLoading(false);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
};
|
|
139
|
-
window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
|
|
140
|
-
} else {
|
|
141
|
-
setLoading(false);
|
|
142
|
-
console.log("res", (_g = res.data) == null ? void 0 : _g.data);
|
|
143
|
-
}
|
|
144
|
-
} catch (error2) {
|
|
145
|
-
setLoading(false);
|
|
146
|
-
console.log(error2);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
const handleCardFormat = (numericValue) => {
|
|
151
|
-
const cleaned = ("" + numericValue).replace(/\D/g, "");
|
|
152
|
-
const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
|
|
153
|
-
if (match) {
|
|
154
|
-
return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
|
|
155
|
-
}
|
|
156
|
-
return numericValue;
|
|
157
|
-
};
|
|
158
|
-
const handleCardNumberChange = (value) => {
|
|
159
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
|
|
160
|
-
if (value && value.match(/[a-zA-Z]/)) {
|
|
161
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
162
|
-
card_number: "Invalid input. Please enter only numbers."
|
|
163
|
-
}));
|
|
164
|
-
} else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
|
|
165
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
166
|
-
card_number: "Invalid Card Number"
|
|
167
|
-
}));
|
|
168
|
-
} else if (!value.length) {
|
|
169
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
170
|
-
card_number: "Card Number required"
|
|
171
|
-
}));
|
|
172
|
-
} else {
|
|
173
|
-
setError({});
|
|
174
|
-
}
|
|
175
|
-
};
|
|
176
|
-
const handleMonthChange = (value) => {
|
|
177
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
|
|
178
|
-
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
|
|
179
|
-
setError({});
|
|
180
|
-
} else if (!value.length) {
|
|
181
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
182
|
-
exp_month: "Month is required"
|
|
183
|
-
}));
|
|
184
|
-
} else {
|
|
185
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
186
|
-
exp_month: "Value should be between 1 and 12"
|
|
187
|
-
}));
|
|
188
|
-
}
|
|
189
|
-
};
|
|
190
|
-
const handleYearChange = (value) => {
|
|
191
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
|
|
192
|
-
if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
|
|
193
|
-
setError({});
|
|
194
|
-
} else if (!value.length) {
|
|
195
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
196
|
-
exp_year: "Year is required"
|
|
197
|
-
}));
|
|
198
|
-
} else {
|
|
199
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
200
|
-
exp_year: "Invalid Expiration Date."
|
|
201
|
-
}));
|
|
202
|
-
}
|
|
203
|
-
};
|
|
204
|
-
const handleCVVChange = (value) => {
|
|
205
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
|
|
206
|
-
if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
|
|
207
|
-
setError({});
|
|
208
|
-
} else if (!value.length) {
|
|
209
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
210
|
-
cvv: "CVV is required"
|
|
211
|
-
}));
|
|
212
|
-
} else {
|
|
213
|
-
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
214
|
-
cvv: "Invalid CVV."
|
|
215
|
-
}));
|
|
216
|
-
}
|
|
217
|
-
};
|
|
218
|
-
const handleChange = (e) => {
|
|
219
|
-
const token = e.target.getAttribute("data-token") || "";
|
|
220
|
-
const value = e.target.value;
|
|
221
|
-
setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
|
|
222
|
-
if (token === "card_number") {
|
|
223
|
-
handleCardNumberChange(value);
|
|
224
|
-
}
|
|
225
|
-
if (token === "exp_month") {
|
|
226
|
-
handleMonthChange(value);
|
|
227
|
-
}
|
|
228
|
-
if (token === "exp_year") {
|
|
229
|
-
handleYearChange(value);
|
|
230
|
-
}
|
|
231
|
-
if (token === "cvv") {
|
|
232
|
-
handleCVVChange(value);
|
|
233
|
-
}
|
|
234
|
-
};
|
|
235
|
-
(0, import_react.useEffect)(() => {
|
|
236
|
-
const scriptId = "my-script";
|
|
237
|
-
const existingScript = document.getElementById(scriptId);
|
|
238
|
-
if (!existingScript) {
|
|
239
|
-
const script = document.createElement("script");
|
|
240
|
-
script.src = "https://token-cert.dcap.com/v1/client";
|
|
241
|
-
script.id = scriptId;
|
|
242
|
-
script.async = true;
|
|
243
|
-
script.onload = () => {
|
|
244
|
-
if (typeof window !== "undefined" && window.DatacapWebToken) {
|
|
245
|
-
console.log("DatacapWebToken", window.DatacapWebToken);
|
|
246
|
-
} else {
|
|
247
|
-
console.log("DatacapWebToken is not loaded yet.");
|
|
248
|
-
}
|
|
249
|
-
};
|
|
250
|
-
document.head.appendChild(script);
|
|
251
|
-
}
|
|
252
|
-
return () => {
|
|
253
|
-
const script = document.getElementById(scriptId);
|
|
254
|
-
if (script) {
|
|
255
|
-
document.head.removeChild(script);
|
|
256
|
-
}
|
|
257
|
-
};
|
|
258
|
-
}, []);
|
|
259
|
-
(0, import_react.useEffect)(() => {
|
|
260
|
-
const link = document.createElement("link");
|
|
261
|
-
link.rel = "stylesheet";
|
|
262
|
-
link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";
|
|
263
|
-
document.head.appendChild(link);
|
|
264
|
-
return () => {
|
|
265
|
-
document.head.removeChild(link);
|
|
266
|
-
};
|
|
267
|
-
}, []);
|
|
268
|
-
const handleClose = () => {
|
|
269
|
-
setShow(false);
|
|
270
|
-
};
|
|
271
|
-
const handleOpen = () => {
|
|
272
|
-
console.log("open");
|
|
273
|
-
setShow(true);
|
|
274
|
-
};
|
|
275
|
-
console.log(show, "open");
|
|
276
|
-
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("style", null, `
|
|
277
|
-
|
|
60
|
+
|
|
61
|
+
// src/app/components/CustomStyle.tsx
|
|
62
|
+
var import_react = __toESM(require("react"), 1);
|
|
63
|
+
var CustomStyle = (props) => {
|
|
64
|
+
return /* @__PURE__ */ import_react.default.createElement("style", null, `
|
|
65
|
+
|
|
278
66
|
|
|
279
67
|
body {
|
|
280
68
|
background: #d5d5d5;
|
|
@@ -959,7 +747,227 @@ body {
|
|
|
959
747
|
border:0;
|
|
960
748
|
height: 43px;
|
|
961
749
|
}
|
|
962
|
-
`)
|
|
750
|
+
`);
|
|
751
|
+
};
|
|
752
|
+
|
|
753
|
+
// src/app/components/Greet.tsx
|
|
754
|
+
function PaywithFractal({ name, amount, orderId, fractalPayClientKey }) {
|
|
755
|
+
const baseUrl = "http://192.168.1.52:8082/";
|
|
756
|
+
const masterBaseUrl = "http://192.168.1.52:8081/";
|
|
757
|
+
console.log(name, "name", window == null ? void 0 : window.DatacapWebToken);
|
|
758
|
+
const [dcToken, setDcToken] = (0, import_react2.useState)("");
|
|
759
|
+
const [error, setError] = (0, import_react2.useState)({});
|
|
760
|
+
const [toggleQr, setToggleQr] = (0, import_react2.useState)(false);
|
|
761
|
+
const [formData, setFormData] = (0, import_react2.useState)({
|
|
762
|
+
name: "John Doe",
|
|
763
|
+
card_number: "4761 7310 0000 0043",
|
|
764
|
+
exp_month: "12",
|
|
765
|
+
exp_year: "2024",
|
|
766
|
+
cvv: "201",
|
|
767
|
+
zip: ""
|
|
768
|
+
});
|
|
769
|
+
const [loading, setLoading] = (0, import_react2.useState)(false);
|
|
770
|
+
const [show, setShow] = (0, import_react2.useState)(false);
|
|
771
|
+
const handleSubmit = async (e) => {
|
|
772
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
773
|
+
e.preventDefault();
|
|
774
|
+
const data = {
|
|
775
|
+
description: "widget payment",
|
|
776
|
+
amount: amount || "1.00",
|
|
777
|
+
phone_number: "1234567908",
|
|
778
|
+
zip: formData.zip,
|
|
779
|
+
orderId: orderId || "",
|
|
780
|
+
fractalpayPublicKey: fractalPayClientKey
|
|
781
|
+
};
|
|
782
|
+
if (Object.keys(error).length < 1) {
|
|
783
|
+
try {
|
|
784
|
+
setLoading(true);
|
|
785
|
+
const res = await import_axios.default.post(`${baseUrl}create-widget-order`, data, {
|
|
786
|
+
headers: {
|
|
787
|
+
"Content-Type": "application/json"
|
|
788
|
+
}
|
|
789
|
+
});
|
|
790
|
+
if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
|
|
791
|
+
console.log("token", (_b = res.data) == null ? void 0 : _b.data);
|
|
792
|
+
setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
|
|
793
|
+
const tokenCallback = async (response) => {
|
|
794
|
+
var _a2, _b2, _c2;
|
|
795
|
+
console.log("response for token call back", response);
|
|
796
|
+
if (response.Error) {
|
|
797
|
+
alert("if");
|
|
798
|
+
console.log("Error: ", response);
|
|
799
|
+
setLoading(false);
|
|
800
|
+
} else {
|
|
801
|
+
const headers = {
|
|
802
|
+
"Content-Type": "application/x-www-form-urlencoded"
|
|
803
|
+
};
|
|
804
|
+
const quickData = __spreadValues({
|
|
805
|
+
name: formData.name,
|
|
806
|
+
postal_code: formData.zip
|
|
807
|
+
}, response);
|
|
808
|
+
try {
|
|
809
|
+
const resp = await import_axios.default.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
|
|
810
|
+
headers
|
|
811
|
+
});
|
|
812
|
+
setLoading(false);
|
|
813
|
+
console.log("quick response", resp);
|
|
814
|
+
if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
|
|
815
|
+
console.log("Payment success!", resp == null ? void 0 : resp.data);
|
|
816
|
+
setFormData({
|
|
817
|
+
name: "John Doe",
|
|
818
|
+
card_number: "4761 7310 0000 0043",
|
|
819
|
+
exp_month: "12",
|
|
820
|
+
exp_year: "2024",
|
|
821
|
+
cvv: "201",
|
|
822
|
+
zip: ""
|
|
823
|
+
});
|
|
824
|
+
} else {
|
|
825
|
+
console.log("Payment failed!", resp == null ? void 0 : resp.data);
|
|
826
|
+
}
|
|
827
|
+
} catch (error2) {
|
|
828
|
+
console.log("Error: ", error2);
|
|
829
|
+
setLoading(false);
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
};
|
|
833
|
+
window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
|
|
834
|
+
} else {
|
|
835
|
+
setLoading(false);
|
|
836
|
+
console.log("res", (_g = res.data) == null ? void 0 : _g.data);
|
|
837
|
+
}
|
|
838
|
+
} catch (error2) {
|
|
839
|
+
setLoading(false);
|
|
840
|
+
console.log(error2);
|
|
841
|
+
}
|
|
842
|
+
}
|
|
843
|
+
};
|
|
844
|
+
const handleCardFormat = (numericValue) => {
|
|
845
|
+
const cleaned = ("" + numericValue).replace(/\D/g, "");
|
|
846
|
+
const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
|
|
847
|
+
if (match) {
|
|
848
|
+
return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
|
|
849
|
+
}
|
|
850
|
+
return numericValue;
|
|
851
|
+
};
|
|
852
|
+
const handleCardNumberChange = (value) => {
|
|
853
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
|
|
854
|
+
if (value && value.match(/[a-zA-Z]/)) {
|
|
855
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
856
|
+
card_number: "Invalid input. Please enter only numbers."
|
|
857
|
+
}));
|
|
858
|
+
} else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
|
|
859
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
860
|
+
card_number: "Invalid Card Number"
|
|
861
|
+
}));
|
|
862
|
+
} else if (!value.length) {
|
|
863
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
864
|
+
card_number: "Card Number required"
|
|
865
|
+
}));
|
|
866
|
+
} else {
|
|
867
|
+
setError({});
|
|
868
|
+
}
|
|
869
|
+
};
|
|
870
|
+
const handleMonthChange = (value) => {
|
|
871
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
|
|
872
|
+
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
|
|
873
|
+
setError({});
|
|
874
|
+
} else if (!value.length) {
|
|
875
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
876
|
+
exp_month: "Month is required"
|
|
877
|
+
}));
|
|
878
|
+
} else {
|
|
879
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
880
|
+
exp_month: "Value should be between 1 and 12"
|
|
881
|
+
}));
|
|
882
|
+
}
|
|
883
|
+
};
|
|
884
|
+
const handleYearChange = (value) => {
|
|
885
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
|
|
886
|
+
if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
|
|
887
|
+
setError({});
|
|
888
|
+
} else if (!value.length) {
|
|
889
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
890
|
+
exp_year: "Year is required"
|
|
891
|
+
}));
|
|
892
|
+
} else {
|
|
893
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
894
|
+
exp_year: "Invalid Expiration Date."
|
|
895
|
+
}));
|
|
896
|
+
}
|
|
897
|
+
};
|
|
898
|
+
const handleCVVChange = (value) => {
|
|
899
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
|
|
900
|
+
if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
|
|
901
|
+
setError({});
|
|
902
|
+
} else if (!value.length) {
|
|
903
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
904
|
+
cvv: "CVV is required"
|
|
905
|
+
}));
|
|
906
|
+
} else {
|
|
907
|
+
setError((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
908
|
+
cvv: "Invalid CVV."
|
|
909
|
+
}));
|
|
910
|
+
}
|
|
911
|
+
};
|
|
912
|
+
const handleChange = (e) => {
|
|
913
|
+
const token = e.target.getAttribute("data-token") || "";
|
|
914
|
+
const value = e.target.value;
|
|
915
|
+
setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
|
|
916
|
+
if (token === "card_number") {
|
|
917
|
+
handleCardNumberChange(value);
|
|
918
|
+
}
|
|
919
|
+
if (token === "exp_month") {
|
|
920
|
+
handleMonthChange(value);
|
|
921
|
+
}
|
|
922
|
+
if (token === "exp_year") {
|
|
923
|
+
handleYearChange(value);
|
|
924
|
+
}
|
|
925
|
+
if (token === "cvv") {
|
|
926
|
+
handleCVVChange(value);
|
|
927
|
+
}
|
|
928
|
+
};
|
|
929
|
+
(0, import_react2.useEffect)(() => {
|
|
930
|
+
const scriptId = "my-script";
|
|
931
|
+
const existingScript = document.getElementById(scriptId);
|
|
932
|
+
if (!existingScript) {
|
|
933
|
+
const script = document.createElement("script");
|
|
934
|
+
script.src = "https://token-cert.dcap.com/v1/client";
|
|
935
|
+
script.id = scriptId;
|
|
936
|
+
script.async = true;
|
|
937
|
+
script.onload = () => {
|
|
938
|
+
if (typeof window !== "undefined" && window.DatacapWebToken) {
|
|
939
|
+
console.log("DatacapWebToken", window.DatacapWebToken);
|
|
940
|
+
} else {
|
|
941
|
+
console.log("DatacapWebToken is not loaded yet.");
|
|
942
|
+
}
|
|
943
|
+
};
|
|
944
|
+
document.head.appendChild(script);
|
|
945
|
+
}
|
|
946
|
+
return () => {
|
|
947
|
+
const script = document.getElementById(scriptId);
|
|
948
|
+
if (script) {
|
|
949
|
+
document.head.removeChild(script);
|
|
950
|
+
}
|
|
951
|
+
};
|
|
952
|
+
}, []);
|
|
953
|
+
(0, import_react2.useEffect)(() => {
|
|
954
|
+
const link = document.createElement("link");
|
|
955
|
+
link.rel = "stylesheet";
|
|
956
|
+
link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";
|
|
957
|
+
document.head.appendChild(link);
|
|
958
|
+
return () => {
|
|
959
|
+
document.head.removeChild(link);
|
|
960
|
+
};
|
|
961
|
+
}, []);
|
|
962
|
+
const handleClose = () => {
|
|
963
|
+
setShow(false);
|
|
964
|
+
};
|
|
965
|
+
const handleOpen = () => {
|
|
966
|
+
console.log("open");
|
|
967
|
+
setShow(true);
|
|
968
|
+
};
|
|
969
|
+
console.log(show, "open");
|
|
970
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(CustomStyle, null), /* @__PURE__ */ import_react2.default.createElement("div", { className: "w-100 text-center" }, /* @__PURE__ */ import_react2.default.createElement(import_react_bootstrap.Button, { onClick: handleOpen }, "Show")), /* @__PURE__ */ import_react2.default.createElement(
|
|
963
971
|
import_react_bootstrap.Modal,
|
|
964
972
|
{
|
|
965
973
|
show,
|
|
@@ -968,7 +976,7 @@ body {
|
|
|
968
976
|
keyboard: false,
|
|
969
977
|
size: "lg"
|
|
970
978
|
},
|
|
971
|
-
/* @__PURE__ */
|
|
979
|
+
/* @__PURE__ */ import_react2.default.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ import_react2.default.createElement("div", { className: "bg-black" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "container bg-black" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "row bg-light no-gutters" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "col-sm-12" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "bd-example bd-example-tabs right-tabs mttabs m-3 " }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react2.default.createElement(
|
|
972
980
|
"button",
|
|
973
981
|
{
|
|
974
982
|
className: "close-pop",
|
|
@@ -976,7 +984,7 @@ body {
|
|
|
976
984
|
setShow(false);
|
|
977
985
|
}
|
|
978
986
|
},
|
|
979
|
-
/* @__PURE__ */
|
|
987
|
+
/* @__PURE__ */ import_react2.default.createElement(
|
|
980
988
|
"svg",
|
|
981
989
|
{
|
|
982
990
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -984,7 +992,7 @@ body {
|
|
|
984
992
|
height: 37,
|
|
985
993
|
viewBox: "0 0 21 21"
|
|
986
994
|
},
|
|
987
|
-
/* @__PURE__ */
|
|
995
|
+
/* @__PURE__ */ import_react2.default.createElement(
|
|
988
996
|
"path",
|
|
989
997
|
{
|
|
990
998
|
fill: "none",
|
|
@@ -995,14 +1003,14 @@ body {
|
|
|
995
1003
|
}
|
|
996
1004
|
)
|
|
997
1005
|
)
|
|
998
|
-
), /* @__PURE__ */
|
|
1006
|
+
), /* @__PURE__ */ import_react2.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "comp-name" }, /* @__PURE__ */ import_react2.default.createElement(
|
|
999
1007
|
"img",
|
|
1000
1008
|
{
|
|
1001
1009
|
src: "https://invoicestaging.skysystemz.com/assets/products/65c49a2740ff1.png",
|
|
1002
1010
|
alt: "",
|
|
1003
1011
|
className: "client-logo"
|
|
1004
1012
|
}
|
|
1005
|
-
)), /* @__PURE__ */
|
|
1013
|
+
)), /* @__PURE__ */ import_react2.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react2.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react2.default.createElement("h1", null, "Pay"), /* @__PURE__ */ import_react2.default.createElement(
|
|
1006
1014
|
"i",
|
|
1007
1015
|
{
|
|
1008
1016
|
className: "fa fa-qrcode fa-2x",
|
|
@@ -1010,23 +1018,23 @@ body {
|
|
|
1010
1018
|
title: "Show QR Code",
|
|
1011
1019
|
onClick: () => setToggleQr(!toggleQr)
|
|
1012
1020
|
}
|
|
1013
|
-
)), /* @__PURE__ */
|
|
1021
|
+
)), /* @__PURE__ */ import_react2.default.createElement("div", { id: "qrCode", style: {
|
|
1014
1022
|
display: toggleQr ? "block" : "none"
|
|
1015
|
-
} }, /* @__PURE__ */
|
|
1023
|
+
} }, /* @__PURE__ */ import_react2.default.createElement(
|
|
1016
1024
|
"img",
|
|
1017
1025
|
{
|
|
1018
1026
|
src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARQAAAEUCAYAAADqcMl5AAAAAklEQVR4AewaftIAABJaSURBVO3BQY7gRhLAQFLo/3+ZO8c8FSCoemwvMsL+YK21LnhYa61LHtZa65KHtda65GGttS55WGutSx7WWuuSh7XWuuRhrbUueVhrrUse1lrrkoe11rrkYa21LnlYa61LHtZa65KHtda65IePVP6miknlpGJSualiUjmpOFGZKk5UpopJ5YuKE5WpYlI5qZhU3qiYVKaKSeWkYlI5qXhD5aRiUvmbKr54WGutSx7WWuuSh7XWuuSHyypuUvlNFW+oTCpTxRsqU8UXKlPFicqJylRxonJScVLxhspU8UbFGxX/pIqbVG56WGutSx7WWuuSh7XWuuSHX6byRsVNKlPFpPJGxW9SmSreqJhUTiomlROVk4ovVL5QOak4UTlR+TdReaPiNz2stdYlD2utdcnDWmtd8sN/XMWkMlVMKlPFpHKiMlWcqJxUTCqTyk0Vk8pJxaQyVUwqN1WcqEwVk8qk8kXFpPJGxaTy/+RhrbUueVhrrUse1lrrkh/+z6lMFScVN1VMKpPKVDGpTBWTyknFFyonKlPFpDJVTConKjdVnKhMFZPKScWkMqlMFf9PHtZa65KHtda65GGttS754ZdV/CaVqWJS+UJlqjhROamYVCaVE5WpYlKZKt6oeEPlpGJSmSreUJkq3lCZKt6omFTeqLip4t/kYa21LnlYa61LHtZa65IfLlP5L1GZKt5QmSomlTcqJpWpYlKZKiaVqeINlaniDZWpYlKZKiaVqWJSmSpOKiaVqWJSmSpuUpkqTlT+zR7WWuuSh7XWuuRhrbUu+eGjin+zipOKSeWNikllqjipmFS+UJkqJpU3Kr6omFROVN6omFSmikllqphUpopJZaqYVKaKSeWNiv+Sh7XWuuRhrbUueVhrrUvsD36RyhsVk8pUMamcVJyofFHxhcpJxaQyVUwqU8Wk8jdVnKhMFZPKGxVvqJxUnKhMFScqN1WcqLxR8cXDWmtd8rDWWpc8rLXWJT98pDJV3FQxqUwVN1VMKicqU8WkMlWcVJxUTCq/qeJE5Q2VqeKkYlI5UZkqJpWp4kTlDZWTihOVqeJE5Y2K3/Sw1lqXPKy11iUPa611yQ8fVZxUTConKicVk8pU8UbFScWk8jep/E0Vk8pJxRsVb6i8UTGpTBUnKlPFTSonFZPKVDFVTCpTxaRyUvHFw1prXfKw1lqXPKy11iU//GUVk8pJxRcqU8VvUjlRmSomlZOKSWWqmFS+qJhU3lA5qZhU/iaVE5UvKr6omFSmiqliUpkqJpWbHtZa65KHtda65GGttS754TKVqWJSmSpOVP5JKlPFicobKlPFb6qYVCaV31TxRcWkMqmcqEwVk8pJxRcVb6icqLyhMlXc9LDWWpc8rLXWJQ9rrXWJ/cEHKlPFicpJxYnKVDGp/JMqTlT+pooTlTcqTlTeqDhRmSq+UDmpOFH5omJSeaNiUjmpOFGZKr54WGutSx7WWuuSh7XWuuSHjyomlaliqphUTlTeqJhUpopJZap4Q+WmihOVk4oTlTcq3qg4UZlUpoqp4kTljYo3VKaKSeWkYlI5qbhJZar4TQ9rrXXJw1prXfKw1lqX/PCRyhcVk8pUMalMKlPFFyonFW+o3FRxonJSMam8ofJGxUnFpPJGxRcqb6icVEwqU8WJylQxqZxUTCp/08Naa13ysNZalzystdYl9gf/IionFScqU8WJylQxqbxRcaIyVZyoTBWTylQxqZxUnKhMFZPKVDGpnFR8oTJVTConFZPKVDGpTBVfqEwVb6icVJyoTBVfPKy11iUPa611ycNaa13ywy9TmSomlanib6qYVE4qJpUTlTdUTlS+qDhROVGZKiaVk4pJ5aRiUvmiYlKZKk4qJpU3KqaKSeWLin/Sw1prXfKw1lqXPKy11iX2Bx+oTBWTyk0Vk8pUMalMFb9J5Y2KE5XfVDGpTBVfqJxUTConFW+oTBUnKjdVTConFW+ofFFx08Naa13ysNZalzystdYl9gcfqEwV/2Yqb1RMKlPFFypTxRsqU8WkMlVMKlPFv5nKGxVvqEwVk8obFW+oTBWTyknFP+lhrbUueVhrrUse1lrrkh8+qphUpopJZao4UZkqJpWp4o2KNyomlTcqTlTeqJhUvlA5qThRmSomlaliUjmp+ELlpoovVKaKSeWkYlJ5o+Kmh7XWuuRhrbUueVhrrUvsDz5QeaPiJpWTiknli4ovVE4qJpWp4kRlqphUTireUJkqJpU3Kr5QmSpOVE4qTlTeqDhRmSr+Sx7WWuuSh7XWuuRhrbUu+eGjihOVE5WpYlKZKk4qvqi4SeWLihOVqWJSmSpOVN6oOKm4SeWkYlKZKk4q3qh4Q2WqmComlaliUvmi4qaHtda65GGttS55WGutS374SGWqOFF5o2JSmSomlZOKE5WpYlI5qZgqTlQmlaliUvlNFScqX6hMFZPKGxWTylQxqUwVk8pJxYnKVDFV3FTxhsqkMlV88bDWWpc8rLXWJQ9rrXXJDx9VTCpTxRcqU8WkMlW8oTJVnFR8ofKGylTxhcpU8YXKVPGGylRxonJSMal8UXGiMlWcqEwVb6j8mz2stdYlD2utdcnDWmtd8sNlFW+onFRMKm+oTBU3qZxUTBVvqPybVLyhMlVMKpPKVDFVTCpvVEwqU8WkMlV8UTGpnFScqJxUTCq/6WGttS55WGutSx7WWusS+4MPVKaKSWWqmFS+qJhUpoo3VE4qTlS+qJhUpopJZaq4SWWqOFE5qZhUpooTlZOKL1SmiknlN1VMKl9U/E0Pa611ycNaa13ysNZal/xwmcqJyhsVb1T8m1RMKm9UTCpvqEwVk8pJxYnKScWkMlVMKlPFVDGpnKhMFZPKicpUcZPKScUbKpPKGxVfPKy11iUPa611ycNaa13yw2UVk8oXKm9UTCpTxRsVb1RMKlPFpDKpvFExqdyk8oXKVDGp/KaKSWWqeEPljYo3VG6qmFSmipse1lrrkoe11rrkYa21Lvnho4pJ5YuKN1TeUPlCZaqYVE5UpopJZao4UXlD5aTiDZWTipOKSWVSOamYVL5QOan4TRVvqEwVk8pUMalMFV88rLXWJQ9rrXXJw1prXfLDZRUnKm+oTBUnKlPFGyqTyonKVDGp3KRyUjGpTBWTyonKVPGFylQxVZyoTCpTxYnKpDJVvKFyUjGpvKEyVbxRMalMFTc9rLXWJQ9rrXXJw1prXfLDRyq/qeJvqjhROVH5omJSmSreqPii4o2KL1SmipOKE5Wp4jdV3FTxhspJxaQyVXzxsNZalzystdYlD2utdYn9wT9I5aaKE5WbKiaVNyreUDmpOFH5TRWTyknFFypTxRsqJxWTylTxhspvqjhRmSpuelhrrUse1lrrkoe11rrE/uADlS8q/p+oTBV/k8pJxYnKVDGpTBV/k8pJxaQyVdykMlXcpDJVnKicVEwqU8UXD2utdcnDWmtd8rDWWpf8cFnFicqkclPFicpUMan8k1S+qJhUTlSmipOKSWWqmFSmijdUpoovVN6o+ELlpGJSmSreqPgnPay11iUPa611ycNaa13yw2Uqb1RMKlPFicqkMlV8UXGiMlWcqEwVU8WJyonKicpUcaLyN6lMFZPKVHFSMalMFZPKGxUnFZPKScWkMlWcqJxU/KaHtda65GGttS55WGutS374yyreUJkqTipOKt5QmSreUPlC5TepfFHxN1VMKlPFpDJVfKEyVUwqU8VUMam8oTJVTBX/pIe11rrkYa21LnlYa61L7A8+UJkqJpUvKiaVqeINlaliUpkqJpWpYlKZKiaVNypuUpkqJpUvKm5S+aJiUpkq/iaVNypOVKaKN1Smii8e1lrrkoe11rrkYa21Lvnhl1VMKlPFpDKp/E0Vk8o/SWWqmFSmiknlpooTlZOKSeWNiknlRGWqOFE5qfiiYlI5UTmpmFSmikllqrjpYa21LnlYa61LHtZa6xL7gw9UTiomlaniDZWp4kTli4ovVKaKL1SmiknlpOJE5aTiDZWTiknlpOINlTcqJpUvKiaVqeILlZOKv+lhrbUueVhrrUse1lrrkh8+qnijYlKZKiaVLyomlaniDZWp4guV31RxonJScaJyUjGpTCpvqEwVb1ScqHxRMalMFZPKVDGpTBU3qUwVXzystdYlD2utdcnDWmtd8sNHKlPFicobFZPKpDJVTCpTxd9UcVLxhcpNFScqU8UXFZPKScWJylQxqZxUTCpTxaQyqUwVk8qJyonKTRU3Pay11iUPa611ycNaa13yw0cVk8pJxaQyqZxUTConFW+onFS8ofJGxaTyhcpJxaRyUnGiclLxRsWkMlWcqEwVJypTxaQyVUwqX1RMKlPFFyonFV88rLXWJQ9rrXXJw1prXfLDX6ZyUnGTylQxqZxUvKHyRsUXFScqU8UXKicVJyonFZPKVHGTyonKVHFS8YXKFypTxVTxmx7WWuuSh7XWuuRhrbUusT+4SGWqOFF5o+INlaliUnmj4kRlqphUTireUDmpmFSmit+kMlVMKicV/2YqU8UXKicV/2YPa611ycNaa13ysNZal/zwy1Smijcq3lCZKk4qvlCZKiaVN1SmikllqjhRmSreUHmjYqq4SWWqOFGZKt5QmSpOVKaKSeWkYlI5UZkq/kkPa611ycNaa13ysNZal9gffKAyVZyoTBWTyhsVX6hMFZPKVHGiclLxhcpJxaRyUnGiMlWcqJxU3KRyUvGFylQxqXxRMam8UTGpTBWTyknFFw9rrXXJw1prXfKw1lqX2B98oHJSMamcVLyhMlVMKlPFpHJS8ZtUTip+k8pUMamcVEwqU8XfpDJVTCpTxaRyUjGpTBWTylQxqZxU/Jc8rLXWJQ9rrXXJw1prXfLDZRVvVJyonFRMKjepTBUnKlPFpHJScaIyVZyovKEyVbxRMalMFScqU8WJylTxhspUMalMKlPFGypTxYnKVDGp3FTxxcNaa13ysNZalzystdYlP/wylaniRGWqmFS+UHmjYlK5qeILlTcqTlTeUJkqvqg4UZkqJpWpYqp4o+INlaniROUNlaniDZXf9LDWWpc8rLXWJQ9rrXXJDx9VvKHyhsobFV+onFRMKl+oTBU3VUwqU8VUMam8ofKGylQxqZyoTBWTylQxqZxUTCpTxVQxqZxUTCpTxRsqU8Xf9LDWWpc8rLXWJQ9rrXXJDx+pvFExqUwVJyo3qUwVk8obFZPKFyonFZPKGypTxUnFpPKbKm5SmSomld9UMam8oXJScVIxqdz0sNZalzystdYlD2utdckPf5nKVHGiMlX8JpWp4ouKE5VJZaqYVH6TyonKGxWTyonKScWk8kbFpHKiMlVMKlPFicobKv8lD2utdcnDWmtd8rDWWpfYH/yHqUwVv0llqjhRmSpOVKaKSWWqmFSmihOVqeINlaliUpkqJpWTikllqjhROak4UfmbKt5QOan4mx7WWuuSh7XWuuRhrbUu+eEjlb+pYqqYVE4q3lCZKiaVL1SmikllqphUpooTlTdUporfVHFSMam8UTGpTBUnFTepnKhMFW+onFTc9LDWWpc8rLXWJQ9rrXXJD5dV3KTyRsWk8obKP0llqnhD5aaKN1SmipOKSWWqOKmYVKaKN1Smiknlb6p4o2JS+Zse1lrrkoe11rrkYa21Lvnhl6m8UfGGym+qmFROKiaVSWWqOFE5qZhUvlD5omJS+UJlqphUpopJ5aRiUnmjYlKZKiaVE5UvVN5QmSq+eFhrrUse1lrrkoe11rrkh/9zFZPKScVJxYnKVPGbVKaKSWWqmFROKiaVqeKkYlKZKk5UTiomlZOKk4qTikllqphUTipOVKaKm1RuelhrrUse1lrrkoe11rrkh/8zFZPKVDGpTConFZPKVDGpnFRMKlPFpDJVfFExqZxUnKi8oXJSMalMFVPFFyonFVPFpDJVnKhMFVPFpPJFxW96WGutSx7WWuuSh7XWuuSHX1bxmyomlaliUnmj4qRiUpkqJpWTipOKSWWqOFF5Q+WkYqqYVKaKSeVE5QuVqWJSmSreUJkqJpWTikllqpgq/s0e1lrrkoe11rrkYa21LvnhMpV/UsWkMlVMKicqJxVTxRcqU8VJxRsVJypTxRsqX1S8oTJVnKhMFZPKScVUMalMFScqU8WkclIxqfyTHtZa65KHtda65GGttS6xP1hrrQse1lrrkoe11rrkYa21LnlYa61LHtZa65KHtda65GGttS55WGutSx7WWuuSh7XWuuRhrbUueVhrrUse1lrrkoe11rrkYa21Lvkf/C+HzIiJCzEAAAAASUVORK5CYII=",
|
|
1019
1027
|
alt: "QRCode",
|
|
1020
1028
|
srcSet: ""
|
|
1021
1029
|
}
|
|
1022
|
-
)), /* @__PURE__ */
|
|
1030
|
+
)), /* @__PURE__ */ import_react2.default.createElement(
|
|
1023
1031
|
"form",
|
|
1024
1032
|
{
|
|
1025
1033
|
id: "PaymentForm",
|
|
1026
1034
|
className: "payment-form",
|
|
1027
1035
|
onSubmit: handleSubmit
|
|
1028
1036
|
},
|
|
1029
|
-
/* @__PURE__ */
|
|
1037
|
+
/* @__PURE__ */ import_react2.default.createElement(
|
|
1030
1038
|
"input",
|
|
1031
1039
|
{
|
|
1032
1040
|
type: "hidden",
|
|
@@ -1035,8 +1043,8 @@ body {
|
|
|
1035
1043
|
name: "dctoken"
|
|
1036
1044
|
}
|
|
1037
1045
|
),
|
|
1038
|
-
/* @__PURE__ */
|
|
1039
|
-
/* @__PURE__ */
|
|
1046
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "amtleft" }, /* @__PURE__ */ import_react2.default.createElement("label", { htmlFor: "Amount" }, "Payment amount"), /* @__PURE__ */ import_react2.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react2.default.createElement("span", null, "$"), /* @__PURE__ */ import_react2.default.createElement("span", null, " ", amount || 1, " "))), /* @__PURE__ */ import_react2.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react2.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react2.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react2.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react2.default.createElement("span", { className: "discover" }))),
|
|
1047
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react2.default.createElement("label", { htmlFor: "NameOnCard" }, "Name on card"), /* @__PURE__ */ import_react2.default.createElement(
|
|
1040
1048
|
"input",
|
|
1041
1049
|
{
|
|
1042
1050
|
"data-token": "name",
|
|
@@ -1048,14 +1056,14 @@ body {
|
|
|
1048
1056
|
value: formData == null ? void 0 : formData.name,
|
|
1049
1057
|
onChange: handleChange
|
|
1050
1058
|
}
|
|
1051
|
-
), /* @__PURE__ */
|
|
1059
|
+
), /* @__PURE__ */ import_react2.default.createElement(
|
|
1052
1060
|
"span",
|
|
1053
1061
|
{
|
|
1054
1062
|
id: "NameOnCard-error",
|
|
1055
1063
|
style: { color: "red" }
|
|
1056
1064
|
}
|
|
1057
1065
|
)),
|
|
1058
|
-
/* @__PURE__ */
|
|
1066
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react2.default.createElement(
|
|
1059
1067
|
"input",
|
|
1060
1068
|
{
|
|
1061
1069
|
"data-token": "card_number",
|
|
@@ -1066,7 +1074,7 @@ body {
|
|
|
1066
1074
|
value: handleCardFormat(formData == null ? void 0 : formData.card_number),
|
|
1067
1075
|
onChange: handleChange
|
|
1068
1076
|
}
|
|
1069
|
-
), error.card_number && /* @__PURE__ */
|
|
1077
|
+
), error.card_number && /* @__PURE__ */ import_react2.default.createElement(
|
|
1070
1078
|
"span",
|
|
1071
1079
|
{
|
|
1072
1080
|
id: "card_number-error",
|
|
@@ -1074,7 +1082,7 @@ body {
|
|
|
1074
1082
|
},
|
|
1075
1083
|
error.card_number
|
|
1076
1084
|
)),
|
|
1077
|
-
/* @__PURE__ */
|
|
1085
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react2.default.createElement(
|
|
1078
1086
|
"input",
|
|
1079
1087
|
{
|
|
1080
1088
|
"data-token": "exp_month",
|
|
@@ -1085,7 +1093,7 @@ body {
|
|
|
1085
1093
|
value: formData == null ? void 0 : formData.exp_month,
|
|
1086
1094
|
onChange: handleChange
|
|
1087
1095
|
}
|
|
1088
|
-
), error.exp_month && /* @__PURE__ */
|
|
1096
|
+
), error.exp_month && /* @__PURE__ */ import_react2.default.createElement(
|
|
1089
1097
|
"span",
|
|
1090
1098
|
{
|
|
1091
1099
|
id: "exp_month-error",
|
|
@@ -1093,7 +1101,7 @@ body {
|
|
|
1093
1101
|
},
|
|
1094
1102
|
error.exp_month
|
|
1095
1103
|
)),
|
|
1096
|
-
/* @__PURE__ */
|
|
1104
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react2.default.createElement(
|
|
1097
1105
|
"input",
|
|
1098
1106
|
{
|
|
1099
1107
|
"data-token": "exp_year",
|
|
@@ -1104,7 +1112,7 @@ body {
|
|
|
1104
1112
|
value: formData == null ? void 0 : formData.exp_year,
|
|
1105
1113
|
onChange: handleChange
|
|
1106
1114
|
}
|
|
1107
|
-
), error.exp_year && /* @__PURE__ */
|
|
1115
|
+
), error.exp_year && /* @__PURE__ */ import_react2.default.createElement(
|
|
1108
1116
|
"span",
|
|
1109
1117
|
{
|
|
1110
1118
|
id: "exp_year-error",
|
|
@@ -1112,7 +1120,7 @@ body {
|
|
|
1112
1120
|
},
|
|
1113
1121
|
error.exp_year
|
|
1114
1122
|
)),
|
|
1115
|
-
/* @__PURE__ */
|
|
1123
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react2.default.createElement(
|
|
1116
1124
|
"input",
|
|
1117
1125
|
{
|
|
1118
1126
|
"data-token": "cvv",
|
|
@@ -1123,15 +1131,15 @@ body {
|
|
|
1123
1131
|
value: formData == null ? void 0 : formData.cvv,
|
|
1124
1132
|
onChange: handleChange
|
|
1125
1133
|
}
|
|
1126
|
-
), /* @__PURE__ */
|
|
1134
|
+
), /* @__PURE__ */ import_react2.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" })), error.cvv && /* @__PURE__ */ import_react2.default.createElement(
|
|
1127
1135
|
"span",
|
|
1128
1136
|
{
|
|
1129
1137
|
id: "cvv-error",
|
|
1130
1138
|
style: { color: "red" }
|
|
1131
1139
|
},
|
|
1132
1140
|
error.cvv
|
|
1133
|
-
), /* @__PURE__ */
|
|
1134
|
-
/* @__PURE__ */
|
|
1141
|
+
), /* @__PURE__ */ import_react2.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react2.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))),
|
|
1142
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react2.default.createElement("label", { htmlFor: "ZIPCode" }, "Postal code"), /* @__PURE__ */ import_react2.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react2.default.createElement(
|
|
1135
1143
|
"input",
|
|
1136
1144
|
{
|
|
1137
1145
|
id: "ZIPCode",
|
|
@@ -1143,7 +1151,7 @@ body {
|
|
|
1143
1151
|
value: formData == null ? void 0 : formData.zip,
|
|
1144
1152
|
onChange: handleChange
|
|
1145
1153
|
}
|
|
1146
|
-
), /* @__PURE__ */
|
|
1154
|
+
), /* @__PURE__ */ import_react2.default.createElement(
|
|
1147
1155
|
"a",
|
|
1148
1156
|
{
|
|
1149
1157
|
tabIndex: 0,
|
|
@@ -1153,8 +1161,8 @@ body {
|
|
|
1153
1161
|
"data-placement": "left",
|
|
1154
1162
|
"data-content": "Enter the ZIP/Postal code for your credit card billing address."
|
|
1155
1163
|
},
|
|
1156
|
-
/* @__PURE__ */
|
|
1157
|
-
), /* @__PURE__ */
|
|
1164
|
+
/* @__PURE__ */ import_react2.default.createElement("i", { className: "fa fa-question-circle" })
|
|
1165
|
+
), /* @__PURE__ */ import_react2.default.createElement(
|
|
1158
1166
|
"span",
|
|
1159
1167
|
{
|
|
1160
1168
|
id: "ZIPCode-error",
|
|
@@ -1162,24 +1170,24 @@ body {
|
|
|
1162
1170
|
},
|
|
1163
1171
|
"This field is required"
|
|
1164
1172
|
))),
|
|
1165
|
-
/* @__PURE__ */
|
|
1173
|
+
/* @__PURE__ */ import_react2.default.createElement(
|
|
1166
1174
|
"button",
|
|
1167
1175
|
{
|
|
1168
1176
|
id: "PayButton",
|
|
1169
1177
|
className: "btn btn-block btn-success submit-button",
|
|
1170
1178
|
type: "submit"
|
|
1171
1179
|
},
|
|
1172
|
-
/* @__PURE__ */
|
|
1173
|
-
/* @__PURE__ */
|
|
1180
|
+
/* @__PURE__ */ import_react2.default.createElement("span", { className: "submit-button-lock" }),
|
|
1181
|
+
/* @__PURE__ */ import_react2.default.createElement("span", { className: "align-middle" }, "Pay $", amount || 1)
|
|
1174
1182
|
)
|
|
1175
|
-
), /* @__PURE__ */
|
|
1183
|
+
), /* @__PURE__ */ import_react2.default.createElement("div", { className: "powerd-by-part", style: {
|
|
1176
1184
|
display: "flex",
|
|
1177
1185
|
fontSize: "12px",
|
|
1178
1186
|
textAlign: "center",
|
|
1179
1187
|
alignItems: "center",
|
|
1180
1188
|
justifyContent: "center",
|
|
1181
1189
|
margin: "8px 0 20px 0"
|
|
1182
|
-
} }, /* @__PURE__ */
|
|
1190
|
+
} }, /* @__PURE__ */ import_react2.default.createElement(
|
|
1183
1191
|
"svg",
|
|
1184
1192
|
{
|
|
1185
1193
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1187,14 +1195,14 @@ body {
|
|
|
1187
1195
|
height: 20,
|
|
1188
1196
|
viewBox: "0 0 26 26"
|
|
1189
1197
|
},
|
|
1190
|
-
/* @__PURE__ */
|
|
1198
|
+
/* @__PURE__ */ import_react2.default.createElement(
|
|
1191
1199
|
"path",
|
|
1192
1200
|
{
|
|
1193
1201
|
fill: "currentColor",
|
|
1194
1202
|
d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
|
|
1195
1203
|
}
|
|
1196
1204
|
)
|
|
1197
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */
|
|
1205
|
+
), "Secure payments powered by Fractal", /* @__PURE__ */ import_react2.default.createElement(
|
|
1198
1206
|
"img",
|
|
1199
1207
|
{
|
|
1200
1208
|
src: "https://ui.fractalpay.com/favicon.ico",
|