@pinerohit11/testwidget 0.1.36 → 0.1.37

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/dist/index.cjs +246 -21
  2. package/dist/index.d.cts +11 -2
  3. package/dist/index.d.ts +11 -2
  4. package/dist/index.js +251 -27
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -47,12 +47,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
47
47
  // src/app/index.ts
48
48
  var app_exports = {};
49
49
  __export(app_exports, {
50
+ PaywithFractal: () => PaywithFractal,
50
51
  RequestPayment: () => RequestPayment
51
52
  });
52
53
  module.exports = __toCommonJS(app_exports);
53
54
 
54
55
  // src/app/components/RequestPayment/RequestPayment.tsx
55
- var import_react4 = require("react");
56
+ var import_react4 = __toESM(require("react"), 1);
56
57
  var import_axios = __toESM(require("axios"), 1);
57
58
 
58
59
  // src/app/components/Loader/Loader.tsx
@@ -980,10 +981,10 @@ input {
980
981
  var RequestPaymentstyles_default = RequestPaymentstyles;
981
982
 
982
983
  // src/app/components/RequestPayment/RequestPayment.tsx
983
- var RequestPayment = (props) => {
984
+ function RequestPayment(props) {
984
985
  const fractalpayClientKey = props.fractalpayClientKey;
985
- const baseUrl = "http://192.168.1.64:8082/";
986
- const masterBaseUrl = "http://192.168.1.52:8081/";
986
+ const masterBaseUrl = "https://testapi.fractalpay.com/";
987
+ const baseUrl = "https://staging-widget.fractalpay.com/";
987
988
  const [show, setShow] = (0, import_react4.useState)(false);
988
989
  const [loading, setLoading] = (0, import_react4.useState)(false);
989
990
  const [errors, setErrors] = (0, import_react4.useState)({});
@@ -1108,7 +1109,7 @@ var RequestPayment = (props) => {
1108
1109
  setErrors(newErrors);
1109
1110
  return Object.keys(newErrors).length === 0;
1110
1111
  };
1111
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React.createElement(Loader_default, { loading }), /* @__PURE__ */ React.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal, { show, onHide: handleClose }, /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")), /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React.createElement(
1112
+ return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react4.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react4.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal, { show, onHide: handleClose }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")), /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ import_react4.default.createElement(
1112
1113
  "input",
1113
1114
  {
1114
1115
  className: "form-control",
@@ -1117,7 +1118,7 @@ var RequestPayment = (props) => {
1117
1118
  "data-token": "name",
1118
1119
  onChange: handleChange
1119
1120
  }
1120
- ), errors.name && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React.createElement(
1121
+ ), errors.name && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ import_react4.default.createElement(
1121
1122
  "input",
1122
1123
  {
1123
1124
  maxLength: 10,
@@ -1129,7 +1130,7 @@ var RequestPayment = (props) => {
1129
1130
  type: "text",
1130
1131
  "data-token": "phone_number"
1131
1132
  }
1132
- ), errors.phone_number && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React.createElement(
1133
+ ), errors.phone_number && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ import_react4.default.createElement(
1133
1134
  "input",
1134
1135
  {
1135
1136
  className: "form-control",
@@ -1138,7 +1139,7 @@ var RequestPayment = (props) => {
1138
1139
  onChange: handleChange,
1139
1140
  "data-token": "email"
1140
1141
  }
1141
- ), errors.email && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React.createElement("div", { className: "input-group" }, /* @__PURE__ */ React.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React.createElement(
1142
+ ), errors.email && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ import_react4.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ import_react4.default.createElement(
1142
1143
  "input",
1143
1144
  {
1144
1145
  "data-token": "amount",
@@ -1148,7 +1149,7 @@ var RequestPayment = (props) => {
1148
1149
  onChange: handleChange,
1149
1150
  onBlur: handleAmountBlur
1150
1151
  }
1151
- )), errors.amount && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React.createElement(
1152
+ )), errors.amount && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ import_react4.default.createElement(
1152
1153
  "input",
1153
1154
  {
1154
1155
  className: "form-control",
@@ -1157,7 +1158,7 @@ var RequestPayment = (props) => {
1157
1158
  onChange: handleChange,
1158
1159
  "data-token": "order_id"
1159
1160
  }
1160
- ), errors.order_id && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React.createElement(
1161
+ ), errors.order_id && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react4.default.createElement(
1161
1162
  import_react_bootstrap.Button,
1162
1163
  {
1163
1164
  type: "button",
@@ -1166,7 +1167,7 @@ var RequestPayment = (props) => {
1166
1167
  disabled: loading
1167
1168
  },
1168
1169
  loading ? "Loading..." : "Send Request"
1169
- )), /* @__PURE__ */ React.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React.createElement(
1170
+ )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react4.default.createElement(
1170
1171
  "svg",
1171
1172
  {
1172
1173
  xmlns: "http://www.w3.org/2000/svg",
@@ -1174,29 +1175,29 @@ var RequestPayment = (props) => {
1174
1175
  height: "20",
1175
1176
  viewBox: "0 0 26 26"
1176
1177
  },
1177
- /* @__PURE__ */ React.createElement(
1178
+ /* @__PURE__ */ import_react4.default.createElement(
1178
1179
  "path",
1179
1180
  {
1180
1181
  fill: "currentColor",
1181
1182
  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"
1182
1183
  }
1183
1184
  )
1184
- ), "Secure payments powered by Fractal", /* @__PURE__ */ React.createElement(
1185
+ ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react4.default.createElement(
1185
1186
  "img",
1186
1187
  {
1187
1188
  src: "https://ui.fractalpay.com/favicon.ico",
1188
1189
  alt: "Fractal logo",
1189
1190
  className: "powered-logo"
1190
1191
  }
1191
- )))), /* @__PURE__ */ React.createElement(
1192
+ )))), /* @__PURE__ */ import_react4.default.createElement(
1192
1193
  import_react_bootstrap.Modal,
1193
1194
  {
1194
1195
  className: "payment-suc",
1195
1196
  show: showConfirmationModal,
1196
1197
  onHide: handleCloseConfirmationModal
1197
1198
  },
1198
- /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
1199
- /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ React.createElement(
1199
+ /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
1200
+ /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ import_react4.default.createElement(
1200
1201
  "svg",
1201
1202
  {
1202
1203
  width: "60",
@@ -1205,7 +1206,7 @@ var RequestPayment = (props) => {
1205
1206
  fill: "none",
1206
1207
  xmlns: "http://www.w3.org/2000/svg"
1207
1208
  },
1208
- /* @__PURE__ */ React.createElement(
1209
+ /* @__PURE__ */ import_react4.default.createElement(
1209
1210
  "rect",
1210
1211
  {
1211
1212
  x: "0.5",
@@ -1216,14 +1217,14 @@ var RequestPayment = (props) => {
1216
1217
  stroke: "#31B379"
1217
1218
  }
1218
1219
  ),
1219
- /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React.createElement(
1220
+ /* @__PURE__ */ import_react4.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react4.default.createElement(
1220
1221
  "path",
1221
1222
  {
1222
1223
  d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
1223
1224
  fill: "#31B379"
1224
1225
  }
1225
1226
  )),
1226
- /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React.createElement(
1227
+ /* @__PURE__ */ import_react4.default.createElement("defs", null, /* @__PURE__ */ import_react4.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react4.default.createElement(
1227
1228
  "rect",
1228
1229
  {
1229
1230
  width: "22",
@@ -1232,10 +1233,234 @@ var RequestPayment = (props) => {
1232
1233
  transform: "translate(19.5 19.0039)"
1233
1234
  }
1234
1235
  )))
1235
- ), /* @__PURE__ */ React.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React.createElement("br", null), " sent successfully"))
1236
+ ), /* @__PURE__ */ import_react4.default.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ import_react4.default.createElement("br", null), " sent successfully"))
1236
1237
  ));
1237
- };
1238
+ }
1239
+
1240
+ // src/app/components/Greet.tsx
1241
+ var import_axios2 = __toESM(require("axios"), 1);
1242
+ var import_react5 = __toESM(require("react"), 1);
1243
+ var import_bootstrap_min = require("bootstrap/dist/css/bootstrap.min.css");
1244
+ function PaywithFractal({ name, amount, orderId, fractalPayClientKey }) {
1245
+ const baseUrl = "http://192.168.1.52:8082/";
1246
+ const masterBaseUrl = "http://192.168.1.52:8081/";
1247
+ console.log(name, "name", window == null ? void 0 : window.DatacapWebToken);
1248
+ const [dcToken, setDcToken] = (0, import_react5.useState)("");
1249
+ const [error, setError] = (0, import_react5.useState)({});
1250
+ const [toggleQr, setToggleQr] = (0, import_react5.useState)(false);
1251
+ const [formData, setFormData] = (0, import_react5.useState)({
1252
+ name: "John Doe",
1253
+ card_number: "4761 7310 0000 0043",
1254
+ exp_month: "12",
1255
+ exp_year: "2024",
1256
+ cvv: "201",
1257
+ zip: ""
1258
+ });
1259
+ const [loading, setLoading] = (0, import_react5.useState)(false);
1260
+ const [show, setShow] = (0, import_react5.useState)(false);
1261
+ const handleSubmit = async (e) => {
1262
+ var _a, _b, _c, _d, _e, _f, _g;
1263
+ e.preventDefault();
1264
+ const data = {
1265
+ description: "widget payment",
1266
+ amount: amount || "1.00",
1267
+ phone_number: "1234567908",
1268
+ zip: formData.zip,
1269
+ orderId: orderId || "",
1270
+ fractalpayPublicKey: fractalPayClientKey
1271
+ };
1272
+ if (Object.keys(error).length < 1) {
1273
+ try {
1274
+ setLoading(true);
1275
+ const res = await import_axios2.default.post(`${baseUrl}create-widget-order`, data, {
1276
+ headers: {
1277
+ "Content-Type": "application/json"
1278
+ }
1279
+ });
1280
+ if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
1281
+ console.log("token", (_b = res.data) == null ? void 0 : _b.data);
1282
+ setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
1283
+ const tokenCallback = async (response) => {
1284
+ var _a2, _b2, _c2;
1285
+ console.log("response for token call back", response);
1286
+ if (response.Error) {
1287
+ alert("if");
1288
+ console.log("Error: ", response);
1289
+ setLoading(false);
1290
+ } else {
1291
+ const headers = {
1292
+ "Content-Type": "application/x-www-form-urlencoded"
1293
+ };
1294
+ const quickData = __spreadValues({
1295
+ name: formData.name,
1296
+ postal_code: formData.zip
1297
+ }, response);
1298
+ try {
1299
+ const resp = await import_axios2.default.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
1300
+ headers
1301
+ });
1302
+ setLoading(false);
1303
+ console.log("quick response", resp);
1304
+ if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
1305
+ console.log("Payment success!", resp == null ? void 0 : resp.data);
1306
+ setFormData({
1307
+ name: "John Doe",
1308
+ card_number: "4761 7310 0000 0043",
1309
+ exp_month: "12",
1310
+ exp_year: "2024",
1311
+ cvv: "201",
1312
+ zip: ""
1313
+ });
1314
+ } else {
1315
+ console.log("Payment failed!", resp == null ? void 0 : resp.data);
1316
+ }
1317
+ } catch (error2) {
1318
+ console.log("Error: ", error2);
1319
+ setLoading(false);
1320
+ }
1321
+ }
1322
+ };
1323
+ window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
1324
+ } else {
1325
+ setLoading(false);
1326
+ console.log("res", (_g = res.data) == null ? void 0 : _g.data);
1327
+ }
1328
+ } catch (error2) {
1329
+ setLoading(false);
1330
+ console.log(error2);
1331
+ }
1332
+ }
1333
+ };
1334
+ const handleCardFormat = (numericValue) => {
1335
+ const cleaned = ("" + numericValue).replace(/\D/g, "");
1336
+ const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
1337
+ if (match) {
1338
+ return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
1339
+ }
1340
+ return numericValue;
1341
+ };
1342
+ const handleCardNumberChange = (value) => {
1343
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
1344
+ if (value && value.match(/[a-zA-Z]/)) {
1345
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1346
+ card_number: "Invalid input. Please enter only numbers."
1347
+ }));
1348
+ } else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
1349
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1350
+ card_number: "Invalid Card Number"
1351
+ }));
1352
+ } else if (!value.length) {
1353
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1354
+ card_number: "Card Number required"
1355
+ }));
1356
+ } else {
1357
+ setError({});
1358
+ }
1359
+ };
1360
+ const handleMonthChange = (value) => {
1361
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
1362
+ if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
1363
+ setError({});
1364
+ } else if (!value.length) {
1365
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1366
+ exp_month: "Month is required"
1367
+ }));
1368
+ } else {
1369
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1370
+ exp_month: "Value should be between 1 and 12"
1371
+ }));
1372
+ }
1373
+ };
1374
+ const handleYearChange = (value) => {
1375
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
1376
+ if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
1377
+ setError({});
1378
+ } else if (!value.length) {
1379
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1380
+ exp_year: "Year is required"
1381
+ }));
1382
+ } else {
1383
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1384
+ exp_year: "Invalid Expiration Date."
1385
+ }));
1386
+ }
1387
+ };
1388
+ const handleCVVChange = (value) => {
1389
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
1390
+ if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
1391
+ setError({});
1392
+ } else if (!value.length) {
1393
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1394
+ cvv: "CVV is required"
1395
+ }));
1396
+ } else {
1397
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1398
+ cvv: "Invalid CVV."
1399
+ }));
1400
+ }
1401
+ };
1402
+ const handleChange = (e) => {
1403
+ const token = e.target.getAttribute("data-token") || "";
1404
+ const value = e.target.value;
1405
+ setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
1406
+ if (token === "card_number") {
1407
+ handleCardNumberChange(value);
1408
+ }
1409
+ if (token === "exp_month") {
1410
+ handleMonthChange(value);
1411
+ }
1412
+ if (token === "exp_year") {
1413
+ handleYearChange(value);
1414
+ }
1415
+ if (token === "cvv") {
1416
+ handleCVVChange(value);
1417
+ }
1418
+ };
1419
+ (0, import_react5.useEffect)(() => {
1420
+ const scriptId = "my-script";
1421
+ const existingScript = document.getElementById(scriptId);
1422
+ if (!existingScript) {
1423
+ const script = document.createElement("script");
1424
+ script.src = "https://token-cert.dcap.com/v1/client";
1425
+ script.id = scriptId;
1426
+ script.async = true;
1427
+ script.onload = () => {
1428
+ if (typeof window !== "undefined" && window.DatacapWebToken) {
1429
+ console.log("DatacapWebToken", window.DatacapWebToken);
1430
+ } else {
1431
+ console.log("DatacapWebToken is not loaded yet.");
1432
+ }
1433
+ };
1434
+ document.head.appendChild(script);
1435
+ }
1436
+ return () => {
1437
+ const script = document.getElementById(scriptId);
1438
+ if (script) {
1439
+ document.head.removeChild(script);
1440
+ }
1441
+ };
1442
+ }, []);
1443
+ (0, import_react5.useEffect)(() => {
1444
+ const link = document.createElement("link");
1445
+ link.rel = "stylesheet";
1446
+ link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";
1447
+ document.head.appendChild(link);
1448
+ return () => {
1449
+ document.head.removeChild(link);
1450
+ };
1451
+ }, []);
1452
+ const handleClose = () => {
1453
+ setShow(false);
1454
+ };
1455
+ const handleOpen = () => {
1456
+ console.log("open");
1457
+ setShow(true);
1458
+ };
1459
+ console.log(show, "open");
1460
+ return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(Loader_default, { loading: true }));
1461
+ }
1238
1462
  // Annotate the CommonJS export names for ESM import in node:
