@odus/checkout 0.8.0 → 0.10.0
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/checkout.d.ts +8 -0
- package/dist/checkout.es.js +729 -649
- package/dist/checkout.umd.js +18 -0
- package/dist/index.css +1 -1
- package/dist/package.json +1 -1
- package/package.json +1 -1
package/dist/checkout.es.js
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
const N = (
|
|
2
|
-
class
|
|
1
|
+
const N = () => "http://localhost:3000";
|
|
2
|
+
class H {
|
|
3
3
|
apiKey;
|
|
4
4
|
baseUrl;
|
|
5
5
|
browserInfo;
|
|
6
|
-
constructor(e, t,
|
|
7
|
-
this.apiKey = e, this.baseUrl = N(
|
|
6
|
+
constructor(e, t, a) {
|
|
7
|
+
this.apiKey = e, this.baseUrl = N(), this.browserInfo = a || { userAgent: navigator.userAgent };
|
|
8
8
|
}
|
|
9
9
|
async fetchApi({
|
|
10
10
|
endpoint: e,
|
|
11
11
|
method: t = "POST",
|
|
12
|
-
body:
|
|
13
|
-
customHeaders:
|
|
12
|
+
body: a,
|
|
13
|
+
customHeaders: i = {}
|
|
14
14
|
}) {
|
|
15
15
|
const r = {
|
|
16
16
|
Authorization: `Bearer ${this.apiKey}`,
|
|
17
17
|
"Content-Type": "application/json",
|
|
18
|
-
...
|
|
18
|
+
...i
|
|
19
19
|
};
|
|
20
20
|
try {
|
|
21
21
|
const s = await fetch(`${this.baseUrl}${e}`, {
|
|
22
22
|
method: t,
|
|
23
23
|
headers: r,
|
|
24
|
-
body:
|
|
24
|
+
body: a ? JSON.stringify(a) : void 0
|
|
25
25
|
});
|
|
26
26
|
if (!s.ok) {
|
|
27
|
-
let
|
|
27
|
+
let n;
|
|
28
28
|
try {
|
|
29
|
-
|
|
29
|
+
n = await s.json();
|
|
30
30
|
} catch (c) {
|
|
31
31
|
console.log("error", c);
|
|
32
32
|
}
|
|
33
33
|
throw {
|
|
34
|
-
message:
|
|
34
|
+
message: n?.message[0] || `API request failed: ${s.status} ${s.statusText}`,
|
|
35
35
|
status: s.status,
|
|
36
36
|
statusText: s.statusText,
|
|
37
|
-
details:
|
|
37
|
+
details: n
|
|
38
38
|
};
|
|
39
39
|
}
|
|
40
40
|
return s.json();
|
|
@@ -51,26 +51,26 @@ class O {
|
|
|
51
51
|
async authorizePayment({
|
|
52
52
|
paymentId: e,
|
|
53
53
|
checkoutKey: t,
|
|
54
|
-
formData:
|
|
55
|
-
token:
|
|
54
|
+
formData: a,
|
|
55
|
+
token: i,
|
|
56
56
|
returnUrl: r
|
|
57
57
|
}) {
|
|
58
58
|
let s = {};
|
|
59
|
-
if (
|
|
60
|
-
const
|
|
59
|
+
if (i && a) {
|
|
60
|
+
const n = a.cardExpiry.replace(/\s+/g, "").split("/"), l = n[0], c = n[1];
|
|
61
61
|
s = {
|
|
62
62
|
paymentMethodData: {
|
|
63
63
|
type: "card",
|
|
64
64
|
card: {
|
|
65
|
-
token:
|
|
65
|
+
token: i,
|
|
66
66
|
expMonth: l,
|
|
67
67
|
expYear: `20${c}`,
|
|
68
|
-
cardholderName:
|
|
68
|
+
cardholderName: a.name
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
customerData: {
|
|
72
|
-
email:
|
|
73
|
-
name:
|
|
72
|
+
email: a.email,
|
|
73
|
+
name: a.name
|
|
74
74
|
},
|
|
75
75
|
context: {
|
|
76
76
|
returnUrl: r,
|
|
@@ -90,27 +90,28 @@ class O {
|
|
|
90
90
|
return await this.fetchApi({
|
|
91
91
|
endpoint: `/payments/${e}/authorize`,
|
|
92
92
|
customHeaders: {
|
|
93
|
-
Authorization: `Bearer ${t}
|
|
93
|
+
Authorization: `Bearer ${t}`,
|
|
94
|
+
"X-Idempotency-Key": e
|
|
94
95
|
},
|
|
95
96
|
body: s
|
|
96
97
|
});
|
|
97
98
|
}
|
|
98
99
|
}
|
|
99
|
-
const
|
|
100
|
-
id:
|
|
100
|
+
const O = async ({
|
|
101
|
+
id: o,
|
|
101
102
|
apiKey: e,
|
|
102
103
|
environment: t
|
|
103
104
|
}) => {
|
|
104
|
-
const
|
|
105
|
+
const a = N(), i = await fetch(`${a}/checkout-profiles/${o}`, {
|
|
105
106
|
method: "GET",
|
|
106
107
|
headers: {
|
|
107
108
|
"Content-Type": "application/json",
|
|
108
109
|
Authorization: `Bearer ${e}`
|
|
109
110
|
}
|
|
110
111
|
});
|
|
111
|
-
if (!
|
|
112
|
-
throw new Error(`HTTP error! Status: ${
|
|
113
|
-
return await
|
|
112
|
+
if (!i.ok)
|
|
113
|
+
throw new Error(`HTTP error! Status: ${i.status}`);
|
|
114
|
+
return await i.json();
|
|
114
115
|
};
|
|
115
116
|
class K {
|
|
116
117
|
events = /* @__PURE__ */ new Map();
|
|
@@ -122,8 +123,8 @@ class K {
|
|
|
122
123
|
*/
|
|
123
124
|
subscribe(e, t) {
|
|
124
125
|
return this.events.has(e) || this.events.set(e, /* @__PURE__ */ new Set()), this.events.get(e)?.add(t), () => {
|
|
125
|
-
const
|
|
126
|
-
|
|
126
|
+
const a = this.events.get(e);
|
|
127
|
+
a && (a.delete(t), a.size === 0 && this.events.delete(e));
|
|
127
128
|
};
|
|
128
129
|
}
|
|
129
130
|
/**
|
|
@@ -132,8 +133,8 @@ class K {
|
|
|
132
133
|
* @param data - The data to pass to subscribers
|
|
133
134
|
*/
|
|
134
135
|
publish(e, t) {
|
|
135
|
-
const
|
|
136
|
-
|
|
136
|
+
const a = this.events.get(e);
|
|
137
|
+
a && a.forEach((i) => i(t));
|
|
137
138
|
}
|
|
138
139
|
/**
|
|
139
140
|
* Clear all event subscriptions
|
|
@@ -150,13 +151,13 @@ class K {
|
|
|
150
151
|
return this.events.get(e)?.size || 0;
|
|
151
152
|
}
|
|
152
153
|
}
|
|
153
|
-
const
|
|
154
|
-
class
|
|
154
|
+
const q = new K();
|
|
155
|
+
class j {
|
|
155
156
|
state;
|
|
156
157
|
initialState;
|
|
157
158
|
eventBus;
|
|
158
159
|
stateChangedEvent = "state-changed";
|
|
159
|
-
constructor(e, t =
|
|
160
|
+
constructor(e, t = q) {
|
|
160
161
|
this.initialState = { ...e }, this.state = { ...e }, this.eventBus = t;
|
|
161
162
|
}
|
|
162
163
|
/**
|
|
@@ -196,51 +197,51 @@ class U {
|
|
|
196
197
|
return this.state[e];
|
|
197
198
|
}
|
|
198
199
|
}
|
|
199
|
-
function
|
|
200
|
-
return new
|
|
200
|
+
function T(o) {
|
|
201
|
+
return new j(o);
|
|
201
202
|
}
|
|
202
|
-
function
|
|
203
|
-
apiKey:
|
|
203
|
+
function U({
|
|
204
|
+
apiKey: o,
|
|
204
205
|
profileId: e,
|
|
205
206
|
environment: t
|
|
206
207
|
}) {
|
|
207
|
-
const
|
|
208
|
+
const a = T({
|
|
208
209
|
checkoutProfile: void 0,
|
|
209
210
|
isLoading: !0,
|
|
210
211
|
error: null
|
|
211
|
-
}),
|
|
212
|
+
}), i = async () => {
|
|
212
213
|
try {
|
|
213
|
-
|
|
214
|
-
const r = await
|
|
215
|
-
apiKey:
|
|
214
|
+
a.setState({ isLoading: !0 });
|
|
215
|
+
const r = await O({
|
|
216
|
+
apiKey: o,
|
|
216
217
|
id: e,
|
|
217
218
|
environment: t
|
|
218
219
|
});
|
|
219
|
-
r &&
|
|
220
|
+
r && a.setState({
|
|
220
221
|
checkoutProfile: r,
|
|
221
222
|
isLoading: !1,
|
|
222
223
|
error: null
|
|
223
224
|
});
|
|
224
225
|
} catch (r) {
|
|
225
|
-
|
|
226
|
+
a.setState({
|
|
226
227
|
error: "Failed to load checkout profile",
|
|
227
228
|
isLoading: !1
|
|
228
229
|
}), console.error(r);
|
|
229
230
|
}
|
|
230
231
|
};
|
|
231
|
-
return
|
|
232
|
-
getState:
|
|
233
|
-
subscribe:
|
|
234
|
-
reload:
|
|
232
|
+
return i(), {
|
|
233
|
+
getState: a.getState.bind(a),
|
|
234
|
+
subscribe: a.subscribe.bind(a),
|
|
235
|
+
reload: i
|
|
235
236
|
};
|
|
236
237
|
}
|
|
237
|
-
const
|
|
238
|
-
cardNumber: (
|
|
239
|
-
cardExpiry: (
|
|
240
|
-
const t =
|
|
238
|
+
const D = {
|
|
239
|
+
cardNumber: (o) => (o.replace(/\s/g, "").match(/.{1,4}/g) || []).join(" "),
|
|
240
|
+
cardExpiry: (o) => {
|
|
241
|
+
const t = o.replace(/\D/g, "").slice(0, 4);
|
|
241
242
|
return t.length > 2 ? `${t.slice(0, 2)} / ${t.slice(2, 4)}` : t;
|
|
242
243
|
}
|
|
243
|
-
},
|
|
244
|
+
}, $ = {
|
|
244
245
|
"gmail.com": [
|
|
245
246
|
"gmal.com",
|
|
246
247
|
"gmil.com",
|
|
@@ -312,98 +313,98 @@ const z = {
|
|
|
312
313
|
"comcast.net": ["comcast.com", "comcat.net", "comcst.net", "comcastnet", "comcast.nt", "comcas.net"],
|
|
313
314
|
"verizon.net": ["verizon.com", "verizon.nt", "verizonnet", "verizn.net", "verizon.ne", "verzon.net"],
|
|
314
315
|
"att.net": ["att.com", "at.net", "att.nt", "attnet", "att.ne", "attt.net"]
|
|
315
|
-
},
|
|
316
|
-
if (!
|
|
316
|
+
}, _ = (o) => {
|
|
317
|
+
if (!o || o.includes("."))
|
|
317
318
|
return null;
|
|
318
319
|
const e = ["com", "net", "org", "edu", "gov", "io", "co"];
|
|
319
320
|
for (const t of e) {
|
|
320
|
-
if (
|
|
321
|
+
if (o === "companycok" && t === "co")
|
|
321
322
|
return "company.co";
|
|
322
|
-
if (
|
|
323
|
-
const
|
|
324
|
-
return `${
|
|
323
|
+
if (o.endsWith(t) && !o.includes(".")) {
|
|
324
|
+
const a = o.length - t.length;
|
|
325
|
+
return `${o.substring(0, a)}.${t}`;
|
|
325
326
|
}
|
|
326
327
|
}
|
|
327
328
|
return null;
|
|
328
|
-
},
|
|
329
|
-
if (
|
|
330
|
-
if (e.length === 0) return
|
|
331
|
-
const t = e.length + 1,
|
|
329
|
+
}, G = (o, e) => {
|
|
330
|
+
if (o.length === 0) return e.length;
|
|
331
|
+
if (e.length === 0) return o.length;
|
|
332
|
+
const t = e.length + 1, a = o.length + 1, i = Array.from(
|
|
332
333
|
{ length: t },
|
|
333
|
-
(r, s) => Array.from({ length:
|
|
334
|
+
(r, s) => Array.from({ length: a }, (n, l) => s === 0 ? l : l === 0 ? s : 0)
|
|
334
335
|
);
|
|
335
336
|
for (let r = 1; r < t; r++)
|
|
336
|
-
for (let s = 1; s <
|
|
337
|
-
const
|
|
338
|
-
|
|
339
|
-
|
|
337
|
+
for (let s = 1; s < a; s++) {
|
|
338
|
+
const n = o[s - 1] === e[r - 1] ? 0 : 1;
|
|
339
|
+
i[r][s] = Math.min(
|
|
340
|
+
i[r - 1][s] + 1,
|
|
340
341
|
// deletion
|
|
341
|
-
|
|
342
|
+
i[r][s - 1] + 1,
|
|
342
343
|
// insertion
|
|
343
|
-
|
|
344
|
+
i[r - 1][s - 1] + n
|
|
344
345
|
// substitution
|
|
345
346
|
);
|
|
346
347
|
}
|
|
347
|
-
return
|
|
348
|
-
},
|
|
349
|
-
let t = null,
|
|
350
|
-
const
|
|
351
|
-
for (const r of Object.keys(
|
|
352
|
-
const s =
|
|
353
|
-
s <= 2 && s <
|
|
348
|
+
return i[e.length][o.length];
|
|
349
|
+
}, Y = (o) => {
|
|
350
|
+
let t = null, a = 3;
|
|
351
|
+
const i = o.toLowerCase();
|
|
352
|
+
for (const r of Object.keys($)) {
|
|
353
|
+
const s = G(i, r);
|
|
354
|
+
s <= 2 && s < a && (a = s, t = r);
|
|
354
355
|
}
|
|
355
356
|
return t;
|
|
356
|
-
},
|
|
357
|
-
const { t:
|
|
357
|
+
}, Z = () => {
|
|
358
|
+
const { t: o } = P();
|
|
358
359
|
return {
|
|
359
360
|
validateEmail: (t) => {
|
|
360
|
-
const
|
|
361
|
+
const a = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
361
362
|
if (!t)
|
|
362
363
|
return {
|
|
363
364
|
isValid: !1,
|
|
364
|
-
message:
|
|
365
|
+
message: o("validation.emailInvalid"),
|
|
365
366
|
suggestion: null
|
|
366
367
|
};
|
|
367
|
-
const
|
|
368
|
-
if (
|
|
368
|
+
const i = t.indexOf("@");
|
|
369
|
+
if (i === -1)
|
|
369
370
|
return {
|
|
370
371
|
isValid: !1,
|
|
371
|
-
message:
|
|
372
|
+
message: o("validation.emailInvalid"),
|
|
372
373
|
suggestion: null
|
|
373
374
|
};
|
|
374
|
-
const r = t.substring(0,
|
|
375
|
+
const r = t.substring(0, i), s = t.substring(i + 1);
|
|
375
376
|
if (!s.includes(".")) {
|
|
376
|
-
const l =
|
|
377
|
+
const l = _(s);
|
|
377
378
|
if (l)
|
|
378
379
|
return {
|
|
379
380
|
isValid: !1,
|
|
380
|
-
message:
|
|
381
|
+
message: o("validation.emailSuggestion", {
|
|
381
382
|
email: `${r}@${l}`
|
|
382
383
|
}),
|
|
383
384
|
suggestion: `${r}@${l}`
|
|
384
385
|
};
|
|
385
|
-
for (const c of Object.keys(
|
|
386
|
+
for (const c of Object.keys($))
|
|
386
387
|
if (c.replace(/\./g, "") === s)
|
|
387
388
|
return {
|
|
388
389
|
isValid: !1,
|
|
389
|
-
message:
|
|
390
|
+
message: o("validation.emailSuggestion", {
|
|
390
391
|
email: `${r}@${c}`
|
|
391
392
|
}),
|
|
392
393
|
suggestion: `${r}@${c}`
|
|
393
394
|
};
|
|
394
395
|
}
|
|
395
|
-
if (!
|
|
396
|
+
if (!a.test(t))
|
|
396
397
|
return {
|
|
397
398
|
isValid: !1,
|
|
398
|
-
message:
|
|
399
|
+
message: o("validation.emailInvalid"),
|
|
399
400
|
suggestion: null
|
|
400
401
|
};
|
|
401
|
-
const
|
|
402
|
-
if (
|
|
403
|
-
const l = `${r}@${
|
|
402
|
+
const n = Y(s);
|
|
403
|
+
if (n && n !== s) {
|
|
404
|
+
const l = `${r}@${n}`;
|
|
404
405
|
return {
|
|
405
406
|
isValid: !1,
|
|
406
|
-
message:
|
|
407
|
+
message: o("validation.emailSuggestion", { email: l }),
|
|
407
408
|
suggestion: l
|
|
408
409
|
};
|
|
409
410
|
}
|
|
@@ -414,30 +415,30 @@ const z = {
|
|
|
414
415
|
};
|
|
415
416
|
}
|
|
416
417
|
};
|
|
417
|
-
},
|
|
418
|
-
const { t:
|
|
418
|
+
}, J = () => {
|
|
419
|
+
const { t: o } = P(), { validateEmail: e } = Z();
|
|
419
420
|
return {
|
|
420
421
|
email: (t) => {
|
|
421
|
-
const
|
|
422
|
-
return
|
|
422
|
+
const a = e(t);
|
|
423
|
+
return a.isValid ? void 0 : a.message;
|
|
423
424
|
},
|
|
424
425
|
name: (t) => {
|
|
425
426
|
if (!t.trim())
|
|
426
|
-
return
|
|
427
|
+
return o("validation.nameRequired");
|
|
427
428
|
},
|
|
428
429
|
cardExpiry: (t) => {
|
|
429
|
-
const
|
|
430
|
-
if (!
|
|
431
|
-
return
|
|
432
|
-
const s = /* @__PURE__ */ new Date(),
|
|
430
|
+
const a = t.replace(/\s/g, ""), [i, r] = a.split("/").map((p) => p.trim());
|
|
431
|
+
if (!i || !r || i.length !== 2 || r.length !== 2)
|
|
432
|
+
return o("validation.cardExpiryFormat");
|
|
433
|
+
const s = /* @__PURE__ */ new Date(), n = s.getFullYear() % 100, l = s.getMonth() + 1, c = parseInt(i, 10), d = parseInt(r, 10);
|
|
433
434
|
if (c < 1 || c > 12)
|
|
434
|
-
return
|
|
435
|
-
if (d <
|
|
436
|
-
return
|
|
435
|
+
return o("validation.cardExpiryFormat");
|
|
436
|
+
if (d < n || d === n && c < l)
|
|
437
|
+
return o("validation.cardExpiryInvalid");
|
|
437
438
|
}
|
|
438
439
|
};
|
|
439
|
-
},
|
|
440
|
-
const
|
|
440
|
+
}, W = () => {
|
|
441
|
+
const o = J(), e = T({
|
|
441
442
|
formData: {
|
|
442
443
|
name: "",
|
|
443
444
|
email: "",
|
|
@@ -451,51 +452,51 @@ const z = {
|
|
|
451
452
|
},
|
|
452
453
|
isValid: !1
|
|
453
454
|
}), t = (l, c) => {
|
|
454
|
-
const d =
|
|
455
|
+
const d = o[l];
|
|
455
456
|
return d?.(c);
|
|
456
|
-
},
|
|
457
|
+
}, a = (l) => {
|
|
457
458
|
const c = {};
|
|
458
459
|
return Object.keys(l).forEach((d) => {
|
|
459
|
-
const
|
|
460
|
-
|
|
460
|
+
const p = t(d, l[d]);
|
|
461
|
+
p && (c[d] = p);
|
|
461
462
|
}), c;
|
|
462
|
-
},
|
|
463
|
-
const c =
|
|
463
|
+
}, i = (l) => {
|
|
464
|
+
const c = a(l);
|
|
464
465
|
return Object.keys(c).length === 0;
|
|
465
466
|
}, r = (l, c) => {
|
|
466
467
|
const d = e.getState();
|
|
467
|
-
let
|
|
468
|
-
l in
|
|
469
|
-
const
|
|
468
|
+
let p = c;
|
|
469
|
+
l in D && (p = D[l](c));
|
|
470
|
+
const g = {
|
|
470
471
|
...d.formData,
|
|
471
|
-
[l]:
|
|
472
|
-
},
|
|
472
|
+
[l]: p
|
|
473
|
+
}, y = { ...d.errors };
|
|
473
474
|
if (d.touched[l]) {
|
|
474
|
-
const
|
|
475
|
-
|
|
475
|
+
const F = t(l, p);
|
|
476
|
+
F ? y[l] = F : delete y[l];
|
|
476
477
|
}
|
|
477
478
|
e.setState({
|
|
478
|
-
formData:
|
|
479
|
-
errors:
|
|
480
|
-
isValid:
|
|
479
|
+
formData: g,
|
|
480
|
+
errors: y,
|
|
481
|
+
isValid: i(g)
|
|
481
482
|
});
|
|
482
483
|
}, s = (l, c) => {
|
|
483
|
-
const d = e.getState(),
|
|
484
|
+
const d = e.getState(), p = {
|
|
484
485
|
...d.touched,
|
|
485
486
|
[l]: !0
|
|
486
|
-
},
|
|
487
|
-
|
|
488
|
-
touched:
|
|
489
|
-
errors:
|
|
487
|
+
}, g = t(l, c), y = { ...d.errors };
|
|
488
|
+
g ? y[l] = g : delete y[l], e.setState({
|
|
489
|
+
touched: p,
|
|
490
|
+
errors: y
|
|
490
491
|
});
|
|
491
|
-
},
|
|
492
|
+
}, n = (l) => {
|
|
492
493
|
const d = {
|
|
493
494
|
...e.getState().formData,
|
|
494
495
|
...l
|
|
495
496
|
};
|
|
496
497
|
e.setState({
|
|
497
498
|
formData: d,
|
|
498
|
-
isValid:
|
|
499
|
+
isValid: i(d)
|
|
499
500
|
});
|
|
500
501
|
};
|
|
501
502
|
return {
|
|
@@ -503,35 +504,35 @@ const z = {
|
|
|
503
504
|
subscribe: e.subscribe.bind(e),
|
|
504
505
|
handleChange: r,
|
|
505
506
|
handleBlur: s,
|
|
506
|
-
setFormData:
|
|
507
|
+
setFormData: n,
|
|
507
508
|
reset: e.resetState.bind(e)
|
|
508
509
|
};
|
|
509
|
-
},
|
|
510
|
-
props:
|
|
510
|
+
}, X = async ({
|
|
511
|
+
props: o,
|
|
511
512
|
apiKey: e,
|
|
512
513
|
environment: t
|
|
513
514
|
}) => {
|
|
514
|
-
const
|
|
515
|
+
const a = N(), i = await fetch(`${a}/checkout/init`, {
|
|
515
516
|
method: "POST",
|
|
516
517
|
headers: {
|
|
517
518
|
"Content-Type": "application/json",
|
|
518
519
|
Authorization: `Bearer ${e}`
|
|
519
520
|
},
|
|
520
|
-
body: JSON.stringify(
|
|
521
|
+
body: JSON.stringify(o)
|
|
521
522
|
});
|
|
522
|
-
if (!
|
|
523
|
-
throw new Error(`HTTP error! Status: ${
|
|
524
|
-
return await
|
|
523
|
+
if (!i.ok)
|
|
524
|
+
throw new Error(`HTTP error! Status: ${i.status}`);
|
|
525
|
+
return await i.json();
|
|
525
526
|
};
|
|
526
|
-
function
|
|
527
|
-
apiKey:
|
|
527
|
+
function Q({
|
|
528
|
+
apiKey: o,
|
|
528
529
|
checkoutProfile: e,
|
|
529
530
|
inputStyles: t,
|
|
530
|
-
setFormData:
|
|
531
|
-
environment:
|
|
531
|
+
setFormData: a,
|
|
532
|
+
environment: i,
|
|
532
533
|
paymentId: r
|
|
533
534
|
}) {
|
|
534
|
-
const s =
|
|
535
|
+
const s = T({
|
|
535
536
|
iframeConfig: void 0,
|
|
536
537
|
loadingIframe: !0,
|
|
537
538
|
isCcValid: !1,
|
|
@@ -540,38 +541,38 @@ function ee({
|
|
|
540
541
|
isCvvFocused: !1,
|
|
541
542
|
possibleCardType: "unknown"
|
|
542
543
|
});
|
|
543
|
-
let
|
|
544
|
+
let n = null;
|
|
544
545
|
const l = async () => {
|
|
545
546
|
try {
|
|
546
|
-
const
|
|
547
|
+
const u = await X({
|
|
547
548
|
props: {
|
|
548
549
|
payment: r
|
|
549
550
|
},
|
|
550
|
-
apiKey:
|
|
551
|
-
environment:
|
|
551
|
+
apiKey: o,
|
|
552
|
+
environment: i
|
|
552
553
|
});
|
|
553
|
-
|
|
554
|
+
u && (s.setState({
|
|
554
555
|
iframeConfig: {
|
|
555
|
-
...
|
|
556
|
+
...u,
|
|
556
557
|
origin: globalThis.location.origin
|
|
557
558
|
}
|
|
558
559
|
}), d());
|
|
559
|
-
} catch (
|
|
560
|
-
console.error("Failed to generate iframe config:",
|
|
560
|
+
} catch (u) {
|
|
561
|
+
console.error("Failed to generate iframe config:", u);
|
|
561
562
|
}
|
|
562
563
|
}, c = () => {
|
|
563
|
-
const
|
|
564
|
-
if (!
|
|
564
|
+
const u = s.getState();
|
|
565
|
+
if (!u.iframeConfig || !e) {
|
|
565
566
|
console.error(
|
|
566
567
|
"[IframeConfig] Missing iframe config or checkout profile."
|
|
567
568
|
);
|
|
568
569
|
return;
|
|
569
570
|
}
|
|
570
|
-
const
|
|
571
|
-
if (!
|
|
571
|
+
const b = document.getElementById("card-element"), k = document.getElementById("card-cvv-element");
|
|
572
|
+
if (!b || !k)
|
|
572
573
|
throw new Error("Card elements not found in DOM");
|
|
573
|
-
|
|
574
|
-
...
|
|
574
|
+
n = new globalThis.TokenEx.Iframe("card-element", {
|
|
575
|
+
...u.iframeConfig,
|
|
575
576
|
placeholder: "1234 1234 1234 1234",
|
|
576
577
|
cvvPlaceholder: "CVC",
|
|
577
578
|
cvv: !0,
|
|
@@ -594,34 +595,34 @@ function ee({
|
|
|
594
595
|
base: `${t.base}; border-radius: 0px 0px ${e.styles.borderRadius}px 0px`
|
|
595
596
|
}
|
|
596
597
|
}
|
|
597
|
-
}),
|
|
598
|
+
}), n.on("load", () => {
|
|
598
599
|
s.setState({ loadingIframe: !1 });
|
|
599
|
-
}),
|
|
600
|
-
const { nameOnCard:
|
|
601
|
-
|
|
602
|
-
name:
|
|
603
|
-
cardExpiry:
|
|
600
|
+
}), n.on("autoCompleteValues", function(v) {
|
|
601
|
+
const { nameOnCard: w, cardExp: S } = v;
|
|
602
|
+
a({
|
|
603
|
+
name: w,
|
|
604
|
+
cardExpiry: S
|
|
604
605
|
});
|
|
605
|
-
}),
|
|
606
|
-
const { isValid:
|
|
606
|
+
}), n.on("validate", function(v) {
|
|
607
|
+
const { isValid: w, isCvvValid: S } = v;
|
|
607
608
|
s.setState({
|
|
608
|
-
isCcValid:
|
|
609
|
-
isCvvValid:
|
|
609
|
+
isCcValid: w,
|
|
610
|
+
isCvvValid: S
|
|
610
611
|
});
|
|
611
|
-
}),
|
|
612
|
+
}), n.on("focus", function() {
|
|
612
613
|
s.setState({ isFocused: !0 });
|
|
613
|
-
}),
|
|
614
|
+
}), n.on("blur", function() {
|
|
614
615
|
s.setState({ isFocused: !1 });
|
|
615
|
-
}),
|
|
616
|
+
}), n.on("cvvFocus", function() {
|
|
616
617
|
s.setState({ isCvvFocused: !0 });
|
|
617
|
-
}),
|
|
618
|
+
}), n.on("cvvBlur", function() {
|
|
618
619
|
s.setState({ isCvvFocused: !1 });
|
|
619
|
-
}),
|
|
620
|
+
}), n.on(
|
|
620
621
|
"cardTypeChange",
|
|
621
|
-
function({ possibleCardType:
|
|
622
|
-
s.setState({ possibleCardType:
|
|
622
|
+
function({ possibleCardType: v }) {
|
|
623
|
+
s.setState({ possibleCardType: v });
|
|
623
624
|
}
|
|
624
|
-
),
|
|
625
|
+
), n.load();
|
|
625
626
|
}, d = () => {
|
|
626
627
|
if (!s.getState().iframeConfig || !e) {
|
|
627
628
|
console.error(
|
|
@@ -635,126 +636,134 @@ function ee({
|
|
|
635
636
|
}
|
|
636
637
|
try {
|
|
637
638
|
c();
|
|
638
|
-
} catch (
|
|
639
|
-
console.error("Failed to create TokenEx iframe:",
|
|
639
|
+
} catch (b) {
|
|
640
|
+
console.error("Failed to create TokenEx iframe:", b);
|
|
640
641
|
}
|
|
641
|
-
},
|
|
642
|
-
|
|
643
|
-
},
|
|
644
|
-
|
|
645
|
-
},
|
|
646
|
-
|
|
647
|
-
await
|
|
648
|
-
}),
|
|
649
|
-
},
|
|
650
|
-
if (
|
|
642
|
+
}, p = async () => {
|
|
643
|
+
o && await l();
|
|
644
|
+
}, g = () => {
|
|
645
|
+
n && (n.remove(), n = null);
|
|
646
|
+
}, y = async (u) => {
|
|
647
|
+
n && (n.on("tokenize", async function(b) {
|
|
648
|
+
await u(b);
|
|
649
|
+
}), n.tokenize());
|
|
650
|
+
}, F = () => {
|
|
651
|
+
if (n)
|
|
651
652
|
try {
|
|
652
|
-
|
|
653
|
-
} catch (
|
|
654
|
-
console.error("Failed to focus card number iframe:",
|
|
653
|
+
n.focus();
|
|
654
|
+
} catch (u) {
|
|
655
|
+
console.error("Failed to focus card number iframe:", u);
|
|
655
656
|
}
|
|
656
657
|
}, I = () => {
|
|
657
|
-
if (
|
|
658
|
+
if (n)
|
|
658
659
|
try {
|
|
659
|
-
|
|
660
|
-
} catch (
|
|
661
|
-
console.error("Failed to focus CVV iframe:",
|
|
660
|
+
n.cvvFocus();
|
|
661
|
+
} catch (u) {
|
|
662
|
+
console.error("Failed to focus CVV iframe:", u);
|
|
662
663
|
}
|
|
663
664
|
};
|
|
664
665
|
return {
|
|
665
666
|
getState: s.getState.bind(s),
|
|
666
667
|
subscribe: s.subscribe.bind(s),
|
|
667
|
-
tokenize:
|
|
668
|
-
cleanup:
|
|
669
|
-
initialize:
|
|
670
|
-
focusCardNumber:
|
|
668
|
+
tokenize: y,
|
|
669
|
+
cleanup: g,
|
|
670
|
+
initialize: p,
|
|
671
|
+
focusCardNumber: F,
|
|
671
672
|
focusCvv: I
|
|
672
673
|
};
|
|
673
674
|
}
|
|
674
|
-
const
|
|
675
|
-
email:
|
|
676
|
-
cardholderNameLabel:
|
|
675
|
+
const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ae = "Kartendaten", ie = "Vollständiger Name", re = "MM / JJ", se = "Das Fenster nicht schließen", ne = { pay: "ZAHLEN", submit: "ABSENDEN", getPlan: "MEINEN PLAN ERHALTEN", donate: "spenden", book: "jetzt buchen", order: "jetzt bestellen" }, oe = { emailSuggestion: "Meinten Sie {{email}}?", emailInvalid: "Ihre E-Mail-Adresse ist nicht korrekt", cardExpiryInvalid: "Das Ablaufdatum Ihrer Karte liegt in der Vergangenheit", cardExpiryFormat: "Das Ablaufdatum Ihrer Karte ist unvollständig", cardSecurityFormat: "Der Sicherheitscode Ihrer Karte ist unvollständig", nameRequired: "Gib deinen Namen genau so ein, wie er auf deiner Karte steht", cardNumberInvalid: "Die Kartennummer ist unvollständig" }, le = {
|
|
676
|
+
email: ee,
|
|
677
|
+
cardholderNameLabel: te,
|
|
677
678
|
cardInformation: ae,
|
|
678
|
-
cardholderNamePlaceholder:
|
|
679
|
-
cardExpiry:
|
|
680
|
-
loading:
|
|
679
|
+
cardholderNamePlaceholder: ie,
|
|
680
|
+
cardExpiry: re,
|
|
681
|
+
loading: se,
|
|
682
|
+
"pay-with-card": "oder mit Karte bezahlen",
|
|
681
683
|
buttonTexts: ne,
|
|
682
|
-
validation:
|
|
683
|
-
},
|
|
684
|
-
email:
|
|
685
|
-
cardholderNameLabel:
|
|
686
|
-
cardInformation:
|
|
687
|
-
cardholderNamePlaceholder:
|
|
688
|
-
cardExpiry:
|
|
689
|
-
loading:
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
684
|
+
validation: oe
|
|
685
|
+
}, ce = "Email", de = "Cardholder name", he = "Card information", me = "Full name on card", ue = "MM / YY", pe = "Do not close the window", fe = { pay: "PAY", submit: "SUBMIT", getPlan: "GET MY PLAN", donate: "DONATE", book: "BOOK NOW", order: "ORDER NOW" }, ge = { emailSuggestion: "Did you mean {{email}}?", emailInvalid: "Your email is not correct", cardExpiryInvalid: "Your card's expiration date is in the past", cardExpiryFormat: "Your card’s expiration date is incomplete", cardSecurityFormat: "Your card’s security code is incomplete", nameRequired: "Please enter the name as it appears on your card", cardNumberInvalid: "Your card number is invalid" }, ye = {
|
|
686
|
+
email: ce,
|
|
687
|
+
cardholderNameLabel: de,
|
|
688
|
+
cardInformation: he,
|
|
689
|
+
cardholderNamePlaceholder: me,
|
|
690
|
+
cardExpiry: ue,
|
|
691
|
+
loading: pe,
|
|
692
|
+
"pay-with-card": "or pay with card",
|
|
693
|
+
buttonTexts: fe,
|
|
694
|
+
validation: ge
|
|
695
|
+
}, ve = "Correo electrónico", Ee = "Nombre del titular de la tarjeta", Ce = "Información de la tarjeta", be = "Nombre completo en la tarjeta", Se = "MM / AA", xe = "Por favor, no cierre esta ventana", Fe = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTENER MI PLAN", donate: "DONAR", book: "RESERVAR AHORA", order: "ORDENAR AHORA" }, ke = { emailSuggestion: "¿Quisiste decir {{email}}?", emailInvalid: "Su correo electrónico no es válido", cardExpiryInvalid: "La fecha de vencimiento de la tarjeta ya pasó", cardExpiryFormat: "La fecha de vencimiento de su tarjeta está incompleta", cardSecurityFormat: "El código de seguridad de su tarjeta está incompleto", nameRequired: "Por favor, ingrese el nombre tal como aparece en su tarjeta", cardNumberInvalid: "Su número de tarjeta no es válido" }, we = {
|
|
696
|
+
email: ve,
|
|
697
|
+
cardholderNameLabel: Ee,
|
|
698
|
+
cardInformation: Ce,
|
|
699
|
+
cardholderNamePlaceholder: be,
|
|
700
|
+
cardExpiry: Se,
|
|
701
|
+
loading: xe,
|
|
702
|
+
"pay-with-card": "o paga con tarjeta",
|
|
703
|
+
buttonTexts: Fe,
|
|
704
|
+
validation: ke
|
|
705
|
+
}, Me = "E-mail", Le = "Nom du titulaire de la carte", Te = "Informations de la carte", Ie = "Nom complet figurant sur la carte", Ne = "MM / AA", Pe = "Veuillez ne pas fermer cette fenêtre", ze = { pay: "PAYER", submit: "ENVOYER", getPlan: "OBTENIR MON PLAN", donate: "FAIRE UN DON", book: "RÉSERVER MAINTENANT", order: "COMMANDER MAINTENANT" }, De = { emailSuggestion: "Vouliez-vous dire {{email}}?", emailInvalid: "Votre adresse e-mail n’est pas valide", cardExpiryInvalid: "La date d'expiration de votre carte est dans le passé", cardExpiryFormat: "La date d’expiration de votre carte est incomplète", cardSecurityFormat: "Le code de sécurité de votre carte est incomplet", nameRequired: "Veuillez saisir le nom tel qu’il figure sur votre carte", cardNumberInvalid: "Votre numéro de carte est invalide" }, Ve = {
|
|
706
|
+
email: Me,
|
|
707
|
+
cardholderNameLabel: Le,
|
|
708
|
+
cardInformation: Te,
|
|
709
|
+
cardholderNamePlaceholder: Ie,
|
|
710
|
+
cardExpiry: Ne,
|
|
711
|
+
loading: Pe,
|
|
712
|
+
"pay-with-card": "ou payez avec une carte",
|
|
708
713
|
buttonTexts: ze,
|
|
709
|
-
validation:
|
|
710
|
-
},
|
|
711
|
-
email:
|
|
712
|
-
cardholderNameLabel:
|
|
713
|
-
cardInformation:
|
|
714
|
-
cardholderNamePlaceholder:
|
|
715
|
-
cardExpiry:
|
|
716
|
-
loading:
|
|
714
|
+
validation: De
|
|
715
|
+
}, Ae = "Email", $e = "Nome del titolare della carta", Re = "Informazioni sulla carta", Be = "Nome completo sulla carta", He = "MM / AA", Oe = "Non chiudere la finestra", Ke = { pay: "PAGA", submit: "INVIA", getPlan: "OTTIENI IL MIO PIANO", donate: "DONARE", book: "PRENOTA ORA", order: "ORDINA ORA" }, qe = { emailSuggestion: "Intendevi {{email}}?", emailInvalid: "La tua email non è corretta", cardExpiryInvalid: "La data di scadenza della tua carta è nel passato", cardExpiryFormat: "La data di scadenza della tua carta è incompleta", cardSecurityFormat: "Il codice di sicurezza della tua carta è incompleto", nameRequired: "Inserisci il nome come appare sulla tua carta", cardNumberInvalid: "Il numero della tua carta non è valido" }, je = {
|
|
716
|
+
email: Ae,
|
|
717
|
+
cardholderNameLabel: $e,
|
|
718
|
+
cardInformation: Re,
|
|
719
|
+
cardholderNamePlaceholder: Be,
|
|
720
|
+
cardExpiry: He,
|
|
721
|
+
loading: Oe,
|
|
722
|
+
"pay-with-card": "o paga con carta",
|
|
717
723
|
buttonTexts: Ke,
|
|
718
|
-
validation:
|
|
719
|
-
},
|
|
720
|
-
email:
|
|
721
|
-
cardholderNameLabel:
|
|
722
|
-
cardInformation:
|
|
723
|
-
cardholderNamePlaceholder:
|
|
724
|
-
cardExpiry:
|
|
725
|
-
loading:
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
724
|
+
validation: qe
|
|
725
|
+
}, Ue = "Adres e-mail", _e = "Imię i nazwisko posiadacza karty", Ge = "Informacje o karcie", Ye = "Imię i nazwisko na karcie", Ze = "MM / RR", Je = "Proszę nie zamykać tego okna", We = { pay: "ZAPŁAĆ", submit: "WYŚLIJ", getPlan: "POBIERZ MÓJ PLAN", donate: "PRZEKAŻ DAROWIZNĘ", book: "ZAREZERWUJ TERAZ", order: "ZAMÓW TERAZ" }, Xe = { emailSuggestion: "Czy chodziło Ci o {{email}}?", emailInvalid: "Państwa adres e-mail jest nieprawidłowy", cardExpiryInvalid: "Data ważności Państwa karty jest w przeszłości", cardExpiryFormat: "Data ważności Państwa karty jest niekompletna", cardSecurityFormat: "Kod zabezpieczający Państwa karty jest niekompletny", nameRequired: "Proszę wpisać imię i nazwisko tak, jak widnieje na karcie", cardNumberInvalid: "Numer Państwa karty jest nieprawidłowy" }, Qe = {
|
|
726
|
+
email: Ue,
|
|
727
|
+
cardholderNameLabel: _e,
|
|
728
|
+
cardInformation: Ge,
|
|
729
|
+
cardholderNamePlaceholder: Ye,
|
|
730
|
+
cardExpiry: Ze,
|
|
731
|
+
loading: Je,
|
|
732
|
+
"pay-with-card": "albo zapłać kartą",
|
|
733
|
+
buttonTexts: We,
|
|
734
|
+
validation: Xe
|
|
735
|
+
}, et = "E-mail", tt = "Nome do titular do cartão", at = "Informações do cartão", it = "Nome completo no cartão", rt = "MM / AA", st = "Por favor, não feche esta janela", nt = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTER MEU PLANO", donate: "DOAR", book: "RESERVAR AGORA", order: "FAZER PEDIDO" }, ot = { emailSuggestion: "Você quis dizer {{email}}?", emailInvalid: "O seu endereço de e-mail não é válido", cardExpiryInvalid: "A data de validade do seu cartão está no passado", cardExpiryFormat: "A data de validade do seu cartão está incompleta", cardSecurityFormat: "O código de segurança do seu cartão está incompleto", nameRequired: "Por favor, insira o nome conforme aparece no cartão", cardNumberInvalid: "O número do seu cartão é inválido" }, lt = {
|
|
736
|
+
email: et,
|
|
737
|
+
cardholderNameLabel: tt,
|
|
731
738
|
cardInformation: at,
|
|
732
|
-
cardholderNamePlaceholder:
|
|
733
|
-
cardExpiry:
|
|
734
|
-
loading:
|
|
739
|
+
cardholderNamePlaceholder: it,
|
|
740
|
+
cardExpiry: rt,
|
|
741
|
+
loading: st,
|
|
742
|
+
"pay-with-card": "ou pagar com cartão",
|
|
735
743
|
buttonTexts: nt,
|
|
736
|
-
validation:
|
|
737
|
-
},
|
|
738
|
-
email:
|
|
739
|
-
cardholderNameLabel:
|
|
740
|
-
cardInformation:
|
|
741
|
-
cardholderNamePlaceholder:
|
|
742
|
-
cardExpiry:
|
|
743
|
-
loading:
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
744
|
+
validation: ot
|
|
745
|
+
}, ct = "E-posta", dt = "Kart sahibinin adı", ht = "Kart bilgileri", mt = "Kart üzerindeki tam ad", ut = "AA / YY", pt = "Lütfen pencereyi kapatmayın", ft = { pay: "ÖDE", submit: "GÖNDER", getPlan: "PLANIMI AL", donate: "BAĞIŞ YAP", book: "ŞİMDİ REZERVASYON YAP", order: "ŞİMDİ SİPARİŞ VER" }, gt = { emailSuggestion: "{{email}} demek mi istediniz?", emailInvalid: "E-posta adresiniz geçerli değil", cardExpiryInvalid: "Kartınızın son kullanma tarihi geçmiş", cardExpiryFormat: "Kartınızın son kullanma tarihi eksik", cardSecurityFormat: "Kartınızın güvenlik kodu eksik", nameRequired: "Lütfen kart üzerindeki ismi girin", cardNumberInvalid: "Kart numaranız geçersiz" }, yt = {
|
|
746
|
+
email: ct,
|
|
747
|
+
cardholderNameLabel: dt,
|
|
748
|
+
cardInformation: ht,
|
|
749
|
+
cardholderNamePlaceholder: mt,
|
|
750
|
+
cardExpiry: ut,
|
|
751
|
+
loading: pt,
|
|
752
|
+
"pay-with-card": "veya bir kartla ödeyin",
|
|
753
|
+
buttonTexts: ft,
|
|
754
|
+
validation: gt
|
|
755
|
+
}, V = {
|
|
756
|
+
en: ye,
|
|
757
|
+
de: le,
|
|
758
|
+
es: we,
|
|
759
|
+
fr: Ve,
|
|
760
|
+
pl: Qe,
|
|
761
|
+
pt: lt,
|
|
762
|
+
tr: yt,
|
|
763
|
+
it: je
|
|
755
764
|
// Add other locales here
|
|
756
765
|
};
|
|
757
|
-
class
|
|
766
|
+
class vt {
|
|
758
767
|
locale;
|
|
759
768
|
loadedLocales = /* @__PURE__ */ new Set();
|
|
760
769
|
constructor(e = "en") {
|
|
@@ -767,32 +776,32 @@ class Et {
|
|
|
767
776
|
return this.locale;
|
|
768
777
|
}
|
|
769
778
|
translate(e, t) {
|
|
770
|
-
const
|
|
771
|
-
return !t ||
|
|
779
|
+
const a = this.getNestedTranslation(e);
|
|
780
|
+
return !t || a === e ? a : this.interpolate(a, t);
|
|
772
781
|
}
|
|
773
782
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
774
783
|
getNestedTranslation(e) {
|
|
775
|
-
const t = this.locale in
|
|
776
|
-
return
|
|
784
|
+
const t = this.locale in V ? V[this.locale] : {}, a = this.findNestedValue(t, e);
|
|
785
|
+
return a === void 0 ? e : a;
|
|
777
786
|
}
|
|
778
787
|
findNestedValue(e, t) {
|
|
779
|
-
const
|
|
780
|
-
let
|
|
781
|
-
for (const r of
|
|
782
|
-
if (
|
|
788
|
+
const a = t.split(".");
|
|
789
|
+
let i = e;
|
|
790
|
+
for (const r of a) {
|
|
791
|
+
if (i == null || !Object.prototype.hasOwnProperty.call(i, r))
|
|
783
792
|
return;
|
|
784
|
-
|
|
793
|
+
i = i[r];
|
|
785
794
|
}
|
|
786
|
-
return typeof
|
|
795
|
+
return typeof i == "string" ? i : void 0;
|
|
787
796
|
}
|
|
788
797
|
interpolate(e, t) {
|
|
789
|
-
return e.replace(/{{(\w+)}}/g, (
|
|
790
|
-
const r = t[
|
|
791
|
-
return r === void 0 ?
|
|
798
|
+
return e.replace(/{{(\w+)}}/g, (a, i) => {
|
|
799
|
+
const r = t[i];
|
|
800
|
+
return r === void 0 ? a : String(r);
|
|
792
801
|
});
|
|
793
802
|
}
|
|
794
803
|
}
|
|
795
|
-
const
|
|
804
|
+
const A = [
|
|
796
805
|
"en",
|
|
797
806
|
"de",
|
|
798
807
|
"es",
|
|
@@ -801,92 +810,92 @@ const D = [
|
|
|
801
810
|
"pt",
|
|
802
811
|
"it",
|
|
803
812
|
"tr"
|
|
804
|
-
],
|
|
805
|
-
function
|
|
806
|
-
const e = new
|
|
807
|
-
const
|
|
808
|
-
return
|
|
813
|
+
], Et = "en";
|
|
814
|
+
function Ct(o) {
|
|
815
|
+
const e = new vt(), a = (() => {
|
|
816
|
+
const n = navigator?.language?.split("-")[0]?.toLowerCase();
|
|
817
|
+
return A.includes(n) ? n : Et;
|
|
809
818
|
})();
|
|
810
|
-
e.setLocale(
|
|
811
|
-
const
|
|
812
|
-
locale:
|
|
819
|
+
e.setLocale(a);
|
|
820
|
+
const i = T({
|
|
821
|
+
locale: a,
|
|
813
822
|
translationService: e
|
|
814
823
|
});
|
|
815
824
|
return {
|
|
816
|
-
store:
|
|
817
|
-
translate: (
|
|
818
|
-
setLocale: (
|
|
819
|
-
|
|
825
|
+
store: i,
|
|
826
|
+
translate: (n, l) => i.getState().translationService.translate(n, l),
|
|
827
|
+
setLocale: (n) => {
|
|
828
|
+
A.includes(n) && (i.getState().translationService.setLocale(n), i.setState({ locale: n }));
|
|
820
829
|
},
|
|
821
|
-
getLocale: () =>
|
|
822
|
-
subscribe:
|
|
830
|
+
getLocale: () => i.getValue("locale"),
|
|
831
|
+
subscribe: i.subscribe.bind(i)
|
|
823
832
|
};
|
|
824
833
|
}
|
|
825
|
-
const
|
|
826
|
-
const { translate:
|
|
834
|
+
const bt = Ct(), P = () => {
|
|
835
|
+
const { translate: o, getLocale: e, setLocale: t, subscribe: a } = bt;
|
|
827
836
|
return {
|
|
828
|
-
t:
|
|
829
|
-
translate:
|
|
837
|
+
t: o,
|
|
838
|
+
translate: o,
|
|
830
839
|
locale: e(),
|
|
831
840
|
setLocale: t,
|
|
832
|
-
subscribe:
|
|
841
|
+
subscribe: a
|
|
833
842
|
};
|
|
834
|
-
},
|
|
835
|
-
if (!
|
|
843
|
+
}, St = ({ fontFamily: o }) => {
|
|
844
|
+
if (!o)
|
|
836
845
|
return { cleanup: () => {
|
|
837
846
|
} };
|
|
838
|
-
const e =
|
|
839
|
-
(
|
|
840
|
-
),
|
|
841
|
-
|
|
842
|
-
const r =
|
|
843
|
-
(
|
|
847
|
+
const e = o.replace(/\s+/g, "+"), t = `https://fonts.googleapis.com/css2?family=${e}:wght@400;700&display=swap`, a = [...document.head.querySelectorAll("link")].filter(
|
|
848
|
+
(n) => n.href.includes("fonts.googleapis.com/css2") && n.rel === "stylesheet"
|
|
849
|
+
), i = document.createElement("link");
|
|
850
|
+
i.rel = "stylesheet", i.href = t;
|
|
851
|
+
const r = a.find(
|
|
852
|
+
(n) => n.href.includes(`family=${e}`)
|
|
844
853
|
);
|
|
845
854
|
if (r)
|
|
846
855
|
r.href = t;
|
|
847
|
-
else if (
|
|
848
|
-
const
|
|
856
|
+
else if (a.length > 0) {
|
|
857
|
+
const n = a.at(
|
|
849
858
|
-1
|
|
850
859
|
);
|
|
851
|
-
|
|
860
|
+
n?.nextSibling ? document.head.insertBefore(i, n.nextSibling) : document.head.appendChild(i);
|
|
852
861
|
} else
|
|
853
|
-
document.head.appendChild(
|
|
862
|
+
document.head.appendChild(i);
|
|
854
863
|
return { cleanup: () => {
|
|
855
|
-
document.head.contains(
|
|
864
|
+
document.head.contains(i) && document.head.removeChild(i);
|
|
856
865
|
} };
|
|
857
|
-
},
|
|
858
|
-
scriptSrc:
|
|
866
|
+
}, xt = ({
|
|
867
|
+
scriptSrc: o,
|
|
859
868
|
async: e = !0
|
|
860
869
|
}) => {
|
|
861
|
-
if (!
|
|
870
|
+
if (!o)
|
|
862
871
|
return {
|
|
863
872
|
cleanup: () => {
|
|
864
873
|
},
|
|
865
874
|
isLoaded: Promise.resolve(!1)
|
|
866
875
|
};
|
|
867
876
|
if ([...document.head.querySelectorAll("script")].filter(
|
|
868
|
-
(s) => s.src ===
|
|
877
|
+
(s) => s.src === o
|
|
869
878
|
).length > 0)
|
|
870
879
|
return {
|
|
871
880
|
cleanup: () => {
|
|
872
881
|
},
|
|
873
882
|
isLoaded: Promise.resolve(!0)
|
|
874
883
|
};
|
|
875
|
-
const
|
|
876
|
-
|
|
877
|
-
const
|
|
878
|
-
|
|
879
|
-
console.error(`Failed to load script: ${
|
|
884
|
+
const a = document.createElement("script");
|
|
885
|
+
a.src = o, a.async = e;
|
|
886
|
+
const i = new Promise((s, n) => {
|
|
887
|
+
a.onload = () => s(!0), a.onerror = () => {
|
|
888
|
+
console.error(`Failed to load script: ${o}`), n(new Error(`Failed to load script: ${o}`));
|
|
880
889
|
};
|
|
881
890
|
});
|
|
882
|
-
return document.head.appendChild(
|
|
891
|
+
return document.head.appendChild(a), {
|
|
883
892
|
cleanup: () => {
|
|
884
|
-
document.head.contains(
|
|
893
|
+
document.head.contains(a) && document.head.removeChild(a);
|
|
885
894
|
},
|
|
886
|
-
isLoaded:
|
|
895
|
+
isLoaded: i
|
|
887
896
|
};
|
|
888
897
|
};
|
|
889
|
-
class
|
|
898
|
+
class Ft {
|
|
890
899
|
// The sequence of fields to focus in order
|
|
891
900
|
focusSequence = [
|
|
892
901
|
"cardNumber",
|
|
@@ -931,24 +940,24 @@ class wt {
|
|
|
931
940
|
*/
|
|
932
941
|
handleFieldFocus(e) {
|
|
933
942
|
const t = this.focusSequence.findIndex(
|
|
934
|
-
(
|
|
943
|
+
(a) => a === e
|
|
935
944
|
);
|
|
936
945
|
t >= 0 && (this.currentFocusIndex = t);
|
|
937
946
|
}
|
|
938
947
|
/**
|
|
939
948
|
* Update the validation state of fields based on form and iframe state
|
|
940
949
|
*/
|
|
941
|
-
handleStateUpdate(e, t,
|
|
950
|
+
handleStateUpdate(e, t, a, i) {
|
|
942
951
|
Object.assign(this.previousFieldValidState, this.fieldValidState);
|
|
943
|
-
const r = !!e.email && !t.email && !!
|
|
952
|
+
const r = !!e.email && !t.email && !!a.email;
|
|
944
953
|
this.fieldValidState.email = r;
|
|
945
|
-
const s = !!
|
|
954
|
+
const s = !!i.isCcValid;
|
|
946
955
|
this.fieldValidState.cardNumber = s;
|
|
947
|
-
const
|
|
948
|
-
this.fieldValidState.cardExpiry =
|
|
949
|
-
const l = !!
|
|
956
|
+
const n = !!e.cardExpiry && !t.cardExpiry && !!a.cardExpiry;
|
|
957
|
+
this.fieldValidState.cardExpiry = n;
|
|
958
|
+
const l = !!i.isCvvValid;
|
|
950
959
|
this.fieldValidState.cardCvv = l;
|
|
951
|
-
const c = !!e.name && !t.name && !!
|
|
960
|
+
const c = !!e.name && !t.name && !!a.name;
|
|
952
961
|
this.fieldValidState.name = c, this.checkForValidTransitions();
|
|
953
962
|
}
|
|
954
963
|
/**
|
|
@@ -990,12 +999,12 @@ class wt {
|
|
|
990
999
|
this.currentFocusIndex = 0, this.applyFocusToCurrentField();
|
|
991
1000
|
}
|
|
992
1001
|
}
|
|
993
|
-
const
|
|
994
|
-
const
|
|
995
|
-
return `${
|
|
1002
|
+
const L = (o) => Object.entries(o).map(([e, t]) => {
|
|
1003
|
+
const a = e.replace(/([A-Z])/g, "-$1").toLowerCase(), i = typeof t == "number" ? `${t}px` : t;
|
|
1004
|
+
return `${a}: ${i}`;
|
|
996
1005
|
}).join("; ");
|
|
997
|
-
function
|
|
998
|
-
if (!
|
|
1006
|
+
function kt(o) {
|
|
1007
|
+
if (!o)
|
|
999
1008
|
return {
|
|
1000
1009
|
formContainerStyle: {},
|
|
1001
1010
|
baseStyles: {},
|
|
@@ -1015,35 +1024,35 @@ function Mt(n) {
|
|
|
1015
1024
|
display: "block",
|
|
1016
1025
|
border: "none",
|
|
1017
1026
|
outline: "none",
|
|
1018
|
-
fontSize: `${
|
|
1027
|
+
fontSize: `${o.styles.fontSize}px`,
|
|
1019
1028
|
lineHeight: 30,
|
|
1020
1029
|
boxSizing: "border-box",
|
|
1021
1030
|
padding: "0px 12px",
|
|
1022
1031
|
height: 36,
|
|
1023
1032
|
width: "100%",
|
|
1024
|
-
fontFamily: `${
|
|
1033
|
+
fontFamily: `${o.styles.fontFamily}, sans-serif`
|
|
1025
1034
|
}, t = {
|
|
1026
1035
|
color: "#717173",
|
|
1027
1036
|
opacity: "0.3",
|
|
1028
|
-
fontFamily: `${
|
|
1029
|
-
}, i = {
|
|
1030
|
-
color: "#dc2727"
|
|
1037
|
+
fontFamily: `${o.styles.fontFamily}, sans-serif`
|
|
1031
1038
|
}, a = {
|
|
1039
|
+
color: "#dc2727"
|
|
1040
|
+
}, i = {
|
|
1032
1041
|
outline: "none"
|
|
1033
1042
|
}, r = {
|
|
1034
|
-
fontFamily: `${
|
|
1043
|
+
fontFamily: `${o.styles.fontFamily}, sans-serif`
|
|
1035
1044
|
}, s = {
|
|
1036
|
-
base:
|
|
1037
|
-
error:
|
|
1038
|
-
focus:
|
|
1039
|
-
placeholder:
|
|
1045
|
+
base: L(e),
|
|
1046
|
+
error: L(a),
|
|
1047
|
+
focus: L(i),
|
|
1048
|
+
placeholder: L(t)
|
|
1040
1049
|
};
|
|
1041
1050
|
return {
|
|
1042
1051
|
formContainerStyle: r,
|
|
1043
1052
|
baseStyles: e,
|
|
1044
1053
|
placeholderStyles: t,
|
|
1045
|
-
errorStyles:
|
|
1046
|
-
focusStyles:
|
|
1054
|
+
errorStyles: a,
|
|
1055
|
+
focusStyles: i,
|
|
1047
1056
|
inputStyles: s
|
|
1048
1057
|
};
|
|
1049
1058
|
}
|
|
@@ -1057,9 +1066,9 @@ class h {
|
|
|
1057
1066
|
* @param classNames Optional CSS class names to add
|
|
1058
1067
|
* @param attributes Optional attributes to set on the element
|
|
1059
1068
|
*/
|
|
1060
|
-
constructor(e, t = [],
|
|
1061
|
-
this.element = document.createElement(e), t.length > 0 && this.addClass(...t), Object.entries(
|
|
1062
|
-
this.setAttribute(
|
|
1069
|
+
constructor(e, t = [], a = {}) {
|
|
1070
|
+
this.element = document.createElement(e), t.length > 0 && this.addClass(...t), Object.entries(a).forEach(([i, r]) => {
|
|
1071
|
+
this.setAttribute(i, r);
|
|
1063
1072
|
});
|
|
1064
1073
|
}
|
|
1065
1074
|
/**
|
|
@@ -1114,14 +1123,14 @@ class h {
|
|
|
1114
1123
|
/**
|
|
1115
1124
|
* Add an event listener to the element
|
|
1116
1125
|
*/
|
|
1117
|
-
addEventListener(e, t,
|
|
1118
|
-
return this.element.addEventListener(e, t,
|
|
1126
|
+
addEventListener(e, t, a) {
|
|
1127
|
+
return this.element.addEventListener(e, t, a), this.eventListeners.push({ type: e, listener: t }), this;
|
|
1119
1128
|
}
|
|
1120
1129
|
/**
|
|
1121
1130
|
* Remove an event listener from the element
|
|
1122
1131
|
*/
|
|
1123
|
-
removeEventListener(e, t,
|
|
1124
|
-
return this.element.removeEventListener(e, t,
|
|
1132
|
+
removeEventListener(e, t, a) {
|
|
1133
|
+
return this.element.removeEventListener(e, t, a), this;
|
|
1125
1134
|
}
|
|
1126
1135
|
/**
|
|
1127
1136
|
* Hide this component
|
|
@@ -1144,7 +1153,7 @@ class h {
|
|
|
1144
1153
|
}), this.eventListeners = [], this.children.forEach((e) => e.destroy()), this.children = [], this.element.parentNode && this.element.parentNode.removeChild(this.element);
|
|
1145
1154
|
}
|
|
1146
1155
|
}
|
|
1147
|
-
class
|
|
1156
|
+
class m {
|
|
1148
1157
|
/**
|
|
1149
1158
|
* Create a div element
|
|
1150
1159
|
*/
|
|
@@ -1160,27 +1169,27 @@ class F {
|
|
|
1160
1169
|
/**
|
|
1161
1170
|
* Create a button element
|
|
1162
1171
|
*/
|
|
1163
|
-
static createButton(e, t = [],
|
|
1164
|
-
const
|
|
1165
|
-
return
|
|
1172
|
+
static createButton(e, t = [], a = {}) {
|
|
1173
|
+
const i = new h("button", t, a);
|
|
1174
|
+
return i.setText(e), i;
|
|
1166
1175
|
}
|
|
1167
1176
|
/**
|
|
1168
1177
|
* Create an input element
|
|
1169
1178
|
*/
|
|
1170
|
-
static createInput(e, t = [],
|
|
1171
|
-
const
|
|
1172
|
-
return new h("input", t,
|
|
1179
|
+
static createInput(e, t = [], a = {}) {
|
|
1180
|
+
const i = { type: e, ...a };
|
|
1181
|
+
return new h("input", t, i);
|
|
1173
1182
|
}
|
|
1174
1183
|
/**
|
|
1175
1184
|
* Create a text input
|
|
1176
1185
|
*/
|
|
1177
|
-
static createTextInput(e = "", t = [],
|
|
1178
|
-
const
|
|
1186
|
+
static createTextInput(e = "", t = [], a = {}) {
|
|
1187
|
+
const i = {
|
|
1179
1188
|
type: "text",
|
|
1180
1189
|
placeholder: e,
|
|
1181
|
-
...
|
|
1190
|
+
...a
|
|
1182
1191
|
};
|
|
1183
|
-
return new h("input", t,
|
|
1192
|
+
return new h("input", t, i);
|
|
1184
1193
|
}
|
|
1185
1194
|
/**
|
|
1186
1195
|
* Create a form element
|
|
@@ -1191,47 +1200,47 @@ class F {
|
|
|
1191
1200
|
/**
|
|
1192
1201
|
* Create a label element
|
|
1193
1202
|
*/
|
|
1194
|
-
static createLabel(e, t = "",
|
|
1195
|
-
const r = t ? { for: t, ...
|
|
1203
|
+
static createLabel(e, t = "", a = [], i = {}) {
|
|
1204
|
+
const r = t ? { for: t, ...i } : i, s = new h("label", a, r);
|
|
1196
1205
|
return s.setText(e), s;
|
|
1197
1206
|
}
|
|
1198
1207
|
/**
|
|
1199
1208
|
* Create a select element
|
|
1200
1209
|
*/
|
|
1201
|
-
static createSelect(e, t = [],
|
|
1202
|
-
const
|
|
1210
|
+
static createSelect(e, t = [], a = {}) {
|
|
1211
|
+
const i = new h("select", t, a);
|
|
1203
1212
|
return e.forEach((r) => {
|
|
1204
1213
|
const s = document.createElement("option");
|
|
1205
|
-
s.value = r.value, s.textContent = r.text, r.selected && (s.selected = !0),
|
|
1206
|
-
}),
|
|
1214
|
+
s.value = r.value, s.textContent = r.text, r.selected && (s.selected = !0), i.getElement().appendChild(s);
|
|
1215
|
+
}), i;
|
|
1207
1216
|
}
|
|
1208
1217
|
/**
|
|
1209
1218
|
* Create an image element
|
|
1210
1219
|
*/
|
|
1211
|
-
static createImage(e, t = "",
|
|
1212
|
-
const r = { src: e, alt: t, ...
|
|
1213
|
-
return new h("img",
|
|
1220
|
+
static createImage(e, t = "", a = [], i = {}) {
|
|
1221
|
+
const r = { src: e, alt: t, ...i };
|
|
1222
|
+
return new h("img", a, r);
|
|
1214
1223
|
}
|
|
1215
1224
|
}
|
|
1216
|
-
class
|
|
1225
|
+
class wt extends h {
|
|
1217
1226
|
messageComponent;
|
|
1218
1227
|
constructor(e) {
|
|
1219
1228
|
super("div", []);
|
|
1220
|
-
const t =
|
|
1229
|
+
const t = m.createDiv(["error-alert"], {
|
|
1221
1230
|
role: "alert",
|
|
1222
1231
|
"aria-live": "polite"
|
|
1223
|
-
}),
|
|
1232
|
+
}), a = m.createDiv(["error-alert-content"]), i = m.createDiv([
|
|
1224
1233
|
"error-alert-icon-container"
|
|
1225
1234
|
]);
|
|
1226
|
-
|
|
1227
|
-
const r =
|
|
1235
|
+
i.getElement().innerHTML = this.createAlertCircleSVG();
|
|
1236
|
+
const r = m.createDiv([
|
|
1228
1237
|
"error-alert-text-container"
|
|
1229
1238
|
]), s = new h("h4", [
|
|
1230
1239
|
"error-alert-title"
|
|
1231
1240
|
]);
|
|
1232
1241
|
s.setText("Checkout Error"), this.messageComponent = new h("p", [
|
|
1233
1242
|
"error-alert-message"
|
|
1234
|
-
]), this.messageComponent.setText(e.message || "Bad request"), r.appendChild(s), r.appendChild(this.messageComponent),
|
|
1243
|
+
]), this.messageComponent.setText(e.message || "Bad request"), r.appendChild(s), r.appendChild(this.messageComponent), a.appendChild(i), a.appendChild(r), t.appendChild(a), this.appendChild(t);
|
|
1235
1244
|
}
|
|
1236
1245
|
createAlertCircleSVG() {
|
|
1237
1246
|
return `
|
|
@@ -1256,18 +1265,66 @@ class Lt extends h {
|
|
|
1256
1265
|
return this.messageComponent.setText(e), this;
|
|
1257
1266
|
}
|
|
1258
1267
|
}
|
|
1259
|
-
class
|
|
1268
|
+
class Mt extends h {
|
|
1269
|
+
constructor() {
|
|
1270
|
+
super("div", ["skeleton-container"]), this.createSkeletonElements();
|
|
1271
|
+
}
|
|
1272
|
+
createSkeletonElements() {
|
|
1273
|
+
this.appendChild(this.createPaymentMethodSkeleton()), this.appendChild(this.createPaymentSeparatorSkeleton()), this.appendChild(this.createFieldSkeleton()), this.appendChild(this.createFieldSkeleton()), this.appendChild(this.createCardRowSkeleton()), this.appendChild(this.createFieldSkeleton());
|
|
1274
|
+
}
|
|
1275
|
+
createPaymentMethodSkeleton() {
|
|
1276
|
+
const e = m.createDiv(["skeleton-field"]), t = m.createDiv([
|
|
1277
|
+
"skeleton",
|
|
1278
|
+
"skeleton-payment-method"
|
|
1279
|
+
]);
|
|
1280
|
+
return e.appendChild(t), e;
|
|
1281
|
+
}
|
|
1282
|
+
createPaymentSeparatorSkeleton() {
|
|
1283
|
+
const e = m.createDiv([
|
|
1284
|
+
"payment-separator_container"
|
|
1285
|
+
]), t = m.createDiv(["payment-separator__line"]), a = m.createDiv([
|
|
1286
|
+
"skeleton",
|
|
1287
|
+
"skeleton-separator-text"
|
|
1288
|
+
]), i = m.createDiv(["payment-separator__line"]);
|
|
1289
|
+
return e.appendChild(t), e.appendChild(a), e.appendChild(i), e;
|
|
1290
|
+
}
|
|
1291
|
+
createFieldSkeleton() {
|
|
1292
|
+
const e = m.createDiv(["skeleton-field"]), t = m.createDiv(["skeleton", "skeleton-label"]);
|
|
1293
|
+
e.appendChild(t);
|
|
1294
|
+
const a = m.createDiv(["skeleton", "skeleton-input"]);
|
|
1295
|
+
return e.appendChild(a), e;
|
|
1296
|
+
}
|
|
1297
|
+
createCardRowSkeleton() {
|
|
1298
|
+
const e = m.createDiv(["skeleton-card-row"]), t = m.createDiv(["skeleton-field"]), a = m.createDiv([
|
|
1299
|
+
"skeleton",
|
|
1300
|
+
"skeleton-label"
|
|
1301
|
+
]), i = m.createDiv([
|
|
1302
|
+
"skeleton",
|
|
1303
|
+
"skeleton-input"
|
|
1304
|
+
]);
|
|
1305
|
+
t.appendChild(a), t.appendChild(i);
|
|
1306
|
+
const r = m.createDiv(["skeleton-field"]), s = m.createDiv(["skeleton", "skeleton-label"]), n = m.createDiv(["skeleton", "skeleton-input"]);
|
|
1307
|
+
return r.appendChild(s), r.appendChild(n), e.appendChild(t), e.appendChild(r), e;
|
|
1308
|
+
}
|
|
1309
|
+
createSubmitButtonSkeleton() {
|
|
1310
|
+
return m.createDiv([
|
|
1311
|
+
"skeleton",
|
|
1312
|
+
"skeleton-submit-button"
|
|
1313
|
+
]);
|
|
1314
|
+
}
|
|
1315
|
+
}
|
|
1316
|
+
class Lt extends h {
|
|
1260
1317
|
titleElement;
|
|
1261
1318
|
constructor(e = {}) {
|
|
1262
1319
|
super("div", ["blur-bg"]);
|
|
1263
|
-
const t =
|
|
1320
|
+
const t = m.createDiv(["loader"]);
|
|
1264
1321
|
this.titleElement = new h("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
|
|
1265
1322
|
}
|
|
1266
1323
|
setText(e) {
|
|
1267
1324
|
return this.titleElement.setText(e), this;
|
|
1268
1325
|
}
|
|
1269
1326
|
}
|
|
1270
|
-
class
|
|
1327
|
+
class C extends h {
|
|
1271
1328
|
span;
|
|
1272
1329
|
constructor(e) {
|
|
1273
1330
|
super("div", []), this.span = document.createElement("span"), this.span.className = "form-helper-text", e.visible === !1 && this.span.classList.add("form-helper-text-hidden"), this.span.textContent = e.text || "", this.getElement().appendChild(this.span);
|
|
@@ -1294,12 +1351,12 @@ class Tt extends h {
|
|
|
1294
1351
|
t.style.fontFamily = "inherit", t.style.color = e.styles.color, t.style.fontSize = `${e.styles.fontSize}px`;
|
|
1295
1352
|
}
|
|
1296
1353
|
}
|
|
1297
|
-
class
|
|
1354
|
+
class z extends h {
|
|
1298
1355
|
inputElement;
|
|
1299
1356
|
helperText = null;
|
|
1300
1357
|
constructor(e) {
|
|
1301
1358
|
if (super("div", ["input-wrapper"]), e.label && e.styles) {
|
|
1302
|
-
const
|
|
1359
|
+
const a = new Tt({
|
|
1303
1360
|
styles: {
|
|
1304
1361
|
color: e.styles.color,
|
|
1305
1362
|
fontSize: e.styles.fontSize
|
|
@@ -1307,25 +1364,25 @@ class V extends h {
|
|
|
1307
1364
|
label: e.label,
|
|
1308
1365
|
id: e.name
|
|
1309
1366
|
});
|
|
1310
|
-
this.appendChild(
|
|
1367
|
+
this.appendChild(a);
|
|
1311
1368
|
}
|
|
1312
1369
|
const t = {
|
|
1313
1370
|
id: e.name,
|
|
1314
1371
|
name: e.name,
|
|
1315
1372
|
class: `form-input ${e.error ? "form-input-error" : ""}`
|
|
1316
1373
|
};
|
|
1317
|
-
if (e.placeholder && (t.placeholder = e.placeholder), e.value && (t.value = e.value), e.required && (t.required = String(e.required)), e.disabled && (t.disabled = String(e.disabled)), e.autocomplete && (t.autocomplete = e.autocomplete), this.inputElement =
|
|
1374
|
+
if (e.placeholder && (t.placeholder = e.placeholder), e.value && (t.value = e.value), e.required && (t.required = String(e.required)), e.disabled && (t.disabled = String(e.disabled)), e.autocomplete && (t.autocomplete = e.autocomplete), this.inputElement = m.createInput(
|
|
1318
1375
|
e.type || "text",
|
|
1319
1376
|
[],
|
|
1320
1377
|
t
|
|
1321
1378
|
), e.styles) {
|
|
1322
|
-
const
|
|
1323
|
-
|
|
1379
|
+
const a = this.inputElement.getElement();
|
|
1380
|
+
a.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.style.color = e.styles.color, a.style.fontSize = `${e.styles.fontSize}px`, a.style.borderRadius = e.styles.borderRadius;
|
|
1324
1381
|
}
|
|
1325
|
-
e.onChange && this.inputElement.getElement().addEventListener("input", e.onChange), this.getElement().appendChild(this.inputElement.getElement()), e.error ? (this.helperText = new
|
|
1382
|
+
e.onChange && this.inputElement.getElement().addEventListener("input", e.onChange), this.getElement().appendChild(this.inputElement.getElement()), e.error ? (this.helperText = new C({
|
|
1326
1383
|
text: e.errorMsg,
|
|
1327
1384
|
visible: !0
|
|
1328
|
-
}), this.appendChild(this.helperText)) : (this.helperText = new
|
|
1385
|
+
}), this.appendChild(this.helperText)) : (this.helperText = new C({ text: "", visible: !1 }), this.appendChild(this.helperText));
|
|
1329
1386
|
}
|
|
1330
1387
|
getValue() {
|
|
1331
1388
|
return this.inputElement.getElement().value;
|
|
@@ -1334,11 +1391,11 @@ class V extends h {
|
|
|
1334
1391
|
return this.inputElement.getElement().value = e, this;
|
|
1335
1392
|
}
|
|
1336
1393
|
setError(e, t) {
|
|
1337
|
-
const
|
|
1338
|
-
return e ? (
|
|
1394
|
+
const a = this.inputElement.getElement();
|
|
1395
|
+
return e ? (a.classList.add("form-input-error"), !this.helperText && t ? (this.helperText = new C({ text: t }), this.appendChild(this.helperText)) : this.helperText && t ? this.helperText.setText(t).toggleVisibility(!0) : this.helperText && this.helperText.toggleVisibility(!0)) : (a.classList.remove("form-input-error"), this.helperText && this.helperText.toggleVisibility(!1)), this;
|
|
1339
1396
|
}
|
|
1340
|
-
addEventListener(e, t,
|
|
1341
|
-
return this.inputElement.getElement().addEventListener(e, t,
|
|
1397
|
+
addEventListener(e, t, a) {
|
|
1398
|
+
return this.inputElement.getElement().addEventListener(e, t, a), this;
|
|
1342
1399
|
}
|
|
1343
1400
|
/**
|
|
1344
1401
|
* Focus the input element
|
|
@@ -1347,39 +1404,39 @@ class V extends h {
|
|
|
1347
1404
|
this.inputElement.getElement().focus();
|
|
1348
1405
|
}
|
|
1349
1406
|
}
|
|
1350
|
-
class
|
|
1407
|
+
class It {
|
|
1351
1408
|
input;
|
|
1352
1409
|
constructor(e) {
|
|
1353
1410
|
const {
|
|
1354
1411
|
value: t,
|
|
1355
|
-
onChange:
|
|
1356
|
-
onBlur:
|
|
1412
|
+
onChange: a,
|
|
1413
|
+
onBlur: i,
|
|
1357
1414
|
error: r,
|
|
1358
1415
|
errorMsg: s,
|
|
1359
|
-
checkoutProfile:
|
|
1416
|
+
checkoutProfile: n,
|
|
1360
1417
|
translationFunc: l,
|
|
1361
1418
|
autocomplete: c = "cc-name"
|
|
1362
1419
|
} = e;
|
|
1363
|
-
this.input = new
|
|
1420
|
+
this.input = new z({
|
|
1364
1421
|
name: "name",
|
|
1365
1422
|
label: l("cardholderNameLabel"),
|
|
1366
1423
|
// Always hide error initially - we'll show it only on blur if needed
|
|
1367
1424
|
error: !1,
|
|
1368
1425
|
errorMsg: s,
|
|
1369
1426
|
styles: {
|
|
1370
|
-
color:
|
|
1371
|
-
borderRadius: `${
|
|
1372
|
-
fontSize:
|
|
1373
|
-
fontFamily:
|
|
1427
|
+
color: n.styles.textColor,
|
|
1428
|
+
borderRadius: `${n.styles.borderRadius}px`,
|
|
1429
|
+
fontSize: n.styles.fontSize,
|
|
1430
|
+
fontFamily: n.styles.fontFamily
|
|
1374
1431
|
},
|
|
1375
1432
|
placeholder: l("cardholderNamePlaceholder"),
|
|
1376
1433
|
value: t,
|
|
1377
1434
|
autocomplete: c,
|
|
1378
1435
|
onChange: (d) => {
|
|
1379
|
-
this.input.setError(!1), this.trim(),
|
|
1436
|
+
this.input.setError(!1), this.trim(), a(d);
|
|
1380
1437
|
}
|
|
1381
1438
|
}), this.input.addEventListener("blur", (d) => {
|
|
1382
|
-
r && this.input.setError(r, s),
|
|
1439
|
+
r && this.input.setError(r, s), i(d);
|
|
1383
1440
|
});
|
|
1384
1441
|
}
|
|
1385
1442
|
getValue() {
|
|
@@ -1405,13 +1462,13 @@ class kt {
|
|
|
1405
1462
|
this.input.focus();
|
|
1406
1463
|
}
|
|
1407
1464
|
}
|
|
1408
|
-
class
|
|
1465
|
+
class Nt extends h {
|
|
1409
1466
|
constructor(e) {
|
|
1410
1467
|
super("div", []);
|
|
1411
1468
|
const t = document.createElement("div");
|
|
1412
1469
|
t.className = e.isLoading ? "loading" : "", t.style.borderRadius = `0px 0px ${e.styles.borderRadius}px 0px`;
|
|
1413
|
-
const
|
|
1414
|
-
|
|
1470
|
+
const a = document.createElement("div");
|
|
1471
|
+
a.id = "card-cvv-element", a.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, a.style.zIndex = e.isFocused ? "2" : "0", t.appendChild(a), this.getElement().appendChild(t);
|
|
1415
1472
|
}
|
|
1416
1473
|
setFocused(e) {
|
|
1417
1474
|
const t = this.getElement().querySelector("#card-cvv-element");
|
|
@@ -1422,22 +1479,22 @@ class It extends h {
|
|
|
1422
1479
|
return t && (e ? t.classList.add("loading") : t.classList.remove("loading")), this;
|
|
1423
1480
|
}
|
|
1424
1481
|
}
|
|
1425
|
-
const Nt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23306FC5;'%20d='M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717%20c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.281V109.717%20c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.997,21.517,402.281z'/%3e%3cg%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='74.59,220.748%2089.888,220.748%2082.241,201.278%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='155.946,286.107%20155.946,295.148%20181.675,295.148%20181.675,304.885%20155.946,304.885%20155.946,315.318%20184.455,315.318%20197.666,300.712%20185.151,286.107%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='356.898,201.278%20348.553,220.748%20364.548,220.748%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='230.348,320.875%20230.348,281.241%20212.268,300.712%20'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299%20C261.637,298.624,264.42,296.539,264.42,292.368z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868%20c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502%20c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384%20l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444%20l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965%20h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123%20h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z%20M177.501,241.609h-6.955%20h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43%20H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306%20l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z%20M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738%20h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z%20M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042%20c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197%20c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565%20c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818%20v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829%20C270.676,218.662,272.996,219.129,275.076,221.294z%20M298.491,241.609h-11.822v-48.675h11.822V241.609z%20M434.083,241.609h-15.3%20l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211%20c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472%20c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783%20c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243%20h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609%20L434.083,241.609z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244%20c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367%20c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413%20l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0%20c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081%20c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431%20l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953%20v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394%20h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478%20c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039%20C475.087,312.043,475.105,311.598,475.105,311.144z%20M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299%20l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852%20c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z%20M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739%20c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084%20c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z%20M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z%20M402.791,325.05h-22.252%20v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475%20c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819%20h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473%20c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43%20C420.869,320.179,414.611,325.05,402.791,325.05z%20M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245%20c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475%20c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352%20c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696%20c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565%20c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495%20C466.761,313.925,465.37,317.401,462.59,320.179z'/%3e%3c/g%3e%3c/svg%3e", Pt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%2334495E;'%20d='M512,402.282c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.996,0,402.282V109.717%20c0-16.716,13.55-30.266,30.265-30.266h451.469c16.716,0,30.265,13.551,30.265,30.266L512,402.282L512,402.282z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.282V109.717%20c0-16.716,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.003,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.996,21.517,402.282z'/%3e%3cpath%20style='fill:%23F26E21;'%20d='M309.389,255.801c0.041-9.636-3.572-19.286-10.843-26.558c-7.287-7.287-16.961-10.897-26.617-10.839%20c-0.046,0-0.091-0.003-0.139-0.003c-20.968,0-37.6,16.628-37.6,37.602c0,20.767,16.837,37.599,37.6,37.599%20c20.974,0,37.604-16.631,37.604-37.599C309.394,255.934,309.389,255.869,309.389,255.801z'/%3e%3cg%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M227.198,271.909c-5.62,5.626-10.807,7.824-16.394,7.943c-13.611-0.122-23.618-10.202-23.618-24.573%20c0-7.234,2.739-13.163,7.078-18.228l0,0c4.069-3.863,9.311-6.359,15.339-6.359c6.507,0,11.571,2.169,17.352,7.954v-16.631%20c-5.78-2.891-10.846-4.338-17.352-4.338c-9.192,0.657-17.859,4.371-24.507,10.203l0,0c-1.916,1.724-3.752,3.627-5.309,5.805%20c-4.856,6.294-7.791,14.001-7.791,22.32c0,20.967,16.637,36.875,37.606,36.875c0.102,0,0.203-0.009,0.302-0.01%20c0.141,0.002,0.28,0.01,0.42,0.01c5.784,0,10.85-1.443,17.357-4.336L227.198,271.909c-0.244,0.244,0.242,0.471,0,0.702V271.909z'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='356.863,228.033%20356.863,228.033%20340.487,268.295%20321.685,220.566%20306.502,220.566%20336.148,293.601%20344.102,293.601%20375.196,220.566%20360.013,220.566%20'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='380.983,252.384%20380.983,291.435%20420.033,291.435%20420.753,291.435%20420.753,279.861%20408.461,279.861%20395.445,279.861%20395.445,266.848%20395.445,260.342%20420.033,260.342%20420.033,248.045%20395.445,248.045%20395.445,232.861%20420.753,232.861%20420.753,220.566%20380.983,220.566%20'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M54.135,220.566H33.884v70.869h20.25c10.845,0,18.798-2.895,25.306-7.957%20c7.953-6.508,13.017-16.629,13.017-27.474C92.458,235.028,77.27,220.566,54.135,220.566z%20M70.765,274.08%20c-4.339,3.614-10.124,5.781-18.802,5.781h-4.339V232.86h3.615c8.678,0,14.463,1.446,18.803,5.783%20c5.061,4.336,7.955,10.848,7.955,17.358C78.72,262.509,75.828,269.737,70.765,274.08z'/%3e%3crect%20x='98.97'%20y='220.56'%20style='fill:%23E7E8E3;'%20width='13.739'%20height='70.867'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M147.415,248.045c-8.676-2.892-10.848-5.063-10.848-8.677c0-4.339,4.339-7.954,10.124-7.954%20c4.339,0,7.954,1.447,11.57,5.786l7.233-9.4c-5.787-5.064-13.015-7.953-20.97-7.953c-12.296,0-22.42,8.678-22.42,20.244%20c0,10.126,4.343,14.464,17.357,19.526c5.785,2.166,7.955,2.892,9.404,4.338c2.887,1.444,4.336,4.339,4.336,7.228%20c0,5.786-4.336,10.126-10.848,10.126c-6.514,0-12.294-3.615-15.187-9.401l-8.678,8.678c6.511,9.4,14.465,13.738,24.589,13.738%20c14.461,0,24.58-9.4,24.58-23.141C167.659,258.893,163.324,253.831,147.415,248.045z'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M459.804,261.783c10.843-2.166,16.63-9.4,16.63-20.244c0-13.014-9.402-20.973-25.308-20.973h-20.972%20v70.869h13.739V263.23h2.172l19.519,28.205h16.634L459.804,261.783z%20M448.23,253.105h-4.336v-21.691h4.336%20c8.678,0,13.742,3.614,13.742,10.85C461.972,249.492,456.909,253.105,448.23,253.105z'/%3e%3c/g%3e%3c/svg%3e", Vt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20291.791%20291.791'%20xml:space='preserve'%3e%3cg%3e%3cpath%20style='fill:%23E2574C;'%20d='M182.298,145.895c0,50.366-40.801,91.176-91.149,91.176S0,196.252,0,145.895%20s40.811-91.176,91.149-91.176S182.298,95.538,182.298,145.895z'/%3e%3cpath%20style='fill:%23F4B459;'%20d='M200.616,54.719c-20.442,0-39.261,6.811-54.469,18.181l0.073,0.009%20c2.991,2.89,6.291,4.924,8.835,8.251l-18.965,0.301c-2.972,3-5.68,6.264-8.233,9.656H161.3c2.544,3.054,4.896,5.708,7.03,9.081%20h-46.536c-1.705,2.936-3.282,5.954-4.659,9.09h56.493c1.477,3.127,2.799,5.489,3.921,8.799h-63.76%20c-1.012,3.146-1.878,6.364-2.535,9.646h68.966c0.675,3.155,1.194,6.072,1.55,9.045h-71.884c-0.301,3-0.456,6.045-0.456,9.118%20h72.859c0,3.228-0.228,6.218-0.556,9.118h-71.847c0.31,3.091,0.766,6.127,1.368,9.118h68.856c-0.711,2.954-1.532,5.926-2.562,9.008%20h-63.969c0.966,3.118,2.143,6.145,3.428,9.099h56.621c-1.568,3.319-3.346,5.972-5.306,9.081h-46.691%20c1.842,3.191,3.875,6.236,6.081,9.154l33.589,0.501c-2.863,3.437-6.537,5.507-9.884,8.516c0.182,0.146-5.352-0.018-16.248-0.191%20c16.576,17.105,39.744,27.772,65.446,27.772c50.357,0,91.176-40.82,91.176-91.176S250.981,54.719,200.616,54.719z'/%3e%3c/g%3e%3c/svg%3e", zt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%20-140%20780%20780'%20enable-background='new%200%200%20780%20500'%20version='1.1'%20xml:space='preserve'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40%20C0,17.909,17.909,0,40,0z'%20fill='%230E4595'/%3e%3cpath%20d='m293.2%20348.73l33.361-195.76h53.36l-33.385%20195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725%200-89.865%2026.55-90.18%2064.603-0.299%2028.13%2026.514%2043.822%2046.752%2053.186%2020.771%209.595%2027.752%2015.714%2027.654%2024.283-0.131%2013.121-16.586%2019.116-31.922%2019.116-21.357%200-32.703-2.967-50.227-10.276l-6.876-3.11-7.489%2043.823c12.463%205.464%2035.51%2010.198%2059.438%2010.443%2056.09%200%2092.5-26.246%2092.916-66.882%200.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268%200-8.137%209.668-16.839%2030.557-16.839%2017.449-0.27%2030.09%203.535%2039.938%207.5l4.781%202.26%207.232-42.429m137.31-4.223h-41.232c-12.773%200-22.332%203.487-27.941%2016.234l-79.244%20179.4h56.031s9.16-24.123%2011.232-29.418c6.125%200%2060.555%200.084%2068.338%200.084%201.596%206.853%206.49%2029.334%206.49%2029.334h49.514l-43.188-195.64zm-65.418%20126.41c4.412-11.279%2021.26-54.723%2021.26-54.723-0.316%200.522%204.379-11.334%207.074-18.684l3.605%2016.879s10.219%2046.729%2012.354%2056.528h-44.293zm-363.3-126.41l-52.24%20133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766%20171.2%2056.456-0.064%2084.004-195.39h-56.521'%20fill='%23ffffff'/%3e%3cpath%20d='m146.92%20152.96h-86.041l-0.681%204.073c66.938%2016.204%20111.23%2055.363%20129.62%20102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527'%20fill='%23F2AE14'/%3e%3c/svg%3e", L = [
|
|
1482
|
+
const Pt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23306FC5;'%20d='M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717%20c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.281V109.717%20c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.997,21.517,402.281z'/%3e%3cg%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='74.59,220.748%2089.888,220.748%2082.241,201.278%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='155.946,286.107%20155.946,295.148%20181.675,295.148%20181.675,304.885%20155.946,304.885%20155.946,315.318%20184.455,315.318%20197.666,300.712%20185.151,286.107%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='356.898,201.278%20348.553,220.748%20364.548,220.748%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='230.348,320.875%20230.348,281.241%20212.268,300.712%20'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299%20C261.637,298.624,264.42,296.539,264.42,292.368z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868%20c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502%20c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384%20l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444%20l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965%20h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123%20h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z%20M177.501,241.609h-6.955%20h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43%20H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306%20l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z%20M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738%20h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z%20M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042%20c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197%20c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565%20c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818%20v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829%20C270.676,218.662,272.996,219.129,275.076,221.294z%20M298.491,241.609h-11.822v-48.675h11.822V241.609z%20M434.083,241.609h-15.3%20l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211%20c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472%20c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783%20c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243%20h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609%20L434.083,241.609z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244%20c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367%20c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413%20l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0%20c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081%20c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431%20l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953%20v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394%20h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478%20c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039%20C475.087,312.043,475.105,311.598,475.105,311.144z%20M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299%20l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852%20c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z%20M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739%20c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084%20c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z%20M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z%20M402.791,325.05h-22.252%20v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475%20c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819%20h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473%20c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43%20C420.869,320.179,414.611,325.05,402.791,325.05z%20M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245%20c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475%20c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352%20c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696%20c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565%20c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495%20C466.761,313.925,465.37,317.401,462.59,320.179z'/%3e%3c/g%3e%3c/svg%3e", zt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%2334495E;'%20d='M512,402.282c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.996,0,402.282V109.717%20c0-16.716,13.55-30.266,30.265-30.266h451.469c16.716,0,30.265,13.551,30.265,30.266L512,402.282L512,402.282z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.282V109.717%20c0-16.716,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.003,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.996,21.517,402.282z'/%3e%3cpath%20style='fill:%23F26E21;'%20d='M309.389,255.801c0.041-9.636-3.572-19.286-10.843-26.558c-7.287-7.287-16.961-10.897-26.617-10.839%20c-0.046,0-0.091-0.003-0.139-0.003c-20.968,0-37.6,16.628-37.6,37.602c0,20.767,16.837,37.599,37.6,37.599%20c20.974,0,37.604-16.631,37.604-37.599C309.394,255.934,309.389,255.869,309.389,255.801z'/%3e%3cg%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M227.198,271.909c-5.62,5.626-10.807,7.824-16.394,7.943c-13.611-0.122-23.618-10.202-23.618-24.573%20c0-7.234,2.739-13.163,7.078-18.228l0,0c4.069-3.863,9.311-6.359,15.339-6.359c6.507,0,11.571,2.169,17.352,7.954v-16.631%20c-5.78-2.891-10.846-4.338-17.352-4.338c-9.192,0.657-17.859,4.371-24.507,10.203l0,0c-1.916,1.724-3.752,3.627-5.309,5.805%20c-4.856,6.294-7.791,14.001-7.791,22.32c0,20.967,16.637,36.875,37.606,36.875c0.102,0,0.203-0.009,0.302-0.01%20c0.141,0.002,0.28,0.01,0.42,0.01c5.784,0,10.85-1.443,17.357-4.336L227.198,271.909c-0.244,0.244,0.242,0.471,0,0.702V271.909z'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='356.863,228.033%20356.863,228.033%20340.487,268.295%20321.685,220.566%20306.502,220.566%20336.148,293.601%20344.102,293.601%20375.196,220.566%20360.013,220.566%20'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='380.983,252.384%20380.983,291.435%20420.033,291.435%20420.753,291.435%20420.753,279.861%20408.461,279.861%20395.445,279.861%20395.445,266.848%20395.445,260.342%20420.033,260.342%20420.033,248.045%20395.445,248.045%20395.445,232.861%20420.753,232.861%20420.753,220.566%20380.983,220.566%20'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M54.135,220.566H33.884v70.869h20.25c10.845,0,18.798-2.895,25.306-7.957%20c7.953-6.508,13.017-16.629,13.017-27.474C92.458,235.028,77.27,220.566,54.135,220.566z%20M70.765,274.08%20c-4.339,3.614-10.124,5.781-18.802,5.781h-4.339V232.86h3.615c8.678,0,14.463,1.446,18.803,5.783%20c5.061,4.336,7.955,10.848,7.955,17.358C78.72,262.509,75.828,269.737,70.765,274.08z'/%3e%3crect%20x='98.97'%20y='220.56'%20style='fill:%23E7E8E3;'%20width='13.739'%20height='70.867'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M147.415,248.045c-8.676-2.892-10.848-5.063-10.848-8.677c0-4.339,4.339-7.954,10.124-7.954%20c4.339,0,7.954,1.447,11.57,5.786l7.233-9.4c-5.787-5.064-13.015-7.953-20.97-7.953c-12.296,0-22.42,8.678-22.42,20.244%20c0,10.126,4.343,14.464,17.357,19.526c5.785,2.166,7.955,2.892,9.404,4.338c2.887,1.444,4.336,4.339,4.336,7.228%20c0,5.786-4.336,10.126-10.848,10.126c-6.514,0-12.294-3.615-15.187-9.401l-8.678,8.678c6.511,9.4,14.465,13.738,24.589,13.738%20c14.461,0,24.58-9.4,24.58-23.141C167.659,258.893,163.324,253.831,147.415,248.045z'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M459.804,261.783c10.843-2.166,16.63-9.4,16.63-20.244c0-13.014-9.402-20.973-25.308-20.973h-20.972%20v70.869h13.739V263.23h2.172l19.519,28.205h16.634L459.804,261.783z%20M448.23,253.105h-4.336v-21.691h4.336%20c8.678,0,13.742,3.614,13.742,10.85C461.972,249.492,456.909,253.105,448.23,253.105z'/%3e%3c/g%3e%3c/svg%3e", Dt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20291.791%20291.791'%20xml:space='preserve'%3e%3cg%3e%3cpath%20style='fill:%23E2574C;'%20d='M182.298,145.895c0,50.366-40.801,91.176-91.149,91.176S0,196.252,0,145.895%20s40.811-91.176,91.149-91.176S182.298,95.538,182.298,145.895z'/%3e%3cpath%20style='fill:%23F4B459;'%20d='M200.616,54.719c-20.442,0-39.261,6.811-54.469,18.181l0.073,0.009%20c2.991,2.89,6.291,4.924,8.835,8.251l-18.965,0.301c-2.972,3-5.68,6.264-8.233,9.656H161.3c2.544,3.054,4.896,5.708,7.03,9.081%20h-46.536c-1.705,2.936-3.282,5.954-4.659,9.09h56.493c1.477,3.127,2.799,5.489,3.921,8.799h-63.76%20c-1.012,3.146-1.878,6.364-2.535,9.646h68.966c0.675,3.155,1.194,6.072,1.55,9.045h-71.884c-0.301,3-0.456,6.045-0.456,9.118%20h72.859c0,3.228-0.228,6.218-0.556,9.118h-71.847c0.31,3.091,0.766,6.127,1.368,9.118h68.856c-0.711,2.954-1.532,5.926-2.562,9.008%20h-63.969c0.966,3.118,2.143,6.145,3.428,9.099h56.621c-1.568,3.319-3.346,5.972-5.306,9.081h-46.691%20c1.842,3.191,3.875,6.236,6.081,9.154l33.589,0.501c-2.863,3.437-6.537,5.507-9.884,8.516c0.182,0.146-5.352-0.018-16.248-0.191%20c16.576,17.105,39.744,27.772,65.446,27.772c50.357,0,91.176-40.82,91.176-91.176S250.981,54.719,200.616,54.719z'/%3e%3c/g%3e%3c/svg%3e", Vt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%20-140%20780%20780'%20enable-background='new%200%200%20780%20500'%20version='1.1'%20xml:space='preserve'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40%20C0,17.909,17.909,0,40,0z'%20fill='%230E4595'/%3e%3cpath%20d='m293.2%20348.73l33.361-195.76h53.36l-33.385%20195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725%200-89.865%2026.55-90.18%2064.603-0.299%2028.13%2026.514%2043.822%2046.752%2053.186%2020.771%209.595%2027.752%2015.714%2027.654%2024.283-0.131%2013.121-16.586%2019.116-31.922%2019.116-21.357%200-32.703-2.967-50.227-10.276l-6.876-3.11-7.489%2043.823c12.463%205.464%2035.51%2010.198%2059.438%2010.443%2056.09%200%2092.5-26.246%2092.916-66.882%200.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268%200-8.137%209.668-16.839%2030.557-16.839%2017.449-0.27%2030.09%203.535%2039.938%207.5l4.781%202.26%207.232-42.429m137.31-4.223h-41.232c-12.773%200-22.332%203.487-27.941%2016.234l-79.244%20179.4h56.031s9.16-24.123%2011.232-29.418c6.125%200%2060.555%200.084%2068.338%200.084%201.596%206.853%206.49%2029.334%206.49%2029.334h49.514l-43.188-195.64zm-65.418%20126.41c4.412-11.279%2021.26-54.723%2021.26-54.723-0.316%200.522%204.379-11.334%207.074-18.684l3.605%2016.879s10.219%2046.729%2012.354%2056.528h-44.293zm-363.3-126.41l-52.24%20133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766%20171.2%2056.456-0.064%2084.004-195.39h-56.521'%20fill='%23ffffff'/%3e%3cpath%20d='m146.92%20152.96h-86.041l-0.681%204.073c66.938%2016.204%20111.23%2055.363%20129.62%20102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527'%20fill='%23F2AE14'/%3e%3c/svg%3e", M = [
|
|
1426
1483
|
{
|
|
1427
1484
|
type: "visa",
|
|
1428
|
-
imgSrc:
|
|
1485
|
+
imgSrc: Vt
|
|
1429
1486
|
},
|
|
1430
1487
|
{
|
|
1431
1488
|
type: "masterCard",
|
|
1432
|
-
imgSrc:
|
|
1489
|
+
imgSrc: Dt
|
|
1433
1490
|
},
|
|
1434
1491
|
{
|
|
1435
1492
|
type: "americanExpress",
|
|
1436
|
-
imgSrc:
|
|
1493
|
+
imgSrc: Pt
|
|
1437
1494
|
},
|
|
1438
1495
|
{
|
|
1439
1496
|
type: "discover",
|
|
1440
|
-
imgSrc:
|
|
1497
|
+
imgSrc: zt
|
|
1441
1498
|
}
|
|
1442
1499
|
];
|
|
1443
1500
|
class At extends h {
|
|
@@ -1446,26 +1503,26 @@ class At extends h {
|
|
|
1446
1503
|
super("div", []), this.cardType = e.cardType;
|
|
1447
1504
|
const t = document.createElement("label");
|
|
1448
1505
|
t.setAttribute("for", "cardNumber"), t.textContent = e.label, t.style.color = e.styles.color, t.style.fontSize = `${e.styles.fontSize}px`, t.style.display = "block", t.style.marginBottom = "6px", this.getElement().appendChild(t);
|
|
1449
|
-
const i = document.createElement("div");
|
|
1450
|
-
i.className = e.isLoading ? "loading" : "", i.style.borderRadius = `${e.styles.borderRadius}px ${e.styles.borderRadius}px 0px 0px`;
|
|
1451
1506
|
const a = document.createElement("div");
|
|
1452
|
-
a.
|
|
1507
|
+
a.className = e.isLoading ? "loading" : "", a.style.borderRadius = `${e.styles.borderRadius}px ${e.styles.borderRadius}px 0px 0px`;
|
|
1508
|
+
const i = document.createElement("div");
|
|
1509
|
+
i.id = "card-element", i.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, i.style.zIndex = e.isFocused ? "2" : "0";
|
|
1453
1510
|
const r = document.createElement("div");
|
|
1454
1511
|
if (r.className = "cards-position", e.cardType === "unknown")
|
|
1455
|
-
|
|
1512
|
+
M.forEach((s) => {
|
|
1456
1513
|
r.appendChild(this.createCardIcon(s));
|
|
1457
1514
|
});
|
|
1458
1515
|
else {
|
|
1459
|
-
const s =
|
|
1516
|
+
const s = M.find((n) => n.type === e.cardType);
|
|
1460
1517
|
s && r.appendChild(this.createCardIcon(s));
|
|
1461
1518
|
}
|
|
1462
|
-
|
|
1519
|
+
i.appendChild(r), a.appendChild(i), this.getElement().appendChild(a);
|
|
1463
1520
|
}
|
|
1464
1521
|
createCardIcon(e) {
|
|
1465
1522
|
const t = document.createElement("div");
|
|
1466
1523
|
t.className = "card-icon";
|
|
1467
|
-
const
|
|
1468
|
-
return
|
|
1524
|
+
const a = document.createElement("img");
|
|
1525
|
+
return a.src = e.imgSrc, t.appendChild(a), t;
|
|
1469
1526
|
}
|
|
1470
1527
|
setFocused(e) {
|
|
1471
1528
|
const t = this.getElement().querySelector(
|
|
@@ -1484,22 +1541,22 @@ class At extends h {
|
|
|
1484
1541
|
if (this.cardType === t)
|
|
1485
1542
|
return this;
|
|
1486
1543
|
this.cardType = t;
|
|
1487
|
-
const
|
|
1488
|
-
if (
|
|
1489
|
-
if (
|
|
1490
|
-
|
|
1491
|
-
|
|
1544
|
+
const a = this.getElement().querySelector(".cards-position");
|
|
1545
|
+
if (a)
|
|
1546
|
+
if (a.innerHTML = "", this.cardType === "unknown")
|
|
1547
|
+
M.forEach((i) => {
|
|
1548
|
+
a.appendChild(this.createCardIcon(i));
|
|
1492
1549
|
});
|
|
1493
1550
|
else {
|
|
1494
|
-
const
|
|
1495
|
-
|
|
1496
|
-
|
|
1551
|
+
const i = M.find((r) => r.type === this.cardType);
|
|
1552
|
+
i ? a.appendChild(this.createCardIcon(i)) : M.forEach((r) => {
|
|
1553
|
+
a.appendChild(this.createCardIcon(r));
|
|
1497
1554
|
});
|
|
1498
1555
|
}
|
|
1499
1556
|
return this;
|
|
1500
1557
|
}
|
|
1501
1558
|
}
|
|
1502
|
-
class
|
|
1559
|
+
class $t extends h {
|
|
1503
1560
|
cardNumber;
|
|
1504
1561
|
cardExpiry;
|
|
1505
1562
|
cardCvv;
|
|
@@ -1508,47 +1565,47 @@ class Dt extends h {
|
|
|
1508
1565
|
super("div", []);
|
|
1509
1566
|
const {
|
|
1510
1567
|
checkoutProfile: t,
|
|
1511
|
-
isLoading:
|
|
1512
|
-
isFocused:
|
|
1568
|
+
isLoading: a,
|
|
1569
|
+
isFocused: i,
|
|
1513
1570
|
isCvvFocused: r,
|
|
1514
1571
|
isCcValid: s,
|
|
1515
|
-
isCvvValid:
|
|
1572
|
+
isCvvValid: n,
|
|
1516
1573
|
isCcTouched: l,
|
|
1517
1574
|
isCvvTouched: c,
|
|
1518
1575
|
cardType: d,
|
|
1519
|
-
cardExpiry:
|
|
1520
|
-
cardExpiryError:
|
|
1521
|
-
cardExpiryTouched:
|
|
1522
|
-
onChange:
|
|
1576
|
+
cardExpiry: p,
|
|
1577
|
+
cardExpiryError: g,
|
|
1578
|
+
cardExpiryTouched: y,
|
|
1579
|
+
onChange: F,
|
|
1523
1580
|
onBlur: I,
|
|
1524
|
-
translationFunc:
|
|
1525
|
-
cardExpiryAutocomplete:
|
|
1526
|
-
} = e,
|
|
1581
|
+
translationFunc: u,
|
|
1582
|
+
cardExpiryAutocomplete: b = "cc-exp"
|
|
1583
|
+
} = e, k = document.createElement("div");
|
|
1527
1584
|
this.cardNumber = new At({
|
|
1528
1585
|
styles: {
|
|
1529
1586
|
color: t.styles.textColor,
|
|
1530
1587
|
fontSize: t.styles.fontSize,
|
|
1531
1588
|
borderRadius: t.styles.borderRadius
|
|
1532
1589
|
},
|
|
1533
|
-
label:
|
|
1534
|
-
isLoading:
|
|
1535
|
-
isFocused:
|
|
1590
|
+
label: u("cardInformation"),
|
|
1591
|
+
isLoading: a,
|
|
1592
|
+
isFocused: i,
|
|
1536
1593
|
cardType: d
|
|
1537
|
-
}),
|
|
1538
|
-
const
|
|
1539
|
-
|
|
1594
|
+
}), k.appendChild(this.cardNumber.getElement());
|
|
1595
|
+
const v = document.createElement("div");
|
|
1596
|
+
v.className = "card-details", this.cardExpiry = new z({
|
|
1540
1597
|
name: "cardExpiry",
|
|
1541
1598
|
type: "tel",
|
|
1542
|
-
placeholder:
|
|
1599
|
+
placeholder: u("cardExpiry"),
|
|
1543
1600
|
// Always hide error initially
|
|
1544
1601
|
error: !1,
|
|
1545
|
-
errorMsg:
|
|
1546
|
-
value:
|
|
1547
|
-
autocomplete:
|
|
1548
|
-
onChange: (
|
|
1602
|
+
errorMsg: g,
|
|
1603
|
+
value: p,
|
|
1604
|
+
autocomplete: b,
|
|
1605
|
+
onChange: (f) => {
|
|
1549
1606
|
this.cardExpiry.setError(!1);
|
|
1550
|
-
const
|
|
1551
|
-
|
|
1607
|
+
const x = this.validationMessages.get("cardExpiry");
|
|
1608
|
+
x && (x.getElement().remove(), this.validationMessages.delete("cardExpiry"), this.updateErrorContainerHeight()), this.trimCardExpiry(), F(f);
|
|
1552
1609
|
},
|
|
1553
1610
|
styles: {
|
|
1554
1611
|
color: t.styles.textColor,
|
|
@@ -1556,65 +1613,65 @@ class Dt extends h {
|
|
|
1556
1613
|
fontSize: t.styles.fontSize,
|
|
1557
1614
|
fontFamily: t.styles.fontFamily
|
|
1558
1615
|
}
|
|
1559
|
-
}), this.cardExpiry.addEventListener("blur", (
|
|
1560
|
-
|
|
1561
|
-
}), this.cardExpiry.addEventListener("keydown", (
|
|
1562
|
-
const
|
|
1616
|
+
}), this.cardExpiry.addEventListener("blur", (f) => {
|
|
1617
|
+
g && y && this.cardExpiry.setError(!0, g), I(f);
|
|
1618
|
+
}), this.cardExpiry.addEventListener("keydown", (f) => {
|
|
1619
|
+
const x = f, R = [
|
|
1563
1620
|
"Backspace",
|
|
1564
1621
|
"Delete",
|
|
1565
1622
|
"ArrowLeft",
|
|
1566
1623
|
"ArrowRight",
|
|
1567
1624
|
"Tab"
|
|
1568
|
-
],
|
|
1569
|
-
|
|
1625
|
+
], B = this.cardExpiry.getValue().replace(/\D/g, "");
|
|
1626
|
+
R.includes(x.key) || (!/^\d$/.test(x.key) || B.length >= 4 && !x.isComposing) && x.preventDefault();
|
|
1570
1627
|
});
|
|
1571
|
-
const
|
|
1572
|
-
|
|
1573
|
-
const
|
|
1574
|
-
|
|
1628
|
+
const w = this.cardExpiry.getElement();
|
|
1629
|
+
w.style.height = "38.5px";
|
|
1630
|
+
const S = document.createElement("div");
|
|
1631
|
+
S.className = "input-wrapper", this.cardCvv = new Nt({
|
|
1575
1632
|
styles: {
|
|
1576
1633
|
borderRadius: typeof t.styles.borderRadius == "number" ? t.styles.borderRadius : 0
|
|
1577
1634
|
},
|
|
1578
|
-
isLoading:
|
|
1635
|
+
isLoading: a,
|
|
1579
1636
|
isFocused: r
|
|
1580
|
-
}),
|
|
1581
|
-
const
|
|
1582
|
-
if (
|
|
1583
|
-
const
|
|
1584
|
-
text:
|
|
1637
|
+
}), S.appendChild(this.cardCvv.getElement()), v.appendChild(this.cardExpiry.getElement()), v.appendChild(S), k.appendChild(v);
|
|
1638
|
+
const E = document.createElement("div");
|
|
1639
|
+
if (E.className = "error-messages-container", E.style.width = "100%", E.style.transition = "height 0.3s ease-in-out, opacity 0.3s ease-in-out", E.style.overflow = "hidden", E.style.height = "0px", E.style.opacity = "0", this.getElement().appendChild(k), this.getElement().appendChild(E), (i || l) && !s) {
|
|
1640
|
+
const f = new C({
|
|
1641
|
+
text: u("validation.cardNumberInvalid")
|
|
1585
1642
|
});
|
|
1586
|
-
this.validationMessages.set("cardNumber",
|
|
1643
|
+
this.validationMessages.set("cardNumber", f), E.appendChild(f.getElement());
|
|
1587
1644
|
}
|
|
1588
|
-
if ((r || c) && !
|
|
1589
|
-
const
|
|
1590
|
-
text:
|
|
1645
|
+
if ((r || c) && !n) {
|
|
1646
|
+
const f = new C({
|
|
1647
|
+
text: u("validation.cardSecurityFormat")
|
|
1591
1648
|
});
|
|
1592
|
-
this.validationMessages.set("cardCvv",
|
|
1649
|
+
this.validationMessages.set("cardCvv", f), E.appendChild(f.getElement());
|
|
1593
1650
|
}
|
|
1594
|
-
if (
|
|
1595
|
-
const
|
|
1596
|
-
text:
|
|
1651
|
+
if (g && y) {
|
|
1652
|
+
const f = new C({
|
|
1653
|
+
text: g
|
|
1597
1654
|
});
|
|
1598
|
-
this.validationMessages.set("cardExpiry",
|
|
1655
|
+
this.validationMessages.set("cardExpiry", f), E.appendChild(f.getElement());
|
|
1599
1656
|
}
|
|
1600
1657
|
setTimeout(() => this.updateErrorContainerHeight(), 0);
|
|
1601
1658
|
}
|
|
1602
1659
|
updateCardType(e) {
|
|
1603
1660
|
return this.cardNumber.updateCardType(e), this;
|
|
1604
1661
|
}
|
|
1605
|
-
updateCardExpiry(e, t,
|
|
1662
|
+
updateCardExpiry(e, t, a) {
|
|
1606
1663
|
this.cardExpiry.setValue(e);
|
|
1607
|
-
const
|
|
1664
|
+
const i = this.getElement().querySelector(
|
|
1608
1665
|
".error-messages-container"
|
|
1609
1666
|
), r = this.cardExpiry.getElement().querySelector("input"), s = document.activeElement === r;
|
|
1610
|
-
if (t &&
|
|
1667
|
+
if (t && a && !s)
|
|
1611
1668
|
if (this.cardExpiry.setError(!1), this.validationMessages.has("cardExpiry"))
|
|
1612
1669
|
this.validationMessages.get("cardExpiry")?.setText(t);
|
|
1613
1670
|
else {
|
|
1614
|
-
const l = new
|
|
1671
|
+
const l = new C({
|
|
1615
1672
|
text: t
|
|
1616
1673
|
});
|
|
1617
|
-
this.validationMessages.set("cardExpiry", l),
|
|
1674
|
+
this.validationMessages.set("cardExpiry", l), i.appendChild(l.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
|
|
1618
1675
|
}
|
|
1619
1676
|
else if (this.cardExpiry.setError(!1), s) {
|
|
1620
1677
|
const l = this.validationMessages.get("cardExpiry");
|
|
@@ -1632,43 +1689,43 @@ class Dt extends h {
|
|
|
1632
1689
|
const e = this.getCardExpiryValue().trim();
|
|
1633
1690
|
return this.cardExpiry.setValue(e), this;
|
|
1634
1691
|
}
|
|
1635
|
-
updateCardNumberValidation(e, t,
|
|
1692
|
+
updateCardNumberValidation(e, t, a, i = !1) {
|
|
1636
1693
|
this.cardNumber.setFocused(e);
|
|
1637
1694
|
const r = this.getElement().querySelector(
|
|
1638
1695
|
".error-messages-container"
|
|
1639
1696
|
), s = t !== !1;
|
|
1640
1697
|
if (e) {
|
|
1641
|
-
const
|
|
1642
|
-
return
|
|
1698
|
+
const n = this.validationMessages.get("cardNumber");
|
|
1699
|
+
return n && (n.getElement().remove(), this.validationMessages.delete("cardNumber"), this.updateErrorContainerHeight()), this;
|
|
1643
1700
|
}
|
|
1644
|
-
if (!e &&
|
|
1701
|
+
if (!e && i && !s) {
|
|
1645
1702
|
if (!this.validationMessages.has("cardNumber")) {
|
|
1646
|
-
const
|
|
1647
|
-
text:
|
|
1703
|
+
const n = new C({
|
|
1704
|
+
text: a("validation.cardNumberInvalid")
|
|
1648
1705
|
});
|
|
1649
|
-
this.validationMessages.set("cardNumber",
|
|
1706
|
+
this.validationMessages.set("cardNumber", n), r.appendChild(n.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
|
|
1650
1707
|
}
|
|
1651
1708
|
} else {
|
|
1652
|
-
const
|
|
1653
|
-
|
|
1709
|
+
const n = this.validationMessages.get("cardNumber");
|
|
1710
|
+
n && (n.getElement().remove(), this.validationMessages.delete("cardNumber"), this.updateErrorContainerHeight());
|
|
1654
1711
|
}
|
|
1655
1712
|
return this;
|
|
1656
1713
|
}
|
|
1657
|
-
updateCardCvvValidation(e, t,
|
|
1714
|
+
updateCardCvvValidation(e, t, a, i = !1) {
|
|
1658
1715
|
this.cardCvv.setFocused(e);
|
|
1659
1716
|
const r = this.getElement().querySelector(
|
|
1660
1717
|
".error-messages-container"
|
|
1661
1718
|
);
|
|
1662
|
-
if (!e &&
|
|
1719
|
+
if (!e && i && !(t !== !1)) {
|
|
1663
1720
|
if (!this.validationMessages.has("cardCvv")) {
|
|
1664
|
-
const
|
|
1665
|
-
text:
|
|
1721
|
+
const n = new C({
|
|
1722
|
+
text: a("validation.cardSecurityFormat")
|
|
1666
1723
|
});
|
|
1667
|
-
this.validationMessages.set("cardCvv",
|
|
1724
|
+
this.validationMessages.set("cardCvv", n), r.appendChild(n.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
|
|
1668
1725
|
}
|
|
1669
1726
|
} else {
|
|
1670
|
-
const
|
|
1671
|
-
|
|
1727
|
+
const n = this.validationMessages.get("cardCvv");
|
|
1728
|
+
n && (n.getElement().remove(), this.validationMessages.delete("cardCvv"), this.updateErrorContainerHeight());
|
|
1672
1729
|
}
|
|
1673
1730
|
return this;
|
|
1674
1731
|
}
|
|
@@ -1687,10 +1744,10 @@ class Dt extends h {
|
|
|
1687
1744
|
if (this.validationMessages.size === 0)
|
|
1688
1745
|
e.style.height = "0px", e.style.opacity = "0";
|
|
1689
1746
|
else {
|
|
1690
|
-
const t = e.style.height,
|
|
1747
|
+
const t = e.style.height, a = e.style.overflow;
|
|
1691
1748
|
e.style.height = "auto", e.style.overflow = "visible";
|
|
1692
|
-
const
|
|
1693
|
-
e.style.overflow =
|
|
1749
|
+
const i = e.scrollHeight;
|
|
1750
|
+
e.style.overflow = a, e.style.height = t, e.offsetHeight, e.style.height = i + 4 + "px", e.style.opacity = "1";
|
|
1694
1751
|
}
|
|
1695
1752
|
}
|
|
1696
1753
|
/**
|
|
@@ -1712,30 +1769,30 @@ class Dt extends h {
|
|
|
1712
1769
|
this.focusField("cardExpiry");
|
|
1713
1770
|
}
|
|
1714
1771
|
}
|
|
1715
|
-
class
|
|
1772
|
+
class Rt {
|
|
1716
1773
|
input;
|
|
1717
1774
|
constructor(e) {
|
|
1718
1775
|
const {
|
|
1719
1776
|
value: t,
|
|
1720
|
-
onChange:
|
|
1721
|
-
onBlur:
|
|
1777
|
+
onChange: a,
|
|
1778
|
+
onBlur: i,
|
|
1722
1779
|
error: r,
|
|
1723
1780
|
errorMsg: s,
|
|
1724
|
-
checkoutProfile:
|
|
1781
|
+
checkoutProfile: n,
|
|
1725
1782
|
translationFunc: l,
|
|
1726
1783
|
autocomplete: c = "email"
|
|
1727
1784
|
} = e;
|
|
1728
|
-
this.input = new
|
|
1785
|
+
this.input = new z({
|
|
1729
1786
|
name: "email",
|
|
1730
1787
|
label: l("email"),
|
|
1731
1788
|
// Always hide error initially - we'll show it only on blur if needed
|
|
1732
1789
|
error: !1,
|
|
1733
1790
|
errorMsg: s,
|
|
1734
1791
|
styles: {
|
|
1735
|
-
color:
|
|
1736
|
-
borderRadius: `${
|
|
1737
|
-
fontSize:
|
|
1738
|
-
fontFamily:
|
|
1792
|
+
color: n.styles.textColor,
|
|
1793
|
+
borderRadius: `${n.styles.borderRadius}px`,
|
|
1794
|
+
fontSize: n.styles.fontSize,
|
|
1795
|
+
fontFamily: n.styles.fontFamily
|
|
1739
1796
|
},
|
|
1740
1797
|
placeholder: l("email"),
|
|
1741
1798
|
type: "email",
|
|
@@ -1743,10 +1800,10 @@ class $t {
|
|
|
1743
1800
|
autocomplete: c,
|
|
1744
1801
|
// Wrap the original onChange to apply trim and hide errors during typing
|
|
1745
1802
|
onChange: (d) => {
|
|
1746
|
-
this.input.setError(!1), this.trim(),
|
|
1803
|
+
this.input.setError(!1), this.trim(), a(d);
|
|
1747
1804
|
}
|
|
1748
1805
|
}), this.input.addEventListener("blur", (d) => {
|
|
1749
|
-
r && this.input.setError(r, s),
|
|
1806
|
+
r && this.input.setError(r, s), i(d);
|
|
1750
1807
|
});
|
|
1751
1808
|
}
|
|
1752
1809
|
getValue() {
|
|
@@ -1772,19 +1829,19 @@ class $t {
|
|
|
1772
1829
|
this.input.focus();
|
|
1773
1830
|
}
|
|
1774
1831
|
}
|
|
1775
|
-
const
|
|
1776
|
-
class
|
|
1832
|
+
const Bt = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='101px'%20height='32'%20viewBox='0%200%20101%2032'%20preserveAspectRatio='xMinYMin%20meet'%3e%3cpath%20fill='%23003087'%20d='M%2012.237%202.8%20L%204.437%202.8%20C%203.937%202.8%203.437%203.2%203.337%203.7%20L%200.237%2023.7%20C%200.137%2024.1%200.437%2024.4%200.837%2024.4%20L%204.537%2024.4%20C%205.037%2024.4%205.537%2024%205.637%2023.5%20L%206.437%2018.1%20C%206.537%2017.6%206.937%2017.2%207.537%2017.2%20L%2010.037%2017.2%20C%2015.137%2017.2%2018.137%2014.7%2018.937%209.8%20C%2019.237%207.7%2018.937%206%2017.937%204.8%20C%2016.837%203.5%2014.837%202.8%2012.237%202.8%20Z%20M%2013.137%2010.1%20C%2012.737%2012.9%2010.537%2012.9%208.537%2012.9%20L%207.337%2012.9%20L%208.137%207.7%20C%208.137%207.4%208.437%207.2%208.737%207.2%20L%209.237%207.2%20C%2010.637%207.2%2011.937%207.2%2012.637%208%20C%2013.137%208.4%2013.337%209.1%2013.137%2010.1%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2035.437%2010%20L%2031.737%2010%20C%2031.437%2010%2031.137%2010.2%2031.137%2010.5%20L%2030.937%2011.5%20L%2030.637%2011.1%20C%2029.837%209.9%2028.037%209.5%2026.237%209.5%20C%2022.137%209.5%2018.637%2012.6%2017.937%2017%20C%2017.537%2019.2%2018.037%2021.3%2019.337%2022.7%20C%2020.437%2024%2022.137%2024.6%2024.037%2024.6%20C%2027.337%2024.6%2029.237%2022.5%2029.237%2022.5%20L%2029.037%2023.5%20C%2028.937%2023.9%2029.237%2024.3%2029.637%2024.3%20L%2033.037%2024.3%20C%2033.537%2024.3%2034.037%2023.9%2034.137%2023.4%20L%2036.137%2010.6%20C%2036.237%2010.4%2035.837%2010%2035.437%2010%20Z%20M%2030.337%2017.2%20C%2029.937%2019.3%2028.337%2020.8%2026.137%2020.8%20C%2025.037%2020.8%2024.237%2020.5%2023.637%2019.8%20C%2023.037%2019.1%2022.837%2018.2%2023.037%2017.2%20C%2023.337%2015.1%2025.137%2013.6%2027.237%2013.6%20C%2028.337%2013.6%2029.137%2014%2029.737%2014.6%20C%2030.237%2015.3%2030.437%2016.2%2030.337%2017.2%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2055.337%2010%20L%2051.637%2010%20C%2051.237%2010%2050.937%2010.2%2050.737%2010.5%20L%2045.537%2018.1%20L%2043.337%2010.8%20C%2043.237%2010.3%2042.737%2010%2042.337%2010%20L%2038.637%2010%20C%2038.237%2010%2037.837%2010.4%2038.037%2010.9%20L%2042.137%2023%20L%2038.237%2028.4%20C%2037.937%2028.8%2038.237%2029.4%2038.737%2029.4%20L%2042.437%2029.4%20C%2042.837%2029.4%2043.137%2029.2%2043.337%2028.9%20L%2055.837%2010.9%20C%2056.137%2010.6%2055.837%2010%2055.337%2010%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2067.737%202.8%20L%2059.937%202.8%20C%2059.437%202.8%2058.937%203.2%2058.837%203.7%20L%2055.737%2023.6%20C%2055.637%2024%2055.937%2024.3%2056.337%2024.3%20L%2060.337%2024.3%20C%2060.737%2024.3%2061.037%2024%2061.037%2023.7%20L%2061.937%2018%20C%2062.037%2017.5%2062.437%2017.1%2063.037%2017.1%20L%2065.537%2017.1%20C%2070.637%2017.1%2073.637%2014.6%2074.437%209.7%20C%2074.737%207.6%2074.437%205.9%2073.437%204.7%20C%2072.237%203.5%2070.337%202.8%2067.737%202.8%20Z%20M%2068.637%2010.1%20C%2068.237%2012.9%2066.037%2012.9%2064.037%2012.9%20L%2062.837%2012.9%20L%2063.637%207.7%20C%2063.637%207.4%2063.937%207.2%2064.237%207.2%20L%2064.737%207.2%20C%2066.137%207.2%2067.437%207.2%2068.137%208%20C%2068.637%208.4%2068.737%209.1%2068.637%2010.1%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2090.937%2010%20L%2087.237%2010%20C%2086.937%2010%2086.637%2010.2%2086.637%2010.5%20L%2086.437%2011.5%20L%2086.137%2011.1%20C%2085.337%209.9%2083.537%209.5%2081.737%209.5%20C%2077.637%209.5%2074.137%2012.6%2073.437%2017%20C%2073.037%2019.2%2073.537%2021.3%2074.837%2022.7%20C%2075.937%2024%2077.637%2024.6%2079.537%2024.6%20C%2082.837%2024.6%2084.737%2022.5%2084.737%2022.5%20L%2084.537%2023.5%20C%2084.437%2023.9%2084.737%2024.3%2085.137%2024.3%20L%2088.537%2024.3%20C%2089.037%2024.3%2089.537%2023.9%2089.637%2023.4%20L%2091.637%2010.6%20C%2091.637%2010.4%2091.337%2010%2090.937%2010%20Z%20M%2085.737%2017.2%20C%2085.337%2019.3%2083.737%2020.8%2081.537%2020.8%20C%2080.437%2020.8%2079.637%2020.5%2079.037%2019.8%20C%2078.437%2019.1%2078.237%2018.2%2078.437%2017.2%20C%2078.737%2015.1%2080.537%2013.6%2082.637%2013.6%20C%2083.737%2013.6%2084.537%2014%2085.137%2014.6%20C%2085.737%2015.3%2085.937%2016.2%2085.737%2017.2%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2095.337%203.3%20L%2092.137%2023.6%20C%2092.037%2024%2092.337%2024.3%2092.737%2024.3%20L%2095.937%2024.3%20C%2096.437%2024.3%2096.937%2023.9%2097.037%2023.4%20L%20100.237%203.5%20C%20100.337%203.1%20100.037%202.8%2099.637%202.8%20L%2096.037%202.8%20C%2095.637%202.8%2095.437%203%2095.337%203.3%20Z'/%3e%3c/svg%3e";
|
|
1833
|
+
class Ht extends h {
|
|
1777
1834
|
formData;
|
|
1778
1835
|
onSubmit;
|
|
1779
1836
|
isSubmitting = !1;
|
|
1780
1837
|
constructor(e) {
|
|
1781
1838
|
super("div", ["paypal"]);
|
|
1782
|
-
const { formData: t, onSubmit:
|
|
1783
|
-
this.formData = t, this.onSubmit =
|
|
1784
|
-
const
|
|
1785
|
-
|
|
1839
|
+
const { formData: t, onSubmit: a } = e;
|
|
1840
|
+
this.formData = t, this.onSubmit = a, this.getElement().style.cursor = a ? "pointer" : "default", this.getElement().style.opacity = "1";
|
|
1841
|
+
const i = document.createElement("div");
|
|
1842
|
+
i.className = "paypal-icon-container";
|
|
1786
1843
|
const r = document.createElement("img");
|
|
1787
|
-
r.src =
|
|
1844
|
+
r.src = Bt, r.style.width = "69px", r.style.height = "22px", r.style.maxWidth = "100%", r.style.display = "block", r.style.height = "auto", i.appendChild(r), this.getElement().appendChild(i), a && this.getElement().addEventListener("click", () => this.handleSubmit());
|
|
1788
1845
|
}
|
|
1789
1846
|
async handleSubmit() {
|
|
1790
1847
|
if (!(!this.onSubmit || this.isSubmitting)) {
|
|
@@ -1805,14 +1862,28 @@ class Bt extends h {
|
|
|
1805
1862
|
return this.isSubmitting = e, this.getElement().style.opacity = e ? "0.7" : "1", this;
|
|
1806
1863
|
}
|
|
1807
1864
|
}
|
|
1808
|
-
class
|
|
1865
|
+
class Ot extends h {
|
|
1866
|
+
constructor(e) {
|
|
1867
|
+
const { translationFunc: t, checkoutProfile: a } = e;
|
|
1868
|
+
super("div", ["payment-separator"]);
|
|
1869
|
+
const i = this.getElement(), r = document.createElement("span");
|
|
1870
|
+
r.className = "payment-separator__line";
|
|
1871
|
+
const s = document.createElement("p");
|
|
1872
|
+
s.textContent = t("pay-with-card"), s.className = "payment-separator__text", s.style.fontFamily = `${a.styles.fontFamily}, sans-serif`;
|
|
1873
|
+
const n = document.createElement("span");
|
|
1874
|
+
n.className = "payment-separator__line", i.appendChild(r), i.appendChild(s), i.appendChild(n);
|
|
1875
|
+
}
|
|
1876
|
+
}
|
|
1877
|
+
class Kt extends h {
|
|
1809
1878
|
paymentMethods;
|
|
1879
|
+
paymentSeparator;
|
|
1810
1880
|
constructor(e) {
|
|
1811
1881
|
const {
|
|
1812
1882
|
checkoutProfile: t,
|
|
1813
|
-
formData:
|
|
1814
|
-
onPaypalSubmit:
|
|
1815
|
-
supportedPaymentMethods: r
|
|
1883
|
+
formData: a,
|
|
1884
|
+
onPaypalSubmit: i,
|
|
1885
|
+
supportedPaymentMethods: r,
|
|
1886
|
+
translationFunc: s
|
|
1816
1887
|
} = e;
|
|
1817
1888
|
if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
|
|
1818
1889
|
this.getElement().style.display = "none";
|
|
@@ -1822,26 +1893,26 @@ class Ht extends h {
|
|
|
1822
1893
|
this.getElement().style.display = "none";
|
|
1823
1894
|
return;
|
|
1824
1895
|
}
|
|
1825
|
-
const
|
|
1896
|
+
const n = Object.entries(
|
|
1826
1897
|
t.additionalPaymentMethods
|
|
1827
|
-
).filter(([
|
|
1828
|
-
const
|
|
1829
|
-
return
|
|
1830
|
-
}).sort((
|
|
1831
|
-
if (
|
|
1898
|
+
).filter(([l, c]) => {
|
|
1899
|
+
const d = c.enabled, p = r ? r[l] === !0 : !0;
|
|
1900
|
+
return d && p;
|
|
1901
|
+
}).sort((l, c) => l[1].order - c[1].order);
|
|
1902
|
+
if (n.length === 0) {
|
|
1832
1903
|
this.getElement().style.display = "none";
|
|
1833
1904
|
return;
|
|
1834
1905
|
}
|
|
1835
|
-
for (const [
|
|
1836
|
-
switch (
|
|
1906
|
+
for (const [l] of n)
|
|
1907
|
+
switch (l) {
|
|
1837
1908
|
case "paypal": {
|
|
1838
|
-
if (
|
|
1839
|
-
const
|
|
1909
|
+
if (i) {
|
|
1910
|
+
const c = new Ht({
|
|
1840
1911
|
checkoutProfile: t,
|
|
1841
|
-
formData:
|
|
1842
|
-
onSubmit:
|
|
1912
|
+
formData: a,
|
|
1913
|
+
onSubmit: i
|
|
1843
1914
|
});
|
|
1844
|
-
this.paymentMethods.set("paypal",
|
|
1915
|
+
this.paymentMethods.set("paypal", c), c.appendTo(this.getElement());
|
|
1845
1916
|
}
|
|
1846
1917
|
break;
|
|
1847
1918
|
}
|
|
@@ -1858,10 +1929,14 @@ class Ht extends h {
|
|
|
1858
1929
|
// break;
|
|
1859
1930
|
default:
|
|
1860
1931
|
console.warn(
|
|
1861
|
-
`[PaymentMethods] Unsupported payment method: ${
|
|
1932
|
+
`[PaymentMethods] Unsupported payment method: ${l}`
|
|
1862
1933
|
);
|
|
1863
1934
|
break;
|
|
1864
1935
|
}
|
|
1936
|
+
this.paymentMethods.size > 0 && (this.paymentSeparator = new Ot({
|
|
1937
|
+
translationFunc: s,
|
|
1938
|
+
checkoutProfile: t
|
|
1939
|
+
}), this.getElement().appendChild(this.paymentSeparator.getElement()));
|
|
1865
1940
|
}
|
|
1866
1941
|
updateFormData(e) {
|
|
1867
1942
|
const t = this.paymentMethods.get("paypal");
|
|
@@ -1871,8 +1946,8 @@ class Ht extends h {
|
|
|
1871
1946
|
return this.paymentMethods.size > 0 && this.getElement().style.display !== "none";
|
|
1872
1947
|
}
|
|
1873
1948
|
}
|
|
1874
|
-
const
|
|
1875
|
-
class
|
|
1949
|
+
const qt = 17;
|
|
1950
|
+
class jt extends h {
|
|
1876
1951
|
styles;
|
|
1877
1952
|
isHovered = !1;
|
|
1878
1953
|
constructor(e) {
|
|
@@ -1883,7 +1958,7 @@ class qt extends h {
|
|
|
1883
1958
|
}
|
|
1884
1959
|
applyStyles() {
|
|
1885
1960
|
const e = this.getElement();
|
|
1886
|
-
e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? e.style.color = "
|
|
1961
|
+
e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? (e.style.color = "rgb(150, 150, 150)", e.style.backgroundColor = "rgb(200, 200, 200)") : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius === qt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
|
|
1887
1962
|
}
|
|
1888
1963
|
handleMouseEnter() {
|
|
1889
1964
|
this.isHovered = !0, this.applyStyles();
|
|
@@ -1895,20 +1970,20 @@ class qt extends h {
|
|
|
1895
1970
|
return this.getElement().disabled = e, e ? (this.addClass("disabled"), this.removeClass("valid")) : (this.removeClass("disabled"), this.addClass("valid")), this.applyStyles(), this;
|
|
1896
1971
|
}
|
|
1897
1972
|
}
|
|
1898
|
-
class
|
|
1973
|
+
class Ut {
|
|
1899
1974
|
button;
|
|
1900
1975
|
constructor(e) {
|
|
1901
|
-
const { disabled: t, checkoutProfile:
|
|
1902
|
-
this.button = new
|
|
1903
|
-
text:
|
|
1904
|
-
`buttonTexts.${
|
|
1976
|
+
const { disabled: t, checkoutProfile: a, translationFunc: i } = e;
|
|
1977
|
+
this.button = new jt({
|
|
1978
|
+
text: i(
|
|
1979
|
+
`buttonTexts.${a?.layout.actionButton.translationKey}`
|
|
1905
1980
|
),
|
|
1906
1981
|
styles: {
|
|
1907
|
-
backgroundColor:
|
|
1908
|
-
color:
|
|
1909
|
-
fontFamily:
|
|
1910
|
-
borderRadius:
|
|
1911
|
-
fontSize:
|
|
1982
|
+
backgroundColor: a.styles.buttonColor,
|
|
1983
|
+
color: a.styles.buttonTextColor,
|
|
1984
|
+
fontFamily: a.styles.fontFamily,
|
|
1985
|
+
borderRadius: a.styles.borderRadius,
|
|
1986
|
+
fontSize: a.styles.buttonFontSize
|
|
1912
1987
|
},
|
|
1913
1988
|
disabled: t
|
|
1914
1989
|
});
|
|
@@ -1919,15 +1994,15 @@ class Kt {
|
|
|
1919
1994
|
setDisabled(e) {
|
|
1920
1995
|
return this.button.setDisabled(e), this;
|
|
1921
1996
|
}
|
|
1922
|
-
addEventListener(e, t,
|
|
1923
|
-
return this.button.addEventListener(e, t,
|
|
1997
|
+
addEventListener(e, t, a) {
|
|
1998
|
+
return this.button.addEventListener(e, t, a), this;
|
|
1924
1999
|
}
|
|
1925
2000
|
appendTo(e) {
|
|
1926
2001
|
return this.button.appendTo(e), this;
|
|
1927
2002
|
}
|
|
1928
2003
|
}
|
|
1929
|
-
const
|
|
1930
|
-
class
|
|
2004
|
+
const _t = "https://test-htp.tokenex.com/Iframe/Iframe-v3.min.js", Gt = "https://htp.tokenex.com/iframe/iframe-v3.min.js";
|
|
2005
|
+
class Yt extends h {
|
|
1931
2006
|
options;
|
|
1932
2007
|
isSubmitting = !1;
|
|
1933
2008
|
scriptCleanup;
|
|
@@ -1940,20 +2015,21 @@ class _t extends h {
|
|
|
1940
2015
|
submitButton;
|
|
1941
2016
|
paymentMethods;
|
|
1942
2017
|
spinner;
|
|
2018
|
+
formSkeleton;
|
|
1943
2019
|
alert;
|
|
1944
2020
|
// Focus management
|
|
1945
|
-
focusManager = new
|
|
2021
|
+
focusManager = new Ft();
|
|
1946
2022
|
// Event handler references
|
|
1947
2023
|
emailFocusHandler;
|
|
1948
2024
|
cardExpiryFocusHandler;
|
|
1949
2025
|
nameFocusHandler;
|
|
1950
2026
|
// factories
|
|
1951
|
-
formManager =
|
|
2027
|
+
formManager = W();
|
|
1952
2028
|
checkoutProfile;
|
|
1953
2029
|
translation = P();
|
|
1954
2030
|
iframeHook;
|
|
1955
2031
|
constructor(e) {
|
|
1956
|
-
super("form", ["form-container"]), this.options = e, this.checkoutProfile =
|
|
2032
|
+
super("form", ["form-container"]), this.options = e, this.checkoutProfile = U({
|
|
1957
2033
|
apiKey: e.apiKey,
|
|
1958
2034
|
profileId: e.profileId,
|
|
1959
2035
|
environment: e.environment
|
|
@@ -1972,10 +2048,10 @@ class _t extends h {
|
|
|
1972
2048
|
};
|
|
1973
2049
|
}
|
|
1974
2050
|
handleFormStateChange = () => {
|
|
1975
|
-
const { formData: e, errors: t, touched:
|
|
1976
|
-
Object.keys(
|
|
1977
|
-
|
|
1978
|
-
}), this.focusManager.handleStateUpdate(e, t,
|
|
2051
|
+
const { formData: e, errors: t, touched: a } = this.formManager.getFormState(), i = this.iframeHook?.getState() || {};
|
|
2052
|
+
Object.keys(a).forEach((r) => {
|
|
2053
|
+
a[r] && this.localTouchedFields.add(r);
|
|
2054
|
+
}), this.focusManager.handleStateUpdate(e, t, a, i), this.updateFormUI();
|
|
1979
2055
|
};
|
|
1980
2056
|
handleProfileStateChange = (e) => {
|
|
1981
2057
|
if (!e.isLoading)
|
|
@@ -1983,7 +2059,7 @@ class _t extends h {
|
|
|
1983
2059
|
try {
|
|
1984
2060
|
if (e.checkoutProfile.styles?.fontFamily)
|
|
1985
2061
|
try {
|
|
1986
|
-
const { cleanup: t } =
|
|
2062
|
+
const { cleanup: t } = St({
|
|
1987
2063
|
fontFamily: e.checkoutProfile.styles.fontFamily
|
|
1988
2064
|
});
|
|
1989
2065
|
this.fontCleanup = t;
|
|
@@ -1995,8 +2071,8 @@ class _t extends h {
|
|
|
1995
2071
|
});
|
|
1996
2072
|
} catch (t) {
|
|
1997
2073
|
console.error("Error in profile state change:", t);
|
|
1998
|
-
const
|
|
1999
|
-
this.setErrorMessage(
|
|
2074
|
+
const a = e.error || "Failed to load checkout profile data";
|
|
2075
|
+
this.setErrorMessage(a);
|
|
2000
2076
|
}
|
|
2001
2077
|
else e.error && (console.error("NO profile found", e.error), this.setErrorMessage(e.error), this.setLoadingState(!1));
|
|
2002
2078
|
};
|
|
@@ -2017,18 +2093,18 @@ class _t extends h {
|
|
|
2017
2093
|
);
|
|
2018
2094
|
return;
|
|
2019
2095
|
}
|
|
2020
|
-
const { inputStyles: t, formContainerStyle:
|
|
2096
|
+
const { inputStyles: t, formContainerStyle: a } = kt(
|
|
2021
2097
|
e.checkoutProfile
|
|
2022
2098
|
);
|
|
2023
|
-
this.applyFormContainerStyles(
|
|
2024
|
-
const
|
|
2025
|
-
if (!
|
|
2099
|
+
this.applyFormContainerStyles(a);
|
|
2100
|
+
const i = document.getElementById("card-element"), r = document.getElementById("card-cvv-element");
|
|
2101
|
+
if (!i || !r) {
|
|
2026
2102
|
console.error(
|
|
2027
2103
|
"[Form] Card elements not found, cannot initialize TokenEx iframe."
|
|
2028
2104
|
);
|
|
2029
2105
|
return;
|
|
2030
2106
|
}
|
|
2031
|
-
this.iframeHook =
|
|
2107
|
+
this.iframeHook = Q({
|
|
2032
2108
|
apiKey: this.options.apiKey,
|
|
2033
2109
|
checkoutProfile: e.checkoutProfile,
|
|
2034
2110
|
inputStyles: t,
|
|
@@ -2061,13 +2137,13 @@ class _t extends h {
|
|
|
2061
2137
|
this.translation.t,
|
|
2062
2138
|
this.isCvvTouched
|
|
2063
2139
|
), this.cardSection.updateCardType(e.possibleCardType), this.cardSection.setLoading(e.loadingIframe)), e.loadingIframe || this.setLoadingState(!1), this.submitButton && this.submitButton.setDisabled(this.isFormDisabled());
|
|
2064
|
-
const { formData: t, errors:
|
|
2065
|
-
this.focusManager.handleStateUpdate(t,
|
|
2140
|
+
const { formData: t, errors: a, touched: i } = this.formManager.getFormState();
|
|
2141
|
+
this.focusManager.handleStateUpdate(t, a, i, e);
|
|
2066
2142
|
};
|
|
2067
2143
|
createCardSection = (e) => {
|
|
2068
2144
|
if (!this.cardSection)
|
|
2069
2145
|
try {
|
|
2070
|
-
const { formData: t, errors:
|
|
2146
|
+
const { formData: t, errors: a, touched: i } = this._getFormStateData();
|
|
2071
2147
|
let r = {
|
|
2072
2148
|
loadingIframe: !0,
|
|
2073
2149
|
isFocused: !1,
|
|
@@ -2076,7 +2152,7 @@ class _t extends h {
|
|
|
2076
2152
|
isCvvValid: !1,
|
|
2077
2153
|
possibleCardType: "unknown"
|
|
2078
2154
|
};
|
|
2079
|
-
this.iframeHook && (r = this.iframeHook.getState()), this.cardSection = new
|
|
2155
|
+
this.iframeHook && (r = this.iframeHook.getState()), this.cardSection = new $t({
|
|
2080
2156
|
checkoutProfile: e,
|
|
2081
2157
|
isLoading: r.loadingIframe,
|
|
2082
2158
|
isFocused: r.isFocused,
|
|
@@ -2089,8 +2165,8 @@ class _t extends h {
|
|
|
2089
2165
|
// Initially not touched
|
|
2090
2166
|
cardType: r.possibleCardType,
|
|
2091
2167
|
cardExpiry: t.cardExpiry,
|
|
2092
|
-
cardExpiryError:
|
|
2093
|
-
cardExpiryTouched: !!
|
|
2168
|
+
cardExpiryError: a.cardExpiry,
|
|
2169
|
+
cardExpiryTouched: !!i.cardExpiry,
|
|
2094
2170
|
onChange: this.handleChange,
|
|
2095
2171
|
onBlur: this.handleBlur,
|
|
2096
2172
|
translationFunc: this.translation.t
|
|
@@ -2112,10 +2188,10 @@ class _t extends h {
|
|
|
2112
2188
|
};
|
|
2113
2189
|
initializeForm() {
|
|
2114
2190
|
this.setLoadingState(!0), this.options.errorMsg && this.setErrorMessage(this.options.errorMsg);
|
|
2115
|
-
const e = this.options.environment === "test" ?
|
|
2191
|
+
const e = this.options.environment === "test" ? _t : Gt, { cleanup: t, isLoaded: a } = xt({
|
|
2116
2192
|
scriptSrc: e
|
|
2117
2193
|
});
|
|
2118
|
-
this.scriptCleanup = t, this.tokenExScriptPromise =
|
|
2194
|
+
this.scriptCleanup = t, this.tokenExScriptPromise = a, a.then(() => {
|
|
2119
2195
|
}).catch(() => {
|
|
2120
2196
|
this.setLoadingState(!1), this.setErrorMessage(
|
|
2121
2197
|
"Failed to load payment system. Please try again later."
|
|
@@ -2160,11 +2236,12 @@ class _t extends h {
|
|
|
2160
2236
|
try {
|
|
2161
2237
|
if (!e?.additionalPaymentMethods)
|
|
2162
2238
|
return;
|
|
2163
|
-
const
|
|
2164
|
-
this.paymentMethods = new
|
|
2239
|
+
const a = this.iframeHook?.getState().iframeConfig?.supportedPaymentMethods, { formData: i } = this._getFormStateData();
|
|
2240
|
+
this.paymentMethods = new Kt({
|
|
2165
2241
|
checkoutProfile: e,
|
|
2166
|
-
formData:
|
|
2167
|
-
supportedPaymentMethods:
|
|
2242
|
+
formData: i,
|
|
2243
|
+
supportedPaymentMethods: a,
|
|
2244
|
+
translationFunc: this.translation.t,
|
|
2168
2245
|
onPaypalSubmit: async () => {
|
|
2169
2246
|
await this.handlePaypalSubmit();
|
|
2170
2247
|
}
|
|
@@ -2172,19 +2249,19 @@ class _t extends h {
|
|
|
2172
2249
|
this.paymentMethods.getElement(),
|
|
2173
2250
|
this.element.firstChild
|
|
2174
2251
|
) : this.element.appendChild(this.paymentMethods.getElement());
|
|
2175
|
-
} catch (
|
|
2176
|
-
throw console.error("Error creating payment methods:",
|
|
2252
|
+
} catch (a) {
|
|
2253
|
+
throw console.error("Error creating payment methods:", a), a;
|
|
2177
2254
|
}
|
|
2178
2255
|
}
|
|
2179
2256
|
createEmailField(e) {
|
|
2180
2257
|
try {
|
|
2181
|
-
const { formData: t, errors:
|
|
2182
|
-
this.emailField = new
|
|
2258
|
+
const { formData: t, errors: a, touched: i } = this._getFormStateData();
|
|
2259
|
+
this.emailField = new Rt({
|
|
2183
2260
|
value: t.email,
|
|
2184
2261
|
onChange: this.handleChange,
|
|
2185
2262
|
onBlur: this.handleBlur,
|
|
2186
|
-
error: !!(
|
|
2187
|
-
errorMsg:
|
|
2263
|
+
error: !!(a.email && i.email),
|
|
2264
|
+
errorMsg: a.email,
|
|
2188
2265
|
checkoutProfile: e,
|
|
2189
2266
|
translationFunc: this.translation.t
|
|
2190
2267
|
}), this.emailFocusHandler = () => this.handleFieldFocus("email"), this.emailField.getElement().addEventListener("focus", this.emailFocusHandler, !0), this.focusManager.registerField("email", this.emailField), this.element.appendChild(this.emailField.getElement());
|
|
@@ -2194,13 +2271,13 @@ class _t extends h {
|
|
|
2194
2271
|
}
|
|
2195
2272
|
createCardholderSection(e) {
|
|
2196
2273
|
try {
|
|
2197
|
-
const { formData: t, errors:
|
|
2198
|
-
this.cardholderSection = new
|
|
2274
|
+
const { formData: t, errors: a, touched: i } = this._getFormStateData();
|
|
2275
|
+
this.cardholderSection = new It({
|
|
2199
2276
|
value: t.name,
|
|
2200
2277
|
onChange: this.handleChange,
|
|
2201
2278
|
onBlur: this.handleBlur,
|
|
2202
|
-
error: !!(
|
|
2203
|
-
errorMsg:
|
|
2279
|
+
error: !!(a.name && i.name),
|
|
2280
|
+
errorMsg: a.name,
|
|
2204
2281
|
checkoutProfile: e,
|
|
2205
2282
|
translationFunc: this.translation.t
|
|
2206
2283
|
});
|
|
@@ -2212,7 +2289,7 @@ class _t extends h {
|
|
|
2212
2289
|
}
|
|
2213
2290
|
createSubmitButton(e) {
|
|
2214
2291
|
try {
|
|
2215
|
-
this.submitButton = new
|
|
2292
|
+
this.submitButton = new Ut({
|
|
2216
2293
|
disabled: this.isFormDisabled(),
|
|
2217
2294
|
checkoutProfile: e,
|
|
2218
2295
|
translationFunc: this.translation.t
|
|
@@ -2224,18 +2301,18 @@ class _t extends h {
|
|
|
2224
2301
|
// Track locally touched fields to avoid redundant state checks
|
|
2225
2302
|
localTouchedFields = /* @__PURE__ */ new Set();
|
|
2226
2303
|
handleChange = (e) => {
|
|
2227
|
-
const t = e.target, { name:
|
|
2228
|
-
this.formManager.handleChange(r,
|
|
2229
|
-
const { formData: s, errors:
|
|
2230
|
-
this.focusManager.handleStateUpdate(s,
|
|
2304
|
+
const t = e.target, { name: a, value: i } = t, r = a;
|
|
2305
|
+
this.formManager.handleChange(r, i), this.localTouchedFields.has(r) || (this.localTouchedFields.add(r), this.formManager.handleBlur(r, i));
|
|
2306
|
+
const { formData: s, errors: n, touched: l } = this.formManager.getFormState(), c = this.iframeHook?.getState() || {};
|
|
2307
|
+
this.focusManager.handleStateUpdate(s, n, l, c);
|
|
2231
2308
|
};
|
|
2232
2309
|
handleBlur = (e) => {
|
|
2233
|
-
const t = e.target, { name:
|
|
2234
|
-
this.localTouchedFields.add(r), this.formManager.handleBlur(r,
|
|
2235
|
-
const { formData: s, errors:
|
|
2310
|
+
const t = e.target, { name: a, value: i } = t, r = a;
|
|
2311
|
+
this.localTouchedFields.add(r), this.formManager.handleBlur(r, i);
|
|
2312
|
+
const { formData: s, errors: n, touched: l } = this.formManager.getFormState(), c = this.iframeHook?.getState() || {};
|
|
2236
2313
|
l[r] || this.focusManager.handleStateUpdate(
|
|
2237
2314
|
s,
|
|
2238
|
-
|
|
2315
|
+
n,
|
|
2239
2316
|
l,
|
|
2240
2317
|
c
|
|
2241
2318
|
);
|
|
@@ -2261,26 +2338,29 @@ class _t extends h {
|
|
|
2261
2338
|
isCvvValid: !1
|
|
2262
2339
|
};
|
|
2263
2340
|
this.iframeHook && (t = this.iframeHook.getState());
|
|
2264
|
-
const
|
|
2341
|
+
const a = Object.keys(e.errors).length > 0, i = (
|
|
2265
2342
|
// Only require card validation if CardSection exists
|
|
2266
2343
|
(!this.cardSection || t.isCcValid && t.isCvvValid) && !!e.formData.email && !!e.formData.name && // Only require card expiry if CardSection exists
|
|
2267
2344
|
(!this.cardSection || !!e.formData.cardExpiry)
|
|
2268
2345
|
);
|
|
2269
|
-
return
|
|
2346
|
+
return a || !i || this.isSubmitting;
|
|
2270
2347
|
}
|
|
2271
2348
|
setLoadingState(e) {
|
|
2272
2349
|
if (this.options.onLoadingStateChange) {
|
|
2273
2350
|
this.options.onLoadingStateChange(e);
|
|
2274
2351
|
return;
|
|
2275
2352
|
}
|
|
2276
|
-
e ? (this.
|
|
2353
|
+
e ? (this.hideSkeleton(), this.formSkeleton = new Mt(), this.element.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
|
|
2277
2354
|
}
|
|
2278
2355
|
showSpinner(e) {
|
|
2279
|
-
this.hideSpinner(), this.spinner = new
|
|
2356
|
+
this.hideSpinner(), this.spinner = new Lt({ text: e }), this.element.appendChild(this.spinner.getElement());
|
|
2280
2357
|
}
|
|
2281
2358
|
hideSpinner() {
|
|
2282
2359
|
this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
|
|
2283
2360
|
}
|
|
2361
|
+
hideSkeleton() {
|
|
2362
|
+
this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0);
|
|
2363
|
+
}
|
|
2284
2364
|
handleSubmit = async (e) => {
|
|
2285
2365
|
if (e.preventDefault(), !this.isFormDisabled())
|
|
2286
2366
|
try {
|
|
@@ -2324,7 +2404,7 @@ class _t extends h {
|
|
|
2324
2404
|
* Update the form error message
|
|
2325
2405
|
*/
|
|
2326
2406
|
setErrorMessage(e) {
|
|
2327
|
-
return this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new
|
|
2407
|
+
return this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new wt({ message: e }), this.element.insertBefore(this.alert.getElement(), this.element.firstChild), this;
|
|
2328
2408
|
}
|
|
2329
2409
|
/**
|
|
2330
2410
|
* Clean up resources when the form is destroyed
|
|
@@ -2345,7 +2425,7 @@ class _t extends h {
|
|
|
2345
2425
|
const e = this.cardholderSection.getElement().querySelector('input[name="name"]');
|
|
2346
2426
|
e && this.nameFocusHandler && e.removeEventListener("focus", this.nameFocusHandler), this.cardholderSection.getElement().remove(), this.cardholderSection = void 0;
|
|
2347
2427
|
}
|
|
2348
|
-
this.submitButton && (this.submitButton.getElement().remove(), this.submitButton = void 0), this.paymentMethods && (this.paymentMethods.getElement().remove(), this.paymentMethods = void 0), this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0), this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.getElement().remove();
|
|
2428
|
+
this.submitButton && (this.submitButton.getElement().remove(), this.submitButton = void 0), this.paymentMethods && (this.paymentMethods.getElement().remove(), this.paymentMethods = void 0), this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0), this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0), this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.getElement().remove();
|
|
2349
2429
|
}
|
|
2350
2430
|
handleKeyDown = (e) => {
|
|
2351
2431
|
e.key === "Enter" && !this.isFormDisabled() && (e.target instanceof HTMLTextAreaElement || (e.preventDefault(), this.handleSubmit(e)));
|
|
@@ -2357,7 +2437,7 @@ class _t extends h {
|
|
|
2357
2437
|
this.focusManager.handleFieldFocus(e);
|
|
2358
2438
|
};
|
|
2359
2439
|
}
|
|
2360
|
-
class
|
|
2440
|
+
class Zt {
|
|
2361
2441
|
container = null;
|
|
2362
2442
|
options;
|
|
2363
2443
|
onSubmit;
|
|
@@ -2372,7 +2452,7 @@ class Gt {
|
|
|
2372
2452
|
this.container && this.form && (this.form && e.errorMsg && !this.options.disableErrorMessages ? this.form.setErrorMessage(e.errorMsg) : this.renderForm(e.errorMsg));
|
|
2373
2453
|
}
|
|
2374
2454
|
renderForm(e) {
|
|
2375
|
-
this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new
|
|
2455
|
+
this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new Yt({
|
|
2376
2456
|
apiKey: this.options.apiKey,
|
|
2377
2457
|
onSubmit: this.onSubmit,
|
|
2378
2458
|
locale: this.options.locale,
|
|
@@ -2388,7 +2468,7 @@ class Gt {
|
|
|
2388
2468
|
this.form && (this.form.destroy(), this.form = null);
|
|
2389
2469
|
}
|
|
2390
2470
|
}
|
|
2391
|
-
class
|
|
2471
|
+
class Jt {
|
|
2392
2472
|
state;
|
|
2393
2473
|
listeners = /* @__PURE__ */ new Set();
|
|
2394
2474
|
constructor(e) {
|
|
@@ -2410,20 +2490,20 @@ class Yt {
|
|
|
2410
2490
|
this.listeners.forEach((t) => t(e));
|
|
2411
2491
|
}
|
|
2412
2492
|
}
|
|
2413
|
-
const
|
|
2414
|
-
class
|
|
2493
|
+
const Wt = "en";
|
|
2494
|
+
class Xt {
|
|
2415
2495
|
config;
|
|
2416
2496
|
apiService;
|
|
2417
2497
|
formManager;
|
|
2418
2498
|
stateManager;
|
|
2419
2499
|
constructor(e) {
|
|
2420
|
-
this.config = this.validateConfig(e), this.apiService = new
|
|
2500
|
+
this.config = this.validateConfig(e), this.apiService = new H(
|
|
2421
2501
|
this.config.apiKey,
|
|
2422
2502
|
this.config.environment
|
|
2423
|
-
), this.stateManager = new
|
|
2503
|
+
), this.stateManager = new Jt({
|
|
2424
2504
|
mounted: !1,
|
|
2425
2505
|
form: null
|
|
2426
|
-
}), this.formManager = new
|
|
2506
|
+
}), this.formManager = new Zt(
|
|
2427
2507
|
{
|
|
2428
2508
|
locale: this.config.locale,
|
|
2429
2509
|
apiKey: this.config.apiKey,
|
|
@@ -2448,7 +2528,7 @@ class Jt {
|
|
|
2448
2528
|
paymentId: e.paymentId,
|
|
2449
2529
|
returnUrl: e.returnUrl,
|
|
2450
2530
|
environment: e.environment,
|
|
2451
|
-
locale: e.locale ||
|
|
2531
|
+
locale: e.locale || Wt,
|
|
2452
2532
|
disableErrorMessages: e.disableErrorMessages ?? !1,
|
|
2453
2533
|
manualActionHandling: e.manualActionHandling ?? !1,
|
|
2454
2534
|
callbacks: {
|
|
@@ -2463,11 +2543,11 @@ class Jt {
|
|
|
2463
2543
|
const t = document.querySelector(e);
|
|
2464
2544
|
if (!t)
|
|
2465
2545
|
throw new Error(`Container ${e} not found`);
|
|
2466
|
-
const
|
|
2467
|
-
return t.appendChild(
|
|
2468
|
-
form:
|
|
2546
|
+
const a = document.createElement("div");
|
|
2547
|
+
return t.appendChild(a), this.stateManager.updateState({
|
|
2548
|
+
form: a,
|
|
2469
2549
|
mounted: !0
|
|
2470
|
-
}), this.formManager.mount(
|
|
2550
|
+
}), this.formManager.mount(a), this;
|
|
2471
2551
|
}
|
|
2472
2552
|
unmount() {
|
|
2473
2553
|
const { mounted: e } = this.stateManager.getState();
|
|
@@ -2485,16 +2565,16 @@ class Jt {
|
|
|
2485
2565
|
formData: t
|
|
2486
2566
|
}) {
|
|
2487
2567
|
try {
|
|
2488
|
-
const
|
|
2568
|
+
const a = await this.apiService.authorizePayment({
|
|
2489
2569
|
checkoutKey: this.config.checkoutKey,
|
|
2490
2570
|
formData: t || null,
|
|
2491
2571
|
token: e?.token || null,
|
|
2492
2572
|
paymentId: this.config.paymentId,
|
|
2493
2573
|
returnUrl: this.config.returnUrl
|
|
2494
2574
|
});
|
|
2495
|
-
this.handlePaymentResponse(
|
|
2496
|
-
} catch (
|
|
2497
|
-
this.handleAuthorizationError(
|
|
2575
|
+
this.handlePaymentResponse(a);
|
|
2576
|
+
} catch (a) {
|
|
2577
|
+
this.handleAuthorizationError(a);
|
|
2498
2578
|
}
|
|
2499
2579
|
}
|
|
2500
2580
|
handlePaymentResponse(e) {
|
|
@@ -2511,15 +2591,15 @@ class Jt {
|
|
|
2511
2591
|
t && this.formManager.update({ errorMsg: e.details?.message });
|
|
2512
2592
|
}
|
|
2513
2593
|
}
|
|
2514
|
-
typeof globalThis < "u" && (globalThis.OdusCheckout =
|
|
2594
|
+
typeof globalThis < "u" && (globalThis.OdusCheckout = Xt);
|
|
2515
2595
|
export {
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2596
|
+
Xt as OdusCheckout,
|
|
2597
|
+
le as deLocale,
|
|
2598
|
+
ye as enLocale,
|
|
2599
|
+
we as esLocale,
|
|
2600
|
+
Ve as frLocale,
|
|
2601
|
+
je as itLocale,
|
|
2602
|
+
Qe as plLocale,
|
|
2603
|
+
lt as ptLocale,
|
|
2604
|
+
yt as trLocale
|
|
2525
2605
|
};
|