1239
1463
  0 && (module.exports = {
1464
+ PaywithFractal,
1240
1465
  RequestPayment
1241
1466
  });
package/dist/index.d.cts CHANGED
@@ -1,6 +1,15 @@
1
+ import React from 'react';
2
+
1
3
  interface Props {
2
4
  fractalpayClientKey: string;
3
5
  }
4
- declare const RequestPayment: React.FC<Props>;
6
+ declare function RequestPayment(props: Props): React.JSX.Element;
7
+
8
+ declare function PaywithFractal({ name, amount, orderId, fractalPayClientKey }: {
9
+ name: string;
10
+ amount: number;
11
+ orderId: string;
12
+ fractalPayClientKey: string;
13
+ }): React.JSX.Element;
5
14
 
6
- export { RequestPayment };
15
+ export { PaywithFractal, RequestPayment };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,15 @@
1
+ import React from 'react';
2
+
1
3
  interface Props {
2
4
  fractalpayClientKey: string;
3
5
  }
4
- declare const RequestPayment: React.FC<Props>;
6
+ declare function RequestPayment(props: Props): React.JSX.Element;
7
+
8
+ declare function PaywithFractal({ name, amount, orderId, fractalPayClientKey }: {
9
+ name: string;
10
+ amount: number;
11
+ orderId: string;
12
+ fractalPayClientKey: string;
13
+ }): React.JSX.Element;
5
14
 
6
- export { RequestPayment };
15
+ export { PaywithFractal, RequestPayment };
package/dist/index.js CHANGED
@@ -19,16 +19,16 @@ var __spreadValues = (a, b) => {
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
20
 
21
21
  // src/app/components/RequestPayment/RequestPayment.tsx
22
- import { useState } from "react";
22
+ import React4, { useState } from "react";
23
23
  import axios from "axios";
24
24
 
25
25
  // src/app/components/Loader/Loader.tsx
26
- import React3 from "react";
26
+ import React2 from "react";
27
27
 
28
28
  // src/app/components/Loader/LoaderStyle.tsx
29
- import React2 from "react";
29
+ import React from "react";
30
30
  var LoaderStyle = (props) => {
31
- return /* @__PURE__ */ React2.createElement("style", null, `
31
+ return /* @__PURE__ */ React.createElement("style", null, `
32
32
  .loader {
33
33
  position: fixed;
34
34
  /* Fixed position to cover the viewport */
@@ -121,7 +121,7 @@ var LoaderStyle_default = LoaderStyle;
121
121
 
122
122
  // src/app/components/Loader/Loader.tsx
123
123
  var Loader = (props) => {
124
- return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(LoaderStyle_default, null), (props == null ? void 0 : props.loading) && /* @__PURE__ */ React3.createElement("div", { className: "loader" }, /* @__PURE__ */ React3.createElement("div", { className: "lds-ellipsis" }, /* @__PURE__ */ React3.createElement("div", null), /* @__PURE__ */ React3.createElement("div", null), /* @__PURE__ */ React3.createElement("div", null), /* @__PURE__ */ React3.createElement("div", null))));
124
+ return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(LoaderStyle_default, null), (props == null ? void 0 : props.loading) && /* @__PURE__ */ React2.createElement("div", { className: "loader" }, /* @__PURE__ */ React2.createElement("div", { className: "lds-ellipsis" }, /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("div", null))));
125
125
  };
126
126
  var Loader_default = Loader;
127
127
 
@@ -129,9 +129,9 @@ var Loader_default = Loader;
129
129
  import { Button, Form, Modal } from "react-bootstrap";
130
130
 
131
131
  // src/app/components/RequestPayment/RequestPaymentstyles.tsx
132
- import React4 from "react";
132
+ import React3 from "react";
133
133
  var RequestPaymentstyles = (props) => {
134
- return /* @__PURE__ */ React4.createElement("style", null, `
134
+ return /* @__PURE__ */ React3.createElement("style", null, `
135
135
  .paymentBtn {
136
136
  background-color: black;
137
137
  border: none;
@@ -947,10 +947,10 @@ input {
947
947
  var RequestPaymentstyles_default = RequestPaymentstyles;
948
948
 
949
949
  // src/app/components/RequestPayment/RequestPayment.tsx
950
- var RequestPayment = (props) => {
950
+ function RequestPayment(props) {
951
951
  const fractalpayClientKey = props.fractalpayClientKey;
952
- const baseUrl = "http://192.168.1.64:8082/";
953
- const masterBaseUrl = "http://192.168.1.52:8081/";
952
+ const masterBaseUrl = "https://testapi.fractalpay.com/";
953
+ const baseUrl = "https://staging-widget.fractalpay.com/";
954
954
  const [show, setShow] = useState(false);
955
955
  const [loading, setLoading] = useState(false);
956
956
  const [errors, setErrors] = useState({});
@@ -1075,7 +1075,7 @@ var RequestPayment = (props) => {
1075
1075
  setErrors(newErrors);
1076
1076
  return Object.keys(newErrors).length === 0;
1077
1077
  };
1078
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React.createElement(Loader_default, { loading }), /* @__PURE__ */ React.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React.createElement(Modal, { show, onHide: handleClose }, /* @__PURE__ */ React.createElement(Modal.Header, { closeButton: true }, /* @__PURE__ */ React.createElement(Modal.Title, null, "Request Payment")), /* @__PURE__ */ React.createElement(Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React.createElement(Form, null, /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React.createElement(
1078
+ return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React4.createElement(Loader_default, { loading }), /* @__PURE__ */ React4.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React4.createElement(Modal, { show, onHide: handleClose }, /* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }, /* @__PURE__ */ React4.createElement(Modal.Title, null, "Request Payment")), /* @__PURE__ */ React4.createElement(Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React4.createElement(Form, null, /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React4.createElement(
1079
1079
  "input",
1080
1080
  {
1081
1081
  className: "form-control",
@@ -1084,7 +1084,7 @@ var RequestPayment = (props) => {
1084
1084
  "data-token": "name",
1085
1085
  onChange: handleChange
1086
1086
  }
1087
- ), errors.name && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React.createElement(
1087
+ ), errors.name && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React4.createElement(
1088
1088
  "input",
1089
1089
  {
1090
1090
  maxLength: 10,
@@ -1096,7 +1096,7 @@ var RequestPayment = (props) => {
1096
1096
  type: "text",
1097
1097
  "data-token": "phone_number"
1098
1098
  }
1099
- ), errors.phone_number && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React.createElement(
1099
+ ), errors.phone_number && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React4.createElement(
1100
1100
  "input",
1101
1101
  {
1102
1102
  className: "form-control",
@@ -1105,7 +1105,7 @@ var RequestPayment = (props) => {
1105
1105
  onChange: handleChange,
1106
1106
  "data-token": "email"
1107
1107
  }
1108
- ), errors.email && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React.createElement("div", { className: "input-group" }, /* @__PURE__ */ React.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React.createElement(
1108
+ ), errors.email && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React4.createElement("div", { className: "input-group" }, /* @__PURE__ */ React4.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React4.createElement(
1109
1109
  "input",
1110
1110
  {
1111
1111
  "data-token": "amount",
@@ -1115,7 +1115,7 @@ var RequestPayment = (props) => {
1115
1115
  onChange: handleChange,
1116
1116
  onBlur: handleAmountBlur
1117
1117
  }
1118
- )), errors.amount && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React.createElement(
1118
+ )), errors.amount && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React4.createElement(
1119
1119
  "input",
1120
1120
  {
1121
1121
  className: "form-control",
@@ -1124,7 +1124,7 @@ var RequestPayment = (props) => {
1124
1124
  onChange: handleChange,
1125
1125
  "data-token": "order_id"
1126
1126
  }
1127
- ), errors.order_id && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React.createElement(
1127
+ ), errors.order_id && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React4.createElement(
1128
1128
  Button,
1129
1129
  {
1130
1130
  type: "button",
@@ -1133,7 +1133,7 @@ var RequestPayment = (props) => {
1133
1133
  disabled: loading
1134
1134
  },
1135
1135
  loading ? "Loading..." : "Send Request"
1136
- )), /* @__PURE__ */ React.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React.createElement(
1136
+ )), /* @__PURE__ */ React4.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React4.createElement(
1137
1137
  "svg",
1138
1138
  {
1139
1139
  xmlns: "http://www.w3.org/2000/svg",
@@ -1141,29 +1141,29 @@ var RequestPayment = (props) => {
1141
1141
  height: "20",
1142
1142
  viewBox: "0 0 26 26"
1143
1143
  },
1144
- /* @__PURE__ */ React.createElement(
1144
+ /* @__PURE__ */ React4.createElement(
1145
1145
  "path",
1146
1146
  {
1147
1147
  fill: "currentColor",
1148
1148
  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"
1149
1149
  }
1150
1150
  )
1151
- ), "Secure payments powered by Fractal", /* @__PURE__ */ React.createElement(
1151
+ ), "Secure payments powered by Fractal", /* @__PURE__ */ React4.createElement(
1152
1152
  "img",
1153
1153
  {
1154
1154
  src: "https://ui.fractalpay.com/favicon.ico",
1155
1155
  alt: "Fractal logo",
1156
1156
  className: "powered-logo"
1157
1157
  }
1158
- )))), /* @__PURE__ */ React.createElement(
1158
+ )))), /* @__PURE__ */ React4.createElement(
1159
1159
  Modal,
1160
1160
  {
1161
1161
  className: "payment-suc",
1162
1162
  show: showConfirmationModal,
1163
1163
  onHide: handleCloseConfirmationModal
1164
1164
  },
1165
- /* @__PURE__ */ React.createElement(Modal.Header, { closeButton: true }),
1166
- /* @__PURE__ */ React.createElement(Modal.Body, null, /* @__PURE__ */ React.createElement(
1165
+ /* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }),
1166
+ /* @__PURE__ */ React4.createElement(Modal.Body, null, /* @__PURE__ */ React4.createElement(
1167
1167
  "svg",
1168
1168
  {
1169
1169
  width: "60",
@@ -1172,7 +1172,7 @@ var RequestPayment = (props) => {
1172
1172
  fill: "none",
1173
1173
  xmlns: "http://www.w3.org/2000/svg"
1174
1174
  },
1175
- /* @__PURE__ */ React.createElement(
1175
+ /* @__PURE__ */ React4.createElement(
1176
1176
  "rect",
1177
1177
  {
1178
1178
  x: "0.5",
@@ -1183,14 +1183,14 @@ var RequestPayment = (props) => {
1183
1183
  stroke: "#31B379"
1184
1184
  }
1185
1185
  ),
1186
- /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React.createElement(
1186
+ /* @__PURE__ */ React4.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React4.createElement(
1187
1187
  "path",
1188
1188
  {
1189
1189
  d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
1190
1190
  fill: "#31B379"
1191
1191
  }
1192
1192
  )),
1193
- /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React.createElement(
1193
+ /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React4.createElement(
1194
1194
  "rect",
1195
1195
  {
1196
1196
  width: "22",
@@ -1199,9 +1199,233 @@ var RequestPayment = (props) => {
1199
1199
  transform: "translate(19.5 19.0039)"
1200
1200
  }
1201
1201
  )))
1202
- ), /* @__PURE__ */ React.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React.createElement("br", null), " sent successfully"))
1202
+ ), /* @__PURE__ */ React4.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React4.createElement("br", null), " sent successfully"))
1203
1203
  ));
1204
- };
1204
+ }
1205
+
1206
+ // src/app/components/Greet.tsx
1207
+ import axios2 from "axios";
1208
+ import React5, { useEffect, useState as useState2 } from "react";
1209
+ import "bootstrap/dist/css/bootstrap.min.css";
1210
+ function PaywithFractal({ name, amount, orderId, fractalPayClientKey }) {
1211
+ const baseUrl = "http://192.168.1.52:8082/";
1212
+ const masterBaseUrl = "http://192.168.1.52:8081/";
1213
+ console.log(name, "name", window == null ? void 0 : window.DatacapWebToken);
1214
+ const [dcToken, setDcToken] = useState2("");
1215
+ const [error, setError] = useState2({});
1216
+ const [toggleQr, setToggleQr] = useState2(false);
1217
+ const [formData, setFormData] = useState2({
1218
+ name: "John Doe",
1219
+ card_number: "4761 7310 0000 0043",
1220
+ exp_month: "12",
1221
+ exp_year: "2024",
1222
+ cvv: "201",
1223
+ zip: ""
1224
+ });
1225
+ const [loading, setLoading] = useState2(false);
1226
+ const [show, setShow] = useState2(false);
1227
+ const handleSubmit = async (e) => {
1228
+ var _a, _b, _c, _d, _e, _f, _g;
1229
+ e.preventDefault();
1230
+ const data = {
1231
+ description: "widget payment",
1232
+ amount: amount || "1.00",
1233
+ phone_number: "1234567908",
1234
+ zip: formData.zip,
1235
+ orderId: orderId || "",
1236
+ fractalpayPublicKey: fractalPayClientKey
1237
+ };
1238
+ if (Object.keys(error).length < 1) {
1239
+ try {
1240
+ setLoading(true);
1241
+ const res = await axios2.post(`${baseUrl}create-widget-order`, data, {
1242
+ headers: {
1243
+ "Content-Type": "application/json"
1244
+ }
1245
+ });
1246
+ if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
1247
+ console.log("token", (_b = res.data) == null ? void 0 : _b.data);
1248
+ setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
1249
+ const tokenCallback = async (response) => {
1250
+ var _a2, _b2, _c2;
1251
+ console.log("response for token call back", response);
1252
+ if (response.Error) {
1253
+ alert("if");
1254
+ console.log("Error: ", response);
1255
+ setLoading(false);
1256
+ } else {
1257
+ const headers = {
1258
+ "Content-Type": "application/x-www-form-urlencoded"
1259
+ };
1260
+ const quickData = __spreadValues({
1261
+ name: formData.name,
1262
+ postal_code: formData.zip
1263
+ }, response);
1264
+ try {
1265
+ const resp = await axios2.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
1266
+ headers
1267
+ });
1268
+ setLoading(false);
1269
+ console.log("quick response", resp);
1270
+ if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
1271
+ console.log("Payment success!", resp == null ? void 0 : resp.data);
1272
+ setFormData({
1273
+ name: "John Doe",
1274
+ card_number: "4761 7310 0000 0043",
1275
+ exp_month: "12",
1276
+ exp_year: "2024",
1277
+ cvv: "201",
1278
+ zip: ""
1279
+ });
1280
+ } else {
1281
+ console.log("Payment failed!", resp == null ? void 0 : resp.data);
1282
+ }
1283
+ } catch (error2) {
1284
+ console.log("Error: ", error2);
1285
+ setLoading(false);
1286
+ }
1287
+ }
1288
+ };
1289
+ window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
1290
+ } else {
1291
+ setLoading(false);
1292
+ console.log("res", (_g = res.data) == null ? void 0 : _g.data);
1293
+ }
1294
+ } catch (error2) {
1295
+ setLoading(false);
1296
+ console.log(error2);
1297
+ }
1298
+ }
1299
+ };
1300
+ const handleCardFormat = (numericValue) => {
1301
+ const cleaned = ("" + numericValue).replace(/\D/g, "");
1302
+ const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
1303
+ if (match) {
1304
+ return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
1305
+ }
1306
+ return numericValue;
1307
+ };
1308
+ const handleCardNumberChange = (value) => {
1309
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
1310
+ if (value && value.match(/[a-zA-Z]/)) {
1311
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1312
+ card_number: "Invalid input. Please enter only numbers."
1313
+ }));
1314
+ } else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
1315
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1316
+ card_number: "Invalid Card Number"
1317
+ }));
1318
+ } else if (!value.length) {
1319
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1320
+ card_number: "Card Number required"
1321
+ }));
1322
+ } else {
1323
+ setError({});
1324
+ }
1325
+ };
1326
+ const handleMonthChange = (value) => {
1327
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
1328
+ if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
1329
+ setError({});
1330
+ } else if (!value.length) {
1331
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1332
+ exp_month: "Month is required"
1333
+ }));
1334
+ } else {
1335
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1336
+ exp_month: "Value should be between 1 and 12"
1337
+ }));
1338
+ }
1339
+ };
1340
+ const handleYearChange = (value) => {
1341
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
1342
+ if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
1343
+ setError({});
1344
+ } else if (!value.length) {
1345
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1346
+ exp_year: "Year is required"
1347
+ }));
1348
+ } else {
1349
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1350
+ exp_year: "Invalid Expiration Date."
1351
+ }));
1352
+ }
1353
+ };
1354
+ const handleCVVChange = (value) => {
1355
+ setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
1356
+ if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
1357
+ setError({});
1358
+ } else if (!value.length) {
1359
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1360
+ cvv: "CVV is required"
1361
+ }));
1362
+ } else {
1363
+ setError((prev) => __spreadProps(__spreadValues({}, prev), {
1364
+ cvv: "Invalid CVV."
1365
+ }));
1366
+ }
1367
+ };
1368
+ const handleChange = (e) => {
1369
+ const token = e.target.getAttribute("data-token") || "";
1370
+ const value = e.target.value;
1371
+ setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
1372
+ if (token === "card_number") {
1373
+ handleCardNumberChange(value);
1374
+ }
1375
+ if (token === "exp_month") {
1376
+ handleMonthChange(value);
1377
+ }
1378
+ if (token === "exp_year") {
1379
+ handleYearChange(value);
1380
+ }
1381
+ if (token === "cvv") {
1382
+ handleCVVChange(value);
1383
+ }
1384
+ };
1385
+ useEffect(() => {
1386
+ const scriptId = "my-script";
1387
+ const existingScript = document.getElementById(scriptId);
1388
+ if (!existingScript) {
1389
+ const script = document.createElement("script");
1390
+ script.src = "https://token-cert.dcap.com/v1/client";
1391
+ script.id = scriptId;
1392
+ script.async = true;
1393
+ script.onload = () => {
1394
+ if (typeof window !== "undefined" && window.DatacapWebToken) {
1395
+ console.log("DatacapWebToken", window.DatacapWebToken);
1396
+ } else {
1397
+ console.log("DatacapWebToken is not loaded yet.");
1398
+ }
1399
+ };
1400
+ document.head.appendChild(script);
1401
+ }
1402
+ return () => {
1403
+ const script = document.getElementById(scriptId);
1404
+ if (script) {
1405
+ document.head.removeChild(script);
1406
+ }
1407
+ };
1408
+ }, []);
1409
+ useEffect(() => {
1410
+ const link = document.createElement("link");
1411
+ link.rel = "stylesheet";
1412
+ link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";
1413
+ document.head.appendChild(link);
1414
+ return () => {
1415
+ document.head.removeChild(link);
1416
+ };
1417
+ }, []);
1418
+ const handleClose = () => {
1419
+ setShow(false);
1420
+ };
1421
+ const handleOpen = () => {
1422
+ console.log("open");
1423
+ setShow(true);
1424
+ };
1425
+ console.log(show, "open");
1426
+ return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Loader_default, { loading: true }));
1427
+ }
1205
1428
  export {
1429
+ PaywithFractal,
1206
1430
  RequestPayment
1207
1431
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pinerohit11/testwidget",
3
- "version": "0.1.36",
3
+ "version": "0.1.37",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "next dev",