@odus/checkout 0.30.0-beta.2 → 0.30.0-beta.4

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.
Files changed (9) hide show
  1. package/dist/checkout.d.ts +1 -0
  2. package/dist/checkout.d.ts.map +1 -1
  3. package/dist/checkout.es.js +716 -690
  4. package/dist/elements.es.js +24 -16
  5. package/dist/index.css +1 -1
  6. package/dist/package.json +6 -1
  7. package/dist/phone.js +1437 -1420
  8. package/dist/shared.js +1655 -1584
  9. package/package.json +6 -1
package/dist/checkout.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { l as ge, c as ue, a as fe, f as j, d as ye, C as k, I as me, g as be, S as V, b as Q, H as ve, V as ee, e as D, A as Se, P as Ee, E as Ce, h as Fe, i as Me, j as Ne, k as we, m as Pe, n as ke, F as Ae, o as De, p as Ie } from "./shared.js";
2
- import { q as Vt, r as _t, s as Rt, t as Bt, u as Ut, v as Ot, w as Ht, x as zt } from "./shared.js";
1
+ import { l as fe, c as me, a as ye, f as j, d as be, C as A, I as pe, b as P, g as ve, S as _, e as ee, H as Se, V as te, h as D, A as Ce, P as Ee, E as Fe, i as Me, j as Ne, k as we, m as Pe, n as ke, o as Ae, F as xe, p as De, q as Ie } from "./shared.js";
2
+ import { r as _t, s as Rt, t as Bt, u as Ut, v as Ot, w as Ht, x as zt, y as $t } from "./shared.js";
3
3
  const F = {
4
4
  // Checkout lifecycle events
5
5
  CHECKOUT_INITIALIZED: "checkout.initialized",
@@ -16,46 +16,46 @@ const F = {
16
16
  PAYMENT_AUTHORIZED: "payment.authorized",
17
17
  PAYMENT_FAILED: "payment.failed",
18
18
  PAYMENT_ACTION_REQUIRED: "payment.action_required"
19
- }, te = {
19
+ }, se = {
20
20
  PAYMENT_AUTHORIZATION_TIME: "payment.authorization_time",
21
21
  CHECKOUT_LOAD_TIME: "checkout.load_time",
22
22
  FORM_RENDER_TIME: "form.render_time"
23
- }, xe = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, Te = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Le = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, G = (i) => {
24
- if (!i)
23
+ }, Te = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, Le = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Ve = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, Z = (n) => {
24
+ if (!n)
25
25
  return [];
26
- const e = [], t = i.split(`
26
+ const e = [], t = n.split(`
27
27
  `);
28
28
  for (const s of t) {
29
29
  const a = s.trim();
30
30
  if (!a)
31
31
  continue;
32
- let n = xe.exec(a);
33
- if (n) {
32
+ let i = Te.exec(a);
33
+ if (i) {
34
34
  e.push({
35
- function: n[1] || "(anonymous)",
36
- filename: n[2],
37
- lineno: parseInt(n[3], 10),
38
- colno: parseInt(n[4], 10)
35
+ function: i[1] || "(anonymous)",
36
+ filename: i[2],
37
+ lineno: parseInt(i[3], 10),
38
+ colno: parseInt(i[4], 10)
39
39
  });
40
40
  continue;
41
41
  }
42
- n = Te.exec(a) ?? Le.exec(a), n && e.push({
43
- function: n[1] || "(anonymous)",
44
- filename: n[2],
45
- lineno: parseInt(n[3], 10),
46
- colno: parseInt(n[4], 10)
42
+ i = Le.exec(a) ?? Ve.exec(a), i && e.push({
43
+ function: i[1] || "(anonymous)",
44
+ filename: i[2],
45
+ lineno: parseInt(i[3], 10),
46
+ colno: parseInt(i[4], 10)
47
47
  });
48
48
  }
49
49
  return e;
50
- }, Ve = "@odus/telemetry", _e = "0.0.1";
51
- let H, z, J;
52
- const Re = () => {
50
+ }, _e = "@odus/telemetry", Re = "0.0.1";
51
+ let z, $, X;
52
+ const Be = () => {
53
53
  if (typeof navigator > "u")
54
54
  return {};
55
- const i = navigator.userAgent;
55
+ const n = navigator.userAgent;
56
56
  let e, t, s;
57
- i.includes("Firefox/") ? (e = "Firefox", t = i.match(/Firefox\/([\d.]+)/)?.[1]) : i.includes("Edg/") ? (e = "Edge", t = i.match(/Edg\/([\d.]+)/)?.[1]) : i.includes("Chrome/") ? (e = "Chrome", t = i.match(/Chrome\/([\d.]+)/)?.[1]) : i.includes("Safari/") && (e = "Safari", t = i.match(/Version\/([\d.]+)/)?.[1]), i.includes("Windows") ? s = "Windows" : i.includes("Mac OS") ? s = "macOS" : i.includes("Linux") ? s = "Linux" : i.includes("Android") ? s = "Android" : (i.includes("iPhone") || i.includes("iPad")) && (s = "iOS");
58
- const a = /Mobi|Android|iPhone|iPad/i.test(i) || void 0;
57
+ n.includes("Firefox/") ? (e = "Firefox", t = n.match(/Firefox\/([\d.]+)/)?.[1]) : n.includes("Edg/") ? (e = "Edge", t = n.match(/Edg\/([\d.]+)/)?.[1]) : n.includes("Chrome/") ? (e = "Chrome", t = n.match(/Chrome\/([\d.]+)/)?.[1]) : n.includes("Safari/") && (e = "Safari", t = n.match(/Version\/([\d.]+)/)?.[1]), n.includes("Windows") ? s = "Windows" : n.includes("Mac OS") ? s = "macOS" : n.includes("Linux") ? s = "Linux" : n.includes("Android") ? s = "Android" : (n.includes("iPhone") || n.includes("iPad")) && (s = "iOS");
58
+ const a = /Mobi|Android|iPhone|iPad/i.test(n) || void 0;
59
59
  return {
60
60
  name: e,
61
61
  version: t,
@@ -64,40 +64,40 @@ const Re = () => {
64
64
  language: navigator.language,
65
65
  viewportWidth: String(window.innerWidth),
66
66
  viewportHeight: String(window.innerHeight),
67
- userAgent: i
67
+ userAgent: n
68
68
  };
69
- }, Be = () => typeof window > "u" ? {} : { url: window.location.href }, Ue = (i) => {
70
- H = void 0, J = void 0, z = i.sessionTracking?.session ? { id: i.sessionTracking.session.id } : void 0;
71
- }, Oe = (i) => {
72
- H = i;
73
- }, He = () => {
74
- H = void 0;
75
- }, ze = (i) => {
76
- z = i;
77
- }, $e = (i) => {
78
- J = i;
79
- }, je = () => z?.id, Ke = (i) => ({
80
- sdk: { name: Ve, version: _e },
81
- app: i.app,
82
- user: H,
83
- session: z,
84
- page: Be(),
85
- browser: Re(),
86
- view: J
87
- }), qe = 30, We = 250, Ye = 6e4;
88
- let I = [], P = null, X = 0, _ = null, R = null;
89
- const Ge = (i) => {
90
- if (P)
69
+ }, Ue = () => typeof window > "u" ? {} : { url: window.location.href }, Oe = (n) => {
70
+ z = void 0, X = void 0, $ = n.sessionTracking?.session ? { id: n.sessionTracking.session.id } : void 0;
71
+ }, He = (n) => {
72
+ z = n;
73
+ }, ze = () => {
74
+ z = void 0;
75
+ }, $e = (n) => {
76
+ $ = n;
77
+ }, Ke = (n) => {
78
+ X = n;
79
+ }, je = () => $?.id, qe = (n) => ({
80
+ sdk: { name: _e, version: Re },
81
+ app: n.app,
82
+ user: z,
83
+ session: $,
84
+ page: Ue(),
85
+ browser: Be(),
86
+ view: X
87
+ }), We = 30, Ye = 250, Ge = 6e4;
88
+ let I = [], k = null, Q = 0, R = null, B = null;
89
+ const Ze = (n) => {
90
+ if (k)
91
91
  return;
92
- const e = i.batching?.sendTimeout ?? We;
93
- P = setTimeout(() => {
94
- $(i);
92
+ const e = n.batching?.sendTimeout ?? Ye;
93
+ k = setTimeout(() => {
94
+ K(n);
95
95
  }, e);
96
- }, Ze = (i, e) => {
96
+ }, Je = (n, e) => {
97
97
  const t = {
98
- meta: Ke(e)
98
+ meta: qe(e)
99
99
  };
100
- for (const s of i)
100
+ for (const s of n)
101
101
  switch (s.type) {
102
102
  case "exception":
103
103
  (t.exceptions ??= []).push(s.payload);
@@ -113,188 +113,188 @@ const Ge = (i) => {
113
113
  break;
114
114
  }
115
115
  return t;
116
- }, Je = (i, e, t = !1) => {
117
- const s = JSON.stringify(i), a = je(), n = {
116
+ }, Xe = (n, e, t = !1) => {
117
+ const s = JSON.stringify(n), a = je(), i = {
118
118
  "Content-Type": "application/json"
119
119
  };
120
- if (a && (n["x-faro-session-id"] = a), t && typeof navigator < "u" && navigator.sendBeacon) {
120
+ if (a && (i["x-faro-session-id"] = a), t && typeof navigator < "u" && navigator.sendBeacon) {
121
121
  const o = new Blob([s], { type: "application/json" });
122
122
  navigator.sendBeacon(e, o);
123
123
  return;
124
124
  }
125
- const r = s.length < Ye;
125
+ const r = s.length < Ge;
126
126
  fetch(e, {
127
127
  method: "POST",
128
- headers: n,
128
+ headers: i,
129
129
  body: s,
130
130
  keepalive: r
131
131
  }).then((o) => {
132
132
  if (o.status === 429) {
133
133
  const d = o.headers.get("Retry-After"), c = d ? parseInt(d, 10) * 1e3 : 3e4;
134
- X = Date.now() + c;
134
+ Q = Date.now() + c;
135
135
  }
136
136
  }).catch(() => {
137
137
  });
138
- }, $ = (i, e = !1) => {
139
- if (P && (clearTimeout(P), P = null), I.length === 0)
138
+ }, K = (n, e = !1) => {
139
+ if (k && (clearTimeout(k), k = null), I.length === 0)
140
140
  return;
141
- if (Date.now() < X) {
141
+ if (Date.now() < Q) {
142
142
  I = [];
143
143
  return;
144
144
  }
145
145
  const t = I;
146
146
  I = [];
147
147
  try {
148
- let s = Ze(t, i);
149
- if (i.beforeSend) {
150
- const a = i.beforeSend(s);
148
+ let s = Je(t, n);
149
+ if (n.beforeSend) {
150
+ const a = n.beforeSend(s);
151
151
  if (!a)
152
152
  return;
153
153
  s = a;
154
154
  }
155
- Je(s, i.url, e);
155
+ Xe(s, n.url, e);
156
156
  } catch {
157
157
  }
158
- }, w = (i, e) => {
159
- I.push(i);
160
- const t = e.batching?.itemLimit ?? qe;
158
+ }, w = (n, e) => {
159
+ I.push(n);
160
+ const t = e.batching?.itemLimit ?? We;
161
161
  if (I.length >= t) {
162
- $(e);
162
+ K(e);
163
163
  return;
164
164
  }
165
- Ge(e);
166
- }, Xe = (i) => {
167
- if (I = [], X = 0, P && (clearTimeout(P), P = null), typeof document > "u")
165
+ Ze(e);
166
+ }, Qe = (n) => {
167
+ if (I = [], Q = 0, k && (clearTimeout(k), k = null), typeof document > "u")
168
168
  return;
169
- _ && document.removeEventListener("visibilitychange", _), R && window.removeEventListener("pagehide", R);
170
- const e = () => $(i, !0);
171
- _ = () => {
169
+ R && document.removeEventListener("visibilitychange", R), B && window.removeEventListener("pagehide", B);
170
+ const e = () => K(n, !0);
171
+ R = () => {
172
172
  document.visibilityState === "hidden" && e();
173
- }, R = e, document.addEventListener("visibilitychange", _), window.addEventListener("pagehide", R);
174
- }, se = () => (/* @__PURE__ */ new Date()).toISOString();
175
- let ne = null, ie = null;
176
- const Qe = (i) => {
177
- typeof window > "u" || (ne = (e) => {
173
+ }, B = e, document.addEventListener("visibilitychange", R), window.addEventListener("pagehide", B);
174
+ }, ne = () => (/* @__PURE__ */ new Date()).toISOString();
175
+ let ie = null, ae = null;
176
+ const et = (n) => {
177
+ typeof window > "u" || (ie = (e) => {
178
178
  const t = e.error instanceof Error ? e.error : new Error(e.message);
179
179
  w({
180
180
  type: "exception",
181
181
  payload: {
182
182
  type: t.name,
183
183
  value: t.message,
184
- timestamp: se(),
185
- stacktrace: t.stack ? { frames: G(t.stack) } : void 0
184
+ timestamp: ne(),
185
+ stacktrace: t.stack ? { frames: Z(t.stack) } : void 0
186
186
  }
187
- }, i);
188
- }, ie = (e) => {
187
+ }, n);
188
+ }, ae = (e) => {
189
189
  const t = e.reason, s = t instanceof Error ? t : new Error(String(t));
190
190
  w({
191
191
  type: "exception",
192
192
  payload: {
193
193
  type: s.name,
194
194
  value: s.message,
195
- timestamp: se(),
196
- stacktrace: s.stack ? { frames: G(s.stack) } : void 0,
195
+ timestamp: ne(),
196
+ stacktrace: s.stack ? { frames: Z(s.stack) } : void 0,
197
197
  context: { source: "unhandledrejection" }
198
198
  }
199
- }, i);
200
- }, window.addEventListener("error", ne), window.addEventListener("unhandledrejection", ie));
201
- }, ae = "odus_telemetry_session_id", K = () => {
202
- const i = new Uint8Array(16);
203
- return crypto.getRandomValues(i), Array.from(i, (e) => e.toString(16).padStart(2, "0")).join("");
204
- }, et = (i) => {
205
- if (i)
206
- return i;
199
+ }, n);
200
+ }, window.addEventListener("error", ie), window.addEventListener("unhandledrejection", ae));
201
+ }, re = "odus_telemetry_session_id", q = () => {
202
+ const n = new Uint8Array(16);
203
+ return crypto.getRandomValues(n), Array.from(n, (e) => e.toString(16).padStart(2, "0")).join("");
204
+ }, tt = (n) => {
205
+ if (n)
206
+ return n;
207
207
  if (typeof sessionStorage > "u")
208
- return K();
208
+ return q();
209
209
  try {
210
- const e = sessionStorage.getItem(ae);
210
+ const e = sessionStorage.getItem(re);
211
211
  if (e)
212
212
  return e;
213
- const t = K();
214
- return sessionStorage.setItem(ae, t), t;
213
+ const t = q();
214
+ return sessionStorage.setItem(re, t), t;
215
215
  } catch {
216
- return K();
216
+ return q();
217
217
  }
218
- }, tt = (i) => {
219
- if (!i.sessionTracking?.enabled)
218
+ }, st = (n) => {
219
+ if (!n.sessionTracking?.enabled)
220
220
  return;
221
- const e = et(i.sessionTracking.session?.id);
222
- ze({ id: e });
223
- }, q = () => (/* @__PURE__ */ new Date()).toISOString(), W = (i, e) => {
224
- if (typeof PerformanceObserver > "u" || !PerformanceObserver.supportedEntryTypes?.includes(i))
221
+ const e = tt(n.sessionTracking.session?.id);
222
+ $e({ id: e });
223
+ }, W = () => (/* @__PURE__ */ new Date()).toISOString(), Y = (n, e) => {
224
+ if (typeof PerformanceObserver > "u" || !PerformanceObserver.supportedEntryTypes?.includes(n))
225
225
  return;
226
226
  new PerformanceObserver((s) => {
227
227
  for (const a of s.getEntries())
228
228
  e(a);
229
- }).observe({ type: i, buffered: !0 });
230
- }, st = (i) => {
229
+ }).observe({ type: n, buffered: !0 });
230
+ }, nt = (n) => {
231
231
  if (typeof window > "u")
232
232
  return;
233
- W("largest-contentful-paint", (t) => {
233
+ Y("largest-contentful-paint", (t) => {
234
234
  w({
235
235
  type: "measurement",
236
236
  payload: {
237
237
  type: "web-vitals",
238
238
  values: { lcp: t.startTime },
239
- timestamp: q()
239
+ timestamp: W()
240
240
  }
241
- }, i);
241
+ }, n);
242
242
  });
243
243
  let e = 0;
244
- W("layout-shift", (t) => {
244
+ Y("layout-shift", (t) => {
245
245
  const s = t;
246
246
  s.hadRecentInput || (e += s.value, w({
247
247
  type: "measurement",
248
248
  payload: {
249
249
  type: "web-vitals",
250
250
  values: { cls: e },
251
- timestamp: q()
251
+ timestamp: W()
252
252
  }
253
- }, i));
254
- }), W("event", (t) => {
253
+ }, n));
254
+ }), Y("event", (t) => {
255
255
  const s = t;
256
256
  s.duration > 0 && w({
257
257
  type: "measurement",
258
258
  payload: {
259
259
  type: "web-vitals",
260
260
  values: { inp: s.duration },
261
- timestamp: q()
261
+ timestamp: W()
262
262
  }
263
- }, i);
263
+ }, n);
264
264
  });
265
- }, O = {
265
+ }, H = {
266
266
  INFO: "info",
267
267
  WARN: "warn",
268
268
  ERROR: "error"
269
- }, B = () => (/* @__PURE__ */ new Date()).toISOString(), nt = (i) => {
270
- Ue(i), Xe(i);
271
- const e = i.instrumentations ?? {
269
+ }, U = () => (/* @__PURE__ */ new Date()).toISOString(), it = (n) => {
270
+ Oe(n), Qe(n);
271
+ const e = n.instrumentations ?? {
272
272
  errors: !0,
273
273
  webVitals: !0,
274
274
  session: !0
275
275
  };
276
- return e.session !== !1 && tt(i), e.errors !== !1 && Qe(i), e.webVitals !== !1 && st(i), {
276
+ return e.session !== !1 && st(n), e.errors !== !1 && et(n), e.webVitals !== !1 && nt(n), {
277
277
  pushError(t, s) {
278
278
  w({
279
279
  type: "exception",
280
280
  payload: {
281
281
  type: t.name,
282
282
  value: t.message,
283
- timestamp: B(),
284
- stacktrace: t.stack ? { frames: G(t.stack) } : void 0,
283
+ timestamp: U(),
284
+ stacktrace: t.stack ? { frames: Z(t.stack) } : void 0,
285
285
  context: s?.context
286
286
  }
287
- }, i);
287
+ }, n);
288
288
  },
289
289
  pushEvent(t, s) {
290
290
  w({
291
291
  type: "event",
292
292
  payload: {
293
293
  name: t,
294
- timestamp: B(),
294
+ timestamp: U(),
295
295
  attributes: s
296
296
  }
297
- }, i);
297
+ }, n);
298
298
  },
299
299
  pushMeasurement(t) {
300
300
  w({
@@ -302,59 +302,59 @@ const Qe = (i) => {
302
302
  payload: {
303
303
  type: t.type,
304
304
  values: t.values,
305
- timestamp: B(),
305
+ timestamp: U(),
306
306
  context: t.context
307
307
  }
308
- }, i);
308
+ }, n);
309
309
  },
310
310
  pushLog(t, s) {
311
311
  w({
312
312
  type: "log",
313
313
  payload: {
314
314
  message: t.join(" "),
315
- level: s?.level ?? O.INFO,
316
- timestamp: B(),
315
+ level: s?.level ?? H.INFO,
316
+ timestamp: U(),
317
317
  context: s?.context
318
318
  }
319
- }, i);
319
+ }, n);
320
320
  },
321
321
  setUser(t) {
322
- Oe(t);
322
+ He(t);
323
323
  },
324
324
  resetUser() {
325
- He();
325
+ ze();
326
326
  },
327
327
  setView(t) {
328
- $e(t);
328
+ Ke(t);
329
329
  },
330
330
  flush() {
331
- $(i);
331
+ K(n);
332
332
  }
333
333
  };
334
- }, it = (i) => i === "test" ? "https://sandbox-analytics.odus.com/collect" : "https://analytics.odus.com/collect", at = () => {
334
+ }, at = (n) => n === "test" ? "https://sandbox-analytics.odus.com/collect" : "https://analytics.odus.com/collect", rt = () => {
335
335
  if (typeof window > "u")
336
336
  return !1;
337
- const i = window.location.hostname;
338
- return i === "localhost" || i === "127.0.0.1" || i === "0.0.0.0" || i === "::1" || i === "[::1]" || i.endsWith(".localhost");
337
+ const n = window.location.hostname;
338
+ return n === "localhost" || n === "127.0.0.1" || n === "0.0.0.0" || n === "::1" || n === "[::1]" || n.endsWith(".localhost");
339
339
  };
340
- let E = null;
341
- const rt = (i) => {
342
- if (E)
343
- return E;
344
- if (at())
340
+ let C = null;
341
+ const ot = (n) => {
342
+ if (C)
343
+ return C;
344
+ if (rt())
345
345
  return null;
346
- const e = it(i.environment);
347
- return E = nt({
346
+ const e = at(n.environment);
347
+ return C = it({
348
348
  url: e,
349
349
  app: {
350
350
  name: "odus-checkout",
351
- environment: i.environment === "test" ? "sandbox" : "production"
351
+ environment: n.environment === "test" ? "sandbox" : "production"
352
352
  },
353
353
  isolate: !0,
354
354
  sessionTracking: {
355
355
  enabled: !0,
356
356
  session: {
357
- id: i.sessionId
357
+ id: n.sessionId
358
358
  }
359
359
  },
360
360
  beforeSend: (t) => {
@@ -368,46 +368,46 @@ const rt = (i) => {
368
368
  "card",
369
369
  "cvv",
370
370
  "pan"
371
- ].forEach((n) => {
372
- s.searchParams.has(n) && s.searchParams.set(n, "[REDACTED]");
371
+ ].forEach((i) => {
372
+ s.searchParams.has(i) && s.searchParams.set(i, "[REDACTED]");
373
373
  }), t.meta.view.name = s.toString();
374
374
  } catch {
375
375
  }
376
376
  return t;
377
377
  }
378
- }), E;
379
- }, ot = (i, e) => {
380
- E && E.pushError(i, { context: e });
381
- }, M = (i, e) => {
382
- E && E.pushEvent(i, e);
383
- }, re = (i, e, t, s) => {
384
- E && E.pushMeasurement({
385
- type: i,
386
- values: { [i]: e },
378
+ }), C;
379
+ }, lt = (n, e) => {
380
+ C && C.pushError(n, { context: e });
381
+ }, M = (n, e) => {
382
+ C && C.pushEvent(n, e);
383
+ }, oe = (n, e, t, s) => {
384
+ C && C.pushMeasurement({
385
+ type: n,
386
+ values: { [n]: e },
387
387
  context: {
388
388
  ...t && { unit: t },
389
389
  ...s
390
390
  }
391
391
  });
392
- }, xt = (i, e = "info", t) => {
393
- if (!E) return;
392
+ }, Tt = (n, e = "info", t) => {
393
+ if (!C) return;
394
394
  const s = {
395
- info: O.INFO,
396
- warn: O.WARN,
397
- error: O.ERROR
395
+ info: H.INFO,
396
+ warn: H.WARN,
397
+ error: H.ERROR
398
398
  };
399
- E.pushLog([i], {
399
+ C.pushLog([n], {
400
400
  level: s[e],
401
401
  context: t
402
402
  });
403
- }, oe = {
403
+ }, le = {
404
404
  test: "tntwpdhfwng",
405
405
  live: "TBD"
406
- }, le = {
406
+ }, de = {
407
407
  test: "sandbox",
408
408
  live: "live"
409
409
  };
410
- class T {
410
+ class L {
411
411
  vgsForm = null;
412
412
  fields = [];
413
413
  readyResolve;
@@ -419,18 +419,18 @@ class T {
419
419
  });
420
420
  }
421
421
  async init(e) {
422
- return this.environment = e, await ge({
423
- vaultId: oe[e],
424
- environment: le[e],
425
- version: "3.2.2"
422
+ return this.environment = e, await fe({
423
+ vaultId: le[e],
424
+ environment: de[e],
425
+ version: "3.3.0"
426
426
  });
427
427
  }
428
428
  createForm(e, t) {
429
429
  if (!this.environment)
430
430
  throw new Error("VGS not initialized — call init() first");
431
431
  return this.vgsForm = e.create(
432
- oe[this.environment],
433
432
  le[this.environment],
433
+ de[this.environment],
434
434
  t
435
435
  ), this.readyResolve?.(), this.vgsForm;
436
436
  }
@@ -441,7 +441,7 @@ class T {
441
441
  if (!this.vgsForm)
442
442
  throw new Error("VGS form not initialized");
443
443
  if (e.cardNumber) {
444
- const n = this.vgsForm.cardNumberField(e.cardNumber, {
444
+ const i = this.vgsForm.cardNumberField(e.cardNumber, {
445
445
  placeholder: s.cardNumber,
446
446
  autoComplete: "cc-number",
447
447
  validations: ["required", "validCardNumber"],
@@ -479,44 +479,50 @@ class T {
479
479
  luhn: !0
480
480
  }
481
481
  ],
482
- css: t
482
+ css: t.cardNumber
483
483
  });
484
- n.on("update", (r) => {
485
- a && a(T.mapCardType(r.cardType));
486
- }), this.fields.push(n);
484
+ i.on("update", (r) => {
485
+ a && a(L.mapCardType(r.cardType));
486
+ }), this.fields.push(i);
487
487
  }
488
488
  if (e.cardExpiry) {
489
- const n = this.vgsForm.cardExpirationDateField(
489
+ const i = this.vgsForm.cardExpirationDateField(
490
490
  e.cardExpiry,
491
491
  {
492
492
  placeholder: s.cardExpiry,
493
493
  autoComplete: "cc-exp",
494
494
  validations: ["required", "validCardExpirationDate"],
495
- css: t
495
+ serializers: [
496
+ {
497
+ name: "separate",
498
+ options: { monthName: "month", yearName: "year" }
499
+ }
500
+ ],
501
+ css: t.cardExpiry
496
502
  }
497
503
  );
498
- this.fields.push(n);
504
+ this.fields.push(i);
499
505
  }
500
506
  if (e.cardCvv) {
501
- const n = this.vgsForm.cardCVCField(e.cardCvv, {
507
+ const i = this.vgsForm.cardCVCField(e.cardCvv, {
502
508
  placeholder: s.cardCvv,
503
509
  autoComplete: "cc-csc",
504
510
  validations: ["required", "validCardSecurityCode"],
505
- css: t
511
+ css: t.cardCvv
506
512
  });
507
- this.fields.push(n);
513
+ this.fields.push(i);
508
514
  }
509
515
  if (e.cardholderName) {
510
- const n = this.vgsForm.cardholderNameField(
516
+ const i = this.vgsForm.cardholderNameField(
511
517
  e.cardholderName,
512
518
  {
513
519
  placeholder: s.cardholderName,
514
520
  autoComplete: "cc-name",
515
521
  validations: ["required"],
516
- css: t
522
+ css: t.cardholderName
517
523
  }
518
524
  );
519
- this.fields.push(n);
525
+ this.fields.push(i);
520
526
  }
521
527
  }
522
528
  waitForFieldsReady() {
@@ -529,7 +535,7 @@ class T {
529
535
  return new Promise((s, a) => {
530
536
  t.createCard(
531
537
  { auth: e },
532
- (n, r) => {
538
+ (i, r) => {
533
539
  if (r?.errors) {
534
540
  a(r.errors);
535
541
  return;
@@ -539,14 +545,14 @@ class T {
539
545
  a(new Error("Card creation failed: no card ID returned"));
540
546
  return;
541
547
  }
542
- if (n === 303) {
548
+ if (i === 303) {
543
549
  this.patchCard(e, o.id).then(s).catch(a);
544
550
  return;
545
551
  }
546
- s(T.extractCardResult(o));
552
+ s(L.extractCardResult(o));
547
553
  },
548
- (n) => {
549
- a(n);
554
+ (i) => {
555
+ a(i);
550
556
  }
551
557
  );
552
558
  });
@@ -555,7 +561,7 @@ class T {
555
561
  if (!this.vgsForm || !this.environment)
556
562
  return Promise.reject(new Error("VGS not initialized"));
557
563
  const s = this.vgsForm;
558
- return new Promise((a, n) => {
564
+ return new Promise((a, i) => {
559
565
  s.submit(
560
566
  `/cards/${t}`,
561
567
  {
@@ -578,22 +584,22 @@ class T {
578
584
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
579
585
  (r, o) => {
580
586
  if (r >= 400 || o?.errors) {
581
- n(o?.errors ?? new Error("Card update failed"));
587
+ i(o?.errors ?? new Error("Card update failed"));
582
588
  return;
583
589
  }
584
590
  const d = o?.data;
585
591
  if (!d?.id) {
586
- n(new Error("Card update failed: no card ID returned"));
592
+ i(new Error("Card update failed: no card ID returned"));
587
593
  return;
588
594
  }
589
- const c = T.extractCardResult(d), m = o.included?.find(
595
+ const c = L.extractCardResult(d), m = o.included?.find(
590
596
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
591
- (b) => b.type === "card_updates"
597
+ (S) => S.type === "card_updates"
592
598
  );
593
599
  m?.attributes?.updated_values?.length && (c.updatedValues = m.attributes.updated_values), a(c);
594
600
  },
595
601
  (r) => {
596
- n(r);
602
+ i(r);
597
603
  }
598
604
  );
599
605
  });
@@ -627,11 +633,11 @@ class T {
627
633
  }[e] ?? "unknown" : "unknown";
628
634
  }
629
635
  }
630
- function Y(i) {
636
+ function G(n) {
631
637
  return {
632
638
  name: "Custom Appearance",
633
- additionalPaymentMethods: i.additionalPaymentMethods || {},
634
- styles: i.styles || {
639
+ additionalPaymentMethods: n.additionalPaymentMethods || {},
640
+ styles: n.styles || {
635
641
  fontSize: 14,
636
642
  textColor: "#000000",
637
643
  buttonColor: "#0070f3",
@@ -641,102 +647,104 @@ function Y(i) {
641
647
  buttonFontSize: 16
642
648
  },
643
649
  layout: {
644
- grouped: i.layout?.grouped,
645
- actionButton: i.layout?.actionButton || {
650
+ grouped: n.layout?.grouped,
651
+ actionButton: n.layout?.actionButton || {
646
652
  translationKey: null
647
653
  },
648
- phoneNumber: i.layout?.phoneNumber ? {
649
- enabled: i.layout.phoneNumber.enabled,
650
- label: i.layout.phoneNumber.label,
651
- defaultCountry: i.layout.phoneNumber.defaultCountry,
652
- allowedCountries: i.layout.phoneNumber.allowedCountries
654
+ phoneNumber: n.layout?.phoneNumber ? {
655
+ enabled: n.layout.phoneNumber.enabled,
656
+ label: n.layout.phoneNumber.label,
657
+ defaultCountry: n.layout.phoneNumber.defaultCountry,
658
+ allowedCountries: n.layout.phoneNumber.allowedCountries
653
659
  } : void 0,
654
660
  billingFields: {
655
661
  street: {
656
- enabled: i.layout?.billingFields?.street?.enabled ?? !1,
657
- label: i.layout?.billingFields?.street?.label
662
+ enabled: n.layout?.billingFields?.street?.enabled ?? !1,
663
+ label: n.layout?.billingFields?.street?.label,
664
+ maxLength: n.layout?.billingFields?.street?.maxLength
658
665
  },
659
666
  city: {
660
- enabled: i.layout?.billingFields?.city?.enabled ?? !1,
661
- label: i.layout?.billingFields?.city?.label
667
+ enabled: n.layout?.billingFields?.city?.enabled ?? !1,
668
+ label: n.layout?.billingFields?.city?.label
662
669
  },
663
670
  state: {
664
- enabled: i.layout?.billingFields?.state?.enabled ?? !1,
665
- label: i.layout?.billingFields?.state?.label,
666
- hiddenForCountries: i.layout?.billingFields?.state?.hiddenForCountries
671
+ enabled: n.layout?.billingFields?.state?.enabled ?? !1,
672
+ label: n.layout?.billingFields?.state?.label,
673
+ hiddenForCountries: n.layout?.billingFields?.state?.hiddenForCountries
667
674
  },
668
675
  zipCode: {
669
- enabled: i.layout?.billingFields?.zipCode?.enabled ?? !1,
670
- label: i.layout?.billingFields?.zipCode?.label
676
+ enabled: n.layout?.billingFields?.zipCode?.enabled ?? !1,
677
+ label: n.layout?.billingFields?.zipCode?.label
671
678
  },
672
679
  firstName: {
673
- enabled: i.layout?.billingFields?.firstName?.enabled ?? !1,
674
- label: i.layout?.billingFields?.firstName?.label
680
+ enabled: n.layout?.billingFields?.firstName?.enabled ?? !1,
681
+ label: n.layout?.billingFields?.firstName?.label
675
682
  },
676
683
  lastName: {
677
- enabled: i.layout?.billingFields?.lastName?.enabled ?? !1,
678
- label: i.layout?.billingFields?.lastName?.label
684
+ enabled: n.layout?.billingFields?.lastName?.enabled ?? !1,
685
+ label: n.layout?.billingFields?.lastName?.label
679
686
  },
680
687
  country: {
681
- enabled: i.layout?.billingFields?.country?.enabled ?? !1,
682
- label: i.layout?.billingFields?.country?.label,
683
- options: i.layout?.billingFields?.country?.options
688
+ enabled: n.layout?.billingFields?.country?.enabled ?? !1,
689
+ label: n.layout?.billingFields?.country?.label,
690
+ options: n.layout?.billingFields?.country?.options
684
691
  }
685
692
  },
686
- shippingFields: i.layout?.shippingFields ? {
693
+ shippingFields: n.layout?.shippingFields ? {
687
694
  street: {
688
- enabled: i.layout.shippingFields.street?.enabled ?? !1,
689
- label: i.layout.shippingFields.street?.label
695
+ enabled: n.layout.shippingFields.street?.enabled ?? !1,
696
+ label: n.layout.shippingFields.street?.label,
697
+ maxLength: n.layout.shippingFields.street?.maxLength
690
698
  },
691
699
  firstName: {
692
- enabled: i.layout.shippingFields.firstName?.enabled ?? !1,
693
- label: i.layout.shippingFields.firstName?.label
700
+ enabled: n.layout.shippingFields.firstName?.enabled ?? !1,
701
+ label: n.layout.shippingFields.firstName?.label
694
702
  },
695
703
  lastName: {
696
- enabled: i.layout.shippingFields.lastName?.enabled ?? !1,
697
- label: i.layout.shippingFields.lastName?.label
704
+ enabled: n.layout.shippingFields.lastName?.enabled ?? !1,
705
+ label: n.layout.shippingFields.lastName?.label
698
706
  },
699
707
  city: {
700
- enabled: i.layout.shippingFields.city?.enabled ?? !1,
701
- label: i.layout.shippingFields.city?.label
708
+ enabled: n.layout.shippingFields.city?.enabled ?? !1,
709
+ label: n.layout.shippingFields.city?.label
702
710
  },
703
711
  state: {
704
- enabled: i.layout.shippingFields.state?.enabled ?? !1,
705
- label: i.layout.shippingFields.state?.label,
706
- hiddenForCountries: i.layout.shippingFields.state?.hiddenForCountries
712
+ enabled: n.layout.shippingFields.state?.enabled ?? !1,
713
+ label: n.layout.shippingFields.state?.label,
714
+ hiddenForCountries: n.layout.shippingFields.state?.hiddenForCountries
707
715
  },
708
716
  zipCode: {
709
- enabled: i.layout.shippingFields.zipCode?.enabled ?? !1,
710
- label: i.layout.shippingFields.zipCode?.label
717
+ enabled: n.layout.shippingFields.zipCode?.enabled ?? !1,
718
+ label: n.layout.shippingFields.zipCode?.label
711
719
  },
712
720
  country: {
713
- enabled: i.layout.shippingFields.country?.enabled ?? !1,
714
- label: i.layout.shippingFields.country?.label,
715
- options: i.layout.shippingFields.country?.options
721
+ enabled: n.layout.shippingFields.country?.enabled ?? !1,
722
+ label: n.layout.shippingFields.country?.label,
723
+ options: n.layout.shippingFields.country?.options
716
724
  }
717
725
  } : void 0
718
726
  },
719
727
  appearance: {
720
- additionalPaymentMethods: i.additionalPaymentMethods ? {
721
- applePay: i.additionalPaymentMethods.applePay ? {
722
- displayName: i.additionalPaymentMethods.applePay.displayName,
723
- requiredBillingContactFields: i.additionalPaymentMethods.applePay.requiredBillingContactFields,
724
- requiredShippingContactFields: i.additionalPaymentMethods.applePay.requiredShippingContactFields
728
+ additionalPaymentMethods: n.additionalPaymentMethods ? {
729
+ applePay: n.additionalPaymentMethods.applePay ? {
730
+ displayName: n.additionalPaymentMethods.applePay.displayName,
731
+ requiredBillingContactFields: n.additionalPaymentMethods.applePay.requiredBillingContactFields,
732
+ requiredShippingContactFields: n.additionalPaymentMethods.applePay.requiredShippingContactFields
725
733
  } : void 0
726
734
  } : void 0
727
735
  }
728
736
  };
729
737
  }
730
- function lt({
731
- appearance: i
738
+ function dt({
739
+ appearance: n
732
740
  }) {
733
- const e = ue({
741
+ const e = me({
734
742
  checkoutProfile: void 0,
735
743
  isLoading: !0,
736
744
  error: null
737
745
  });
738
- if (i) {
739
- const s = Y(i);
746
+ if (n) {
747
+ const s = G(n);
740
748
  return Promise.resolve().then(() => {
741
749
  e.setState({
742
750
  checkoutProfile: s,
@@ -747,9 +755,9 @@ function lt({
747
755
  getState: e.getState.bind(e),
748
756
  subscribe: e.subscribe.bind(e),
749
757
  updateProfile: (a) => {
750
- const n = Y(a);
758
+ const i = G(a);
751
759
  e.setState({
752
- checkoutProfile: n,
760
+ checkoutProfile: i,
753
761
  isLoading: !1,
754
762
  error: null
755
763
  });
@@ -796,7 +804,7 @@ function lt({
796
804
  getState: e.getState.bind(e),
797
805
  subscribe: e.subscribe.bind(e),
798
806
  updateProfile: (s) => {
799
- const a = Y(s);
807
+ const a = G(s);
800
808
  e.setState({
801
809
  checkoutProfile: a,
802
810
  isLoading: !1,
@@ -807,8 +815,8 @@ function lt({
807
815
  }
808
816
  };
809
817
  }
810
- const dt = () => {
811
- const i = fe(), e = ue({
818
+ const ct = () => {
819
+ const n = ye(), e = me({
812
820
  formData: {
813
821
  name: "",
814
822
  email: "",
@@ -825,159 +833,159 @@ const dt = () => {
825
833
  cardCvv: !1
826
834
  },
827
835
  isValid: !1
828
- }), t = (l, u, y, p) => {
836
+ }), t = (l, p, y, u) => {
829
837
  if (l === "cardCvv")
830
- return i.cardCvv(u, y);
831
- if (l === "phoneNumber" && p)
832
- return i.phoneNumber(u, p);
833
- const g = i[l];
834
- return g?.(u);
838
+ return n.cardCvv(p, y);
839
+ if (l === "phoneNumber" && u)
840
+ return n.phoneNumber(p, u);
841
+ const g = n[l];
842
+ return g?.(p);
835
843
  }, s = (l) => {
836
- const u = {};
837
- return Object.keys(l).forEach((p) => {
838
- const g = l[p];
844
+ const p = {};
845
+ return Object.keys(l).forEach((u) => {
846
+ const g = l[u];
839
847
  if (g === void 0) return;
840
848
  let h;
841
- p === "cardCvv" ? h = t(p, g, l.cardNumber) : p === "phoneNumber" ? h = t(
842
- p,
849
+ u === "cardCvv" ? h = t(u, g, l.cardNumber) : u === "phoneNumber" ? h = t(
850
+ u,
843
851
  g,
844
852
  void 0,
845
853
  l.phoneCountryCode
846
- ) : h = t(p, g), h && (u[p] = h);
854
+ ) : h = t(u, g), h && (p[u] = h);
847
855
  }), [
848
856
  "billingAddress",
849
857
  "shippingAddress"
850
- ].forEach((p) => {
851
- const g = l[p];
858
+ ].forEach((u) => {
859
+ const g = l[u];
852
860
  if (g && typeof g == "object") {
853
861
  const h = {};
854
862
  Object.keys(g).forEach(
855
- (v) => {
856
- const f = g[v];
863
+ (b) => {
864
+ const f = g[b];
857
865
  if (f === void 0) return;
858
- const S = i[v];
859
- if (S) {
860
- const C = v === "state" ? i.state(f, g.country) : S(
866
+ const v = n[b];
867
+ if (v) {
868
+ const E = b === "state" ? n.state(f, g.country) : v(
861
869
  f
862
870
  );
863
- C && (h[v] = C);
871
+ E && (h[b] = E);
864
872
  }
865
873
  }
866
- ), Object.keys(h).length > 0 && (u[p] = h);
874
+ ), Object.keys(h).length > 0 && (p[u] = h);
867
875
  }
868
- }), u;
876
+ }), p;
869
877
  }, a = (l) => {
870
- const u = s(l);
871
- return Object.keys(u).length === 0;
872
- }, n = "billingAddress.", r = "shippingAddress.", o = (l) => l.startsWith(n) ? {
878
+ const p = s(l);
879
+ return Object.keys(p).length === 0;
880
+ }, i = "billingAddress.", r = "shippingAddress.", o = (l) => l.startsWith(i) ? {
873
881
  parent: "billingAddress",
874
- field: l.slice(n.length)
882
+ field: l.slice(i.length)
875
883
  } : l.startsWith(r) ? {
876
884
  parent: "shippingAddress",
877
885
  field: l.slice(r.length)
878
- } : null, d = (l, u, y, p) => {
886
+ } : null, d = (l, p, y, u) => {
879
887
  const g = { ...l };
880
- if (p)
881
- g[u] = {
882
- ...g[u],
883
- [y]: p
888
+ if (u)
889
+ g[p] = {
890
+ ...g[p],
891
+ [y]: u
884
892
  };
885
893
  else {
886
894
  const h = {
887
- ...g[u]
895
+ ...g[p]
888
896
  };
889
- delete h[y], Object.keys(h).length === 0 ? delete g[u] : g[u] = h;
897
+ delete h[y], Object.keys(h).length === 0 ? delete g[p] : g[p] = h;
890
898
  }
891
899
  return g;
892
- }, c = (l, u) => {
900
+ }, c = (l, p) => {
893
901
  const y = e.getState();
894
- let p = u;
902
+ let u = p;
895
903
  const g = o(l);
896
904
  if (!g && l in j)
897
905
  if (l === "cardCvv") {
898
- const S = ye(y.formData.cardNumber) === "amex" ? 4 : 3;
899
- p = j.cardCvv(u, S);
906
+ const v = be(y.formData.cardNumber) === "amex" ? 4 : 3;
907
+ u = j.cardCvv(p, v);
900
908
  } else
901
- p = j[l](u);
909
+ u = j[l](p);
902
910
  let h;
903
911
  if (g) {
904
- const { parent: f, field: S } = g;
912
+ const { parent: f, field: v } = g;
905
913
  h = {
906
914
  ...y.formData,
907
915
  [f]: {
908
916
  ...y.formData[f] ?? {},
909
- [S]: p
917
+ [v]: u
910
918
  }
911
919
  };
912
920
  } else
913
921
  h = {
914
922
  ...y.formData,
915
- [l]: p
923
+ [l]: u
916
924
  };
917
- let v = { ...y.errors };
925
+ let b = { ...y.errors };
918
926
  if (l === "phoneCountryCode" && h.phoneNumber) {
919
927
  const f = t(
920
928
  "phoneNumber",
921
929
  h.phoneNumber,
922
930
  void 0,
923
- p
931
+ u
924
932
  );
925
- f ? v.phoneNumber = f : delete v.phoneNumber;
933
+ f ? b.phoneNumber = f : delete b.phoneNumber;
926
934
  }
927
935
  if (y.touched[l])
928
936
  if (g) {
929
- const { parent: f, field: S } = g, C = h[f];
937
+ const { parent: f, field: v } = g, E = h[f];
930
938
  let N;
931
- if (S === "state")
932
- N = i.state(p, C?.country);
939
+ if (v === "state")
940
+ N = n.state(u, E?.country);
933
941
  else {
934
- const A = i[S];
935
- N = A ? A(
936
- p
942
+ const x = n[v];
943
+ N = x ? x(
944
+ u
937
945
  ) : void 0;
938
946
  }
939
- v = d(v, f, S, N);
947
+ b = d(b, f, v, N);
940
948
  } else {
941
949
  let f;
942
- l === "cardCvv" ? f = t(l, p, h.cardNumber) : l === "phoneNumber" ? f = t(
950
+ l === "cardCvv" ? f = t(l, u, h.cardNumber) : l === "phoneNumber" ? f = t(
943
951
  l,
944
- p,
952
+ u,
945
953
  void 0,
946
954
  h.phoneCountryCode
947
- ) : f = t(l, p), f ? v[l] = f : delete v[l];
955
+ ) : f = t(l, u), f ? b[l] = f : delete b[l];
948
956
  }
949
957
  e.setState({
950
958
  formData: h,
951
- errors: v,
959
+ errors: b,
952
960
  isValid: a(h)
953
961
  });
954
- }, m = (l, u) => {
955
- const y = e.getState(), p = o(l);
956
- if (p) {
957
- const { parent: f, field: S } = p, C = {
962
+ }, m = (l, p) => {
963
+ const y = e.getState(), u = o(l);
964
+ if (u) {
965
+ const { parent: f, field: v } = u, E = {
958
966
  ...y.formData,
959
967
  [f]: {
960
968
  ...y.formData[f] ?? {},
961
- [S]: u
969
+ [v]: p
962
970
  }
963
971
  };
964
972
  let N;
965
- if (S === "state") {
966
- const L = C[f];
967
- N = i.state(u, L?.country);
973
+ if (v === "state") {
974
+ const V = E[f];
975
+ N = n.state(p, V?.country);
968
976
  } else {
969
- const L = i[S];
970
- N = L ? L(u) : void 0;
977
+ const V = n[v];
978
+ N = V ? V(p) : void 0;
971
979
  }
972
- const A = d(y.errors, f, S, N);
980
+ const x = d(y.errors, f, v, N);
973
981
  e.setState({
974
- formData: C,
982
+ formData: E,
975
983
  touched: {
976
984
  ...y.touched,
977
985
  [l]: !0
978
986
  },
979
- errors: A,
980
- isValid: a(C)
987
+ errors: x,
988
+ isValid: a(E)
981
989
  });
982
990
  return;
983
991
  }
@@ -986,18 +994,18 @@ const dt = () => {
986
994
  [l]: !0
987
995
  };
988
996
  let h;
989
- l === "cardCvv" ? h = t(l, u, y.formData.cardNumber) : l === "phoneNumber" ? h = t(
997
+ l === "cardCvv" ? h = t(l, p, y.formData.cardNumber) : l === "phoneNumber" ? h = t(
990
998
  l,
991
- u,
999
+ p,
992
1000
  void 0,
993
1001
  y.formData.phoneCountryCode
994
- ) : h = t(l, u);
995
- const v = { ...y.errors };
996
- h ? v[l] = h : delete v[l], e.setState({
1002
+ ) : h = t(l, p);
1003
+ const b = { ...y.errors };
1004
+ h ? b[l] = h : delete b[l], e.setState({
997
1005
  touched: g,
998
- errors: v
1006
+ errors: b
999
1007
  });
1000
- }, b = (l) => {
1008
+ }, S = (l) => {
1001
1009
  const y = {
1002
1010
  ...e.getState().formData,
1003
1011
  ...l
@@ -1012,36 +1020,36 @@ const dt = () => {
1012
1020
  subscribe: e.subscribe.bind(e),
1013
1021
  handleChange: c,
1014
1022
  handleBlur: m,
1015
- setFormData: b,
1023
+ setFormData: S,
1016
1024
  reset: e.resetState.bind(e)
1017
1025
  };
1018
- }, ct = "https://fonts.googleapis.com/css2", ht = /src:\s*url\(([^)]+\.woff2[^)]*)\)/, ut = /\/\*\s*latin\s*\*\/\s*@font-face\s*\{[^}]*src:\s*url\(([^)]+\.woff2[^)]*)\)[^}]*\}/;
1019
- async function mt(i) {
1020
- if (!i) return null;
1021
- const e = i.trim().replace(/\s+/g, "+"), t = `${ct}?family=${e}:wght@400;700&display=swap`;
1026
+ }, ht = "https://fonts.googleapis.com/css2", ut = /src:\s*url\(([^)]+\.woff2[^)]*)\)/, mt = /\/\*\s*latin\s*\*\/\s*@font-face\s*\{[^}]*src:\s*url\(([^)]+\.woff2[^)]*)\)[^}]*\}/;
1027
+ async function pt(n) {
1028
+ if (!n) return null;
1029
+ const e = n.trim().replace(/\s+/g, "+"), t = `${ht}?family=${e}:wght@400;700&display=swap`;
1022
1030
  try {
1023
1031
  const s = await fetch(t);
1024
1032
  if (!s.ok) return null;
1025
- const a = await s.text(), n = ut.exec(a);
1026
- if (n?.[1]) return n[1];
1027
- const r = ht.exec(a);
1033
+ const a = await s.text(), i = mt.exec(a);
1034
+ if (i?.[1]) return i[1];
1035
+ const r = ut.exec(a);
1028
1036
  return r?.[1] ? r[1] : null;
1029
1037
  } catch {
1030
1038
  return null;
1031
1039
  }
1032
1040
  }
1033
- function pt(i) {
1034
- if (!i) return !1;
1035
- const { billingFields: e, shippingFields: t } = i, s = e && Object.values(e).some((n) => n?.enabled), a = t && Object.values(t).some((n) => n?.enabled);
1041
+ function gt(n) {
1042
+ if (!n) return !1;
1043
+ const { billingFields: e, shippingFields: t } = n, s = e && Object.values(e).some((i) => i?.enabled), a = t && Object.values(t).some((i) => i?.enabled);
1036
1044
  return !!(s || a);
1037
1045
  }
1038
- function Z(i) {
1039
- if (!i) return !1;
1040
- const { billingFields: e, shippingFields: t } = i, s = e?.firstName?.enabled && e?.lastName?.enabled, a = t?.firstName?.enabled && t?.lastName?.enabled;
1046
+ function J(n) {
1047
+ if (!n) return !1;
1048
+ const { billingFields: e, shippingFields: t } = n, s = e?.firstName?.enabled && e?.lastName?.enabled, a = t?.firstName?.enabled && t?.lastName?.enabled;
1041
1049
  return !!(s || a);
1042
1050
  }
1043
- const U = /* @__PURE__ */ new Set(["US", "CA"]);
1044
- class de extends k {
1051
+ const O = /* @__PURE__ */ new Set(["US", "CA"]);
1052
+ class ce extends A {
1045
1053
  inputs = /* @__PURE__ */ new Map();
1046
1054
  type;
1047
1055
  onChange;
@@ -1056,25 +1064,25 @@ class de extends k {
1056
1064
  stateStyles;
1057
1065
  constructor(e) {
1058
1066
  super("div", ["address-section"]), this.type = e.type, this.onChange = e.onChange, this.onBlur = e.onBlur, this.translationFunc = e.translationFunc, this.locale = e.locale, this.grouped = e.grouped ?? !0;
1059
- const { title: t, checkoutProfile: s, fieldsConfig: a, values: n, errors: r, touched: o } = e;
1067
+ const { title: t, checkoutProfile: s, fieldsConfig: a, values: i, errors: r, touched: o } = e;
1060
1068
  if (this.grouped) {
1061
1069
  const d = document.createElement("h3");
1062
1070
  d.className = "address-section-title", d.textContent = t, d.style.color = s.styles.textColor, d.style.fontFamily = `"${s.styles.fontFamily}", sans-serif`, d.style.fontSize = `${s.styles.fontSize}px`, d.style.fontWeight = "normal", this.getElement().appendChild(d);
1063
1071
  }
1064
- this.fieldsContainer = document.createElement("div"), this.fieldsContainer.className = "address-fields", this.grouped || this.fieldsContainer.classList.add("address-fields--ungrouped"), this.getElement().appendChild(this.fieldsContainer), this.createFields(s, a, n, r, o);
1072
+ this.fieldsContainer = document.createElement("div"), this.fieldsContainer.className = "address-fields", this.grouped || this.fieldsContainer.classList.add("address-fields--ungrouped"), this.getElement().appendChild(this.fieldsContainer), this.createFields(s, a, i, r, o);
1065
1073
  }
1066
- borderRadius(e, t, s, a, n) {
1074
+ borderRadius(e, t, s, a, i) {
1067
1075
  const r = (o) => o ? `${e}px` : "0px";
1068
- return `${r(t)} ${r(s)} ${r(a)} ${r(n)}`;
1076
+ return `${r(t)} ${r(s)} ${r(a)} ${r(i)}`;
1069
1077
  }
1070
- createFields(e, t, s, a, n) {
1078
+ createFields(e, t, s, a, i) {
1071
1079
  if (!this.grouped) {
1072
1080
  this.createUngroupedFields(
1073
1081
  e,
1074
1082
  t,
1075
1083
  s,
1076
1084
  a,
1077
- n
1085
+ i
1078
1086
  );
1079
1087
  return;
1080
1088
  }
@@ -1088,97 +1096,98 @@ class de extends k {
1088
1096
  t.firstName?.enabled && c.push("firstName"), t.lastName?.enabled && c.push("lastName"), c.length > 0 && d.push({ kind: "name", fields: c }), t.country?.enabled && d.push({ kind: "country" });
1089
1097
  const m = [];
1090
1098
  t.city?.enabled && m.push("city"), t.zipCode?.enabled && m.push("zipCode"), m.length > 0 && d.push({ kind: "cityZip", fields: m }), t.state?.enabled && d.push({ kind: "state" });
1091
- const b = d.length;
1092
- d.forEach((l, u) => {
1093
- const y = u === 0, p = u === b - 1, g = (h, v) => ({
1099
+ const S = d.length;
1100
+ d.forEach((l, p) => {
1101
+ const y = p === 0, u = p === S - 1, g = (h, b) => ({
1094
1102
  ...o,
1095
1103
  borderRadius: this.borderRadius(
1096
1104
  r,
1097
1105
  y && h,
1098
- y && v,
1099
- p && v,
1100
- p && h
1106
+ y && b,
1107
+ u && b,
1108
+ u && h
1101
1109
  )
1102
1110
  });
1103
1111
  if (l.kind === "street") {
1104
- const h = this.createRow(["full"]), v = this.createInput(
1112
+ const h = this.createRow(["full"]), b = this.createInput(
1105
1113
  "street",
1106
1114
  t.street?.label ?? this.translationFunc("address.addressLine1"),
1107
1115
  s.street,
1108
1116
  a.street,
1109
- n.street,
1117
+ i.street,
1110
1118
  g(!0, !0),
1111
- "street-address"
1119
+ "street-address",
1120
+ t.street?.maxLength
1112
1121
  );
1113
- this.inputs.set("street", v), h.appendChild(v.getElement()), this.fieldsContainer.appendChild(h);
1122
+ this.inputs.set("street", b), h.appendChild(b.getElement()), this.fieldsContainer.appendChild(h);
1114
1123
  return;
1115
1124
  }
1116
1125
  if (l.kind === "name") {
1117
- const h = this.createRow(l.fields.map(() => "half")), v = l.fields.length === 1;
1126
+ const h = this.createRow(l.fields.map(() => "half")), b = l.fields.length === 1;
1118
1127
  if (l.fields.includes("firstName")) {
1119
- const f = v || l.fields[l.fields.length - 1] === "firstName", S = this.createInput(
1128
+ const f = b || l.fields[l.fields.length - 1] === "firstName", v = this.createInput(
1120
1129
  "firstName",
1121
1130
  t.firstName?.label ?? this.translationFunc("address.firstName"),
1122
1131
  s.firstName,
1123
1132
  a.firstName,
1124
- n.firstName,
1133
+ i.firstName,
1125
1134
  g(!0, f),
1126
1135
  "given-name"
1127
1136
  );
1128
- this.inputs.set("firstName", S), h.appendChild(S.getElement());
1137
+ this.inputs.set("firstName", v), h.appendChild(v.getElement());
1129
1138
  }
1130
1139
  if (l.fields.includes("lastName")) {
1131
- const f = v || l.fields[0] === "lastName", S = this.createInput(
1140
+ const f = b || l.fields[0] === "lastName", v = this.createInput(
1132
1141
  "lastName",
1133
1142
  t.lastName?.label ?? this.translationFunc("address.lastName"),
1134
1143
  s.lastName,
1135
1144
  a.lastName,
1136
- n.lastName,
1145
+ i.lastName,
1137
1146
  g(f, !0),
1138
1147
  "family-name"
1139
1148
  );
1140
- this.inputs.set("lastName", S), h.appendChild(S.getElement());
1149
+ this.inputs.set("lastName", v), h.appendChild(v.getElement());
1141
1150
  }
1142
1151
  this.fieldsContainer.appendChild(h);
1143
1152
  return;
1144
1153
  }
1145
1154
  if (l.kind === "country") {
1146
- const h = this.createRow(["full"]), v = this.createCountrySelect(
1155
+ const h = this.createRow(["full"]), b = this.createCountrySelect(
1147
1156
  s.country,
1148
1157
  a.country,
1149
- n.country,
1158
+ i.country,
1150
1159
  g(!0, !0),
1151
1160
  t.country?.options,
1152
1161
  t.country?.label
1153
1162
  );
1154
- this.inputs.set("country", v), h.appendChild(v.getElement()), this.fieldsContainer.appendChild(h);
1163
+ this.inputs.set("country", b), h.appendChild(b.getElement()), this.fieldsContainer.appendChild(h);
1155
1164
  return;
1156
1165
  }
1157
1166
  if (l.kind === "cityZip") {
1158
- const h = this.createRow(l.fields.map(() => "half")), v = l.fields.length === 1;
1167
+ const h = this.createRow(l.fields.map(() => "half")), b = l.fields.length === 1;
1159
1168
  if (l.fields.includes("city")) {
1160
- const f = v || l.fields[l.fields.length - 1] === "city", S = this.createInput(
1169
+ const f = b || l.fields[l.fields.length - 1] === "city", v = this.createInput(
1161
1170
  "city",
1162
1171
  t.city?.label ?? this.translationFunc("address.townCity"),
1163
1172
  s.city,
1164
1173
  a.city,
1165
- n.city,
1174
+ i.city,
1166
1175
  g(!0, f),
1167
1176
  "address-level2"
1168
1177
  );
1169
- this.inputs.set("city", S), h.appendChild(S.getElement());
1178
+ this.inputs.set("city", v), h.appendChild(v.getElement());
1170
1179
  }
1171
1180
  if (l.fields.includes("zipCode")) {
1172
- const f = v || l.fields[0] === "zipCode", S = this.createInput(
1181
+ const f = b || l.fields[0] === "zipCode", v = this.createInput(
1173
1182
  "zipCode",
1174
1183
  t.zipCode?.label ?? this.translationFunc("address.postalCode"),
1175
1184
  s.zipCode,
1176
1185
  a.zipCode,
1177
- n.zipCode,
1186
+ i.zipCode,
1178
1187
  g(f, !0),
1179
1188
  "postal-code"
1180
1189
  );
1181
- this.inputs.set("zipCode", S), h.appendChild(S.getElement());
1190
+ this.inputs.set("zipCode", v), h.appendChild(v.getElement());
1182
1191
  }
1183
1192
  this.fieldsContainer.appendChild(h);
1184
1193
  return;
@@ -1187,27 +1196,27 @@ class de extends k {
1187
1196
  const h = this.createRow(["full"]);
1188
1197
  if (this.stateFieldConfig = t.state, this.stateRow = h, this.stateStyles = g(!0, !0), this.currentCountry = s.country, t.state?.hiddenForCountries?.includes(
1189
1198
  s.country
1190
- ) && (h.style.display = "none"), U.has(s.country)) {
1191
- const S = this.createStateSelect(
1199
+ ) && (h.style.display = "none"), O.has(s.country)) {
1200
+ const v = this.createStateSelect(
1192
1201
  s.state,
1193
1202
  a.state,
1194
- n.state,
1203
+ i.state,
1195
1204
  this.stateStyles,
1196
1205
  s.country,
1197
1206
  t.state?.label
1198
1207
  );
1199
- this.inputs.set("state", S), h.appendChild(S.getElement());
1208
+ this.inputs.set("state", v), h.appendChild(v.getElement());
1200
1209
  } else {
1201
- const S = this.createInput(
1210
+ const v = this.createInput(
1202
1211
  "state",
1203
1212
  t.state?.label ?? this.translationFunc("address.state"),
1204
1213
  s.state,
1205
1214
  a.state,
1206
- n.state,
1215
+ i.state,
1207
1216
  this.stateStyles,
1208
1217
  "address-level1"
1209
1218
  );
1210
- this.inputs.set("state", S), h.appendChild(S.getElement());
1219
+ this.inputs.set("state", v), h.appendChild(v.getElement());
1211
1220
  }
1212
1221
  this.fieldsContainer.appendChild(h);
1213
1222
  }
@@ -1217,46 +1226,54 @@ class de extends k {
1217
1226
  const t = document.createElement("div");
1218
1227
  return t.className = `address-row address-row-${e.length === 1 ? "single" : "double"}`, t;
1219
1228
  }
1220
- createInput(e, t, s, a, n, r, o) {
1221
- const d = `${this.type}Address.${e}`, c = new me({
1222
- name: d,
1229
+ createInput(e, t, s, a, i, r, o, d) {
1230
+ const c = `${this.type}Address.${e}`, m = new pe({
1231
+ name: c,
1223
1232
  error: !1,
1224
1233
  errorMsg: void 0,
1225
1234
  styles: r,
1235
+ maxLength: d,
1226
1236
  ...this.grouped ? { placeholder: t } : {
1227
1237
  label: t,
1228
1238
  placeholder: (() => {
1229
- const m = `address.placeholder.${e}`, b = this.translationFunc(m);
1230
- return b !== m ? b : t;
1239
+ const S = `address.placeholder.${e}`, l = this.translationFunc(S);
1240
+ return l !== S ? l : t;
1231
1241
  })()
1232
1242
  },
1233
1243
  value: s,
1234
1244
  autocomplete: o,
1235
- onChange: (m) => {
1236
- c.setError(!1);
1237
- const b = new Event("input", { bubbles: !0 });
1238
- Object.defineProperty(b, "target", {
1239
- writable: !1,
1240
- value: {
1241
- name: d,
1242
- value: m.target.value
1243
- }
1244
- }), this.onChange(b);
1245
+ onChange: (S) => {
1246
+ const l = S.target.value;
1247
+ if (d && l.length >= d) {
1248
+ const p = this.translationFunc("validation.maxLengthExceeded");
1249
+ m.setError(!0, p.replace("{{max}}", String(d)));
1250
+ } else
1251
+ m.setError(!1);
1252
+ this.onChange(
1253
+ P({
1254
+ type: "input",
1255
+ target: {
1256
+ name: c,
1257
+ value: l
1258
+ }
1259
+ })
1260
+ );
1245
1261
  }
1246
1262
  });
1247
- return c.addEventListener("blur", (m) => {
1248
- const b = new Event("blur", { bubbles: !0 });
1249
- Object.defineProperty(b, "target", {
1250
- writable: !1,
1251
- value: {
1252
- name: d,
1253
- value: m.target.value
1254
- }
1255
- }), this.onBlur(b);
1256
- }), c;
1263
+ return m.addEventListener("blur", (S) => {
1264
+ this.onBlur(
1265
+ P({
1266
+ type: "blur",
1267
+ target: {
1268
+ name: c,
1269
+ value: S.target.value
1270
+ }
1271
+ })
1272
+ );
1273
+ }), m;
1257
1274
  }
1258
- createCountrySelect(e, t, s, a, n, r) {
1259
- const o = `${this.type}Address.country`, d = be(n, this.locale), c = new V({
1275
+ createCountrySelect(e, t, s, a, i, r) {
1276
+ const o = `${this.type}Address.country`, d = ve(i, this.locale), c = new _({
1260
1277
  name: o,
1261
1278
  error: !1,
1262
1279
  errorMsg: void 0,
@@ -1270,25 +1287,25 @@ class de extends k {
1270
1287
  autocomplete: "country",
1271
1288
  onChange: (m) => {
1272
1289
  c.setError(!1);
1273
- const b = m.target.value, l = new Event("change", { bubbles: !0 });
1274
- Object.defineProperty(l, "target", {
1275
- writable: !1,
1276
- value: {
1277
- name: o,
1278
- value: b
1279
- }
1280
- }), this.onChange(l), this.handleCountryChange(b);
1290
+ const S = m.target.value;
1291
+ this.onChange(
1292
+ P({
1293
+ type: "change",
1294
+ target: { name: o, value: S }
1295
+ })
1296
+ ), this.handleCountryChange(S);
1281
1297
  }
1282
1298
  });
1283
1299
  return c.addEventListener("blur", (m) => {
1284
- const b = new Event("blur", { bubbles: !0 });
1285
- Object.defineProperty(b, "target", {
1286
- writable: !1,
1287
- value: {
1288
- name: o,
1289
- value: m.target.value
1290
- }
1291
- }), this.onBlur(b);
1300
+ this.onBlur(
1301
+ P({
1302
+ type: "blur",
1303
+ target: {
1304
+ name: o,
1305
+ value: m.target.value
1306
+ }
1307
+ })
1308
+ );
1292
1309
  }), c;
1293
1310
  }
1294
1311
  handleCountryChange(e) {
@@ -1300,26 +1317,26 @@ class de extends k {
1300
1317
  return;
1301
1318
  }
1302
1319
  if (!a && s && (this.stateRow.style.display = ""), a) return;
1303
- const n = this.inputs.get("state") instanceof V, r = U.has(e);
1304
- if (n && r) {
1320
+ const i = this.inputs.get("state") instanceof _, r = O.has(e);
1321
+ if (i && r) {
1305
1322
  const o = this.inputs.get("state");
1306
- if (o instanceof V) {
1307
- const d = e === "CA" ? "CA" : "US", c = Q(d), m = d === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState");
1323
+ if (o instanceof _) {
1324
+ const d = e === "CA" ? "CA" : "US", c = ee(d), m = d === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState");
1308
1325
  o.setOptions(c, m);
1309
1326
  }
1310
1327
  this.clearStateValue();
1311
1328
  return;
1312
1329
  }
1313
- if (n !== r) {
1330
+ if (i !== r) {
1314
1331
  this.rebuildStateField(e), this.clearStateValue();
1315
1332
  return;
1316
1333
  }
1317
- !n && !r && t !== e && this.clearStateValue();
1334
+ !i && !r && t !== e && this.clearStateValue();
1318
1335
  }
1319
1336
  rebuildStateField(e) {
1320
1337
  if (!this.stateRow || !this.stateStyles) return;
1321
1338
  const t = this.inputs.get("state");
1322
- if (t && (t.getElement().remove(), this.inputs.delete("state")), U.has(e)) {
1339
+ if (t && (t.getElement().remove(), this.inputs.delete("state")), O.has(e)) {
1323
1340
  const a = this.createStateSelect(
1324
1341
  "",
1325
1342
  void 0,
@@ -1345,17 +1362,17 @@ class de extends k {
1345
1362
  clearStateValue() {
1346
1363
  const e = this.inputs.get("state");
1347
1364
  e && e.setValue("");
1348
- const t = `${this.type}Address.state`, s = new CustomEvent("input", {
1349
- bubbles: !0,
1350
- detail: { programmatic: !0 }
1351
- });
1352
- Object.defineProperty(s, "target", {
1353
- writable: !1,
1354
- value: { name: t, value: "" }
1355
- }), this.onChange(s);
1365
+ const t = `${this.type}Address.state`;
1366
+ this.onChange(
1367
+ P({
1368
+ type: "input",
1369
+ target: { name: t, value: "" },
1370
+ detail: { programmatic: !0 }
1371
+ })
1372
+ );
1356
1373
  }
1357
- createStateSelect(e, t, s, a, n, r) {
1358
- const o = `${this.type}Address.state`, d = n === "CA" ? "CA" : "US", c = Q(d), m = d === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState"), b = new V({
1374
+ createStateSelect(e, t, s, a, i, r) {
1375
+ const o = `${this.type}Address.state`, d = i === "CA" ? "CA" : "US", c = ee(d), m = d === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState"), S = new _({
1359
1376
  name: o,
1360
1377
  error: !1,
1361
1378
  errorMsg: void 0,
@@ -1366,57 +1383,64 @@ class de extends k {
1366
1383
  options: c,
1367
1384
  autocomplete: "address-level1",
1368
1385
  onChange: (l) => {
1369
- b.setError(!1);
1370
- const u = new Event("change", { bubbles: !0 });
1371
- Object.defineProperty(u, "target", {
1372
- writable: !1,
1373
- value: {
1386
+ S.setError(!1), this.onChange(
1387
+ P({
1388
+ type: "change",
1389
+ target: {
1390
+ name: o,
1391
+ value: l.target.value
1392
+ }
1393
+ })
1394
+ );
1395
+ }
1396
+ });
1397
+ return S.addEventListener("blur", (l) => {
1398
+ this.onBlur(
1399
+ P({
1400
+ type: "blur",
1401
+ target: {
1374
1402
  name: o,
1375
1403
  value: l.target.value
1376
1404
  }
1377
- }), this.onChange(u);
1378
- }
1379
- });
1380
- return b.addEventListener("blur", (l) => {
1381
- const u = new Event("blur", { bubbles: !0 });
1382
- Object.defineProperty(u, "target", {
1383
- writable: !1,
1384
- value: {
1385
- name: o,
1386
- value: l.target.value
1387
- }
1388
- }), this.onBlur(u);
1389
- }), b;
1405
+ })
1406
+ );
1407
+ }), S;
1390
1408
  }
1391
- createUngroupedFields(e, t, s, a, n) {
1409
+ createUngroupedFields(e, t, s, a, i) {
1392
1410
  const r = e.styles.borderRadius, o = {
1393
1411
  color: e.styles.textColor,
1394
1412
  fontSize: e.styles.fontSize,
1395
1413
  fontFamily: e.styles.fontFamily,
1396
1414
  borderRadius: `${r}px`
1397
- }, d = (c, m, b) => {
1415
+ }, d = (c, m, S, l) => {
1398
1416
  if (!t[c]?.enabled) return;
1399
- const l = t[c]?.label ?? this.translationFunc(m), u = this.createRow(["full"]), y = this.createInput(
1417
+ const p = t[c]?.label ?? this.translationFunc(m), y = this.createRow(["full"]), u = this.createInput(
1400
1418
  c,
1401
- l,
1419
+ p,
1402
1420
  s[c],
1403
1421
  a[c],
1404
- n[c],
1422
+ i[c],
1405
1423
  o,
1406
- b
1424
+ S,
1425
+ l
1407
1426
  );
1408
- this.inputs.set(c, y), u.appendChild(y.getElement()), this.fieldsContainer.appendChild(u);
1427
+ this.inputs.set(c, u), y.appendChild(u.getElement()), this.fieldsContainer.appendChild(y);
1409
1428
  };
1410
- if (d("firstName", "address.firstName", "given-name"), d("lastName", "address.lastName", "family-name"), d("street", "address.addressLine1", "street-address"), d("city", "address.townCity", "address-level2"), t.country?.enabled) {
1411
- const c = t.country?.label ?? this.translationFunc("address.chooseCountry"), m = this.createRow(["full"]), b = this.createCountrySelect(
1429
+ if (d("firstName", "address.firstName", "given-name"), d("lastName", "address.lastName", "family-name"), d(
1430
+ "street",
1431
+ "address.addressLine1",
1432
+ "street-address",
1433
+ t.street?.maxLength
1434
+ ), d("city", "address.townCity", "address-level2"), t.country?.enabled) {
1435
+ const c = t.country?.label ?? this.translationFunc("address.chooseCountry"), m = this.createRow(["full"]), S = this.createCountrySelect(
1412
1436
  s.country,
1413
1437
  a.country,
1414
- n.country,
1438
+ i.country,
1415
1439
  o,
1416
1440
  t.country?.options,
1417
1441
  c
1418
1442
  );
1419
- this.inputs.set("country", b), m.appendChild(b.getElement()), this.fieldsContainer.appendChild(m);
1443
+ this.inputs.set("country", S), m.appendChild(S.getElement()), this.fieldsContainer.appendChild(m);
1420
1444
  }
1421
1445
  if (t.state?.enabled) {
1422
1446
  this.stateFieldConfig = t.state;
@@ -1424,28 +1448,28 @@ class de extends k {
1424
1448
  this.stateRow = c, this.stateStyles = o, this.currentCountry = s.country, t.state?.hiddenForCountries?.includes(
1425
1449
  s.country
1426
1450
  ) && (c.style.display = "none");
1427
- const b = U.has(s.country), l = t.state?.label ?? this.translationFunc("address.state");
1428
- if (b) {
1429
- const u = this.createStateSelect(
1451
+ const S = O.has(s.country), l = t.state?.label ?? this.translationFunc("address.state");
1452
+ if (S) {
1453
+ const p = this.createStateSelect(
1430
1454
  s.state,
1431
1455
  a.state,
1432
- n.state,
1456
+ i.state,
1433
1457
  o,
1434
1458
  s.country,
1435
1459
  l
1436
1460
  );
1437
- this.inputs.set("state", u), c.appendChild(u.getElement());
1461
+ this.inputs.set("state", p), c.appendChild(p.getElement());
1438
1462
  } else {
1439
- const u = this.createInput(
1463
+ const p = this.createInput(
1440
1464
  "state",
1441
1465
  l,
1442
1466
  s.state,
1443
1467
  a.state,
1444
- n.state,
1468
+ i.state,
1445
1469
  o,
1446
1470
  "address-level1"
1447
1471
  );
1448
- this.inputs.set("state", u), c.appendChild(u.getElement());
1472
+ this.inputs.set("state", p), c.appendChild(p.getElement());
1449
1473
  }
1450
1474
  this.fieldsContainer.appendChild(c);
1451
1475
  }
@@ -1476,14 +1500,14 @@ class de extends k {
1476
1500
  setError(e, t, s) {
1477
1501
  const a = this.inputs.get(e);
1478
1502
  if (a) {
1479
- const n = a.getElement().querySelector("input") || a.getElement().querySelector("select");
1480
- document.activeElement !== n && a.setError(t, s);
1503
+ const i = a.getElement().querySelector("input") || a.getElement().querySelector("select");
1504
+ document.activeElement !== i && a.setError(t, s);
1481
1505
  }
1482
1506
  }
1483
1507
  updateField(e, t, s, a) {
1484
- const n = this.inputs.get(e);
1485
- if (!n) return;
1486
- const r = n.getElement().querySelector("input") || n.getElement().querySelector("select"), o = n.getValue();
1508
+ const i = this.inputs.get(e);
1509
+ if (!i) return;
1510
+ const r = i.getElement().querySelector("input") || i.getElement().querySelector("select"), o = i.getValue();
1487
1511
  !(document.activeElement === r) && !(t === "" && o !== "") && this.setValue(e, t);
1488
1512
  const m = !!(a && s);
1489
1513
  this.setError(e, m, s);
@@ -1503,19 +1527,20 @@ class de extends k {
1503
1527
  e && e.focus();
1504
1528
  }
1505
1529
  }
1506
- class gt {
1530
+ class ft {
1507
1531
  input = null;
1508
1532
  isVgsMode;
1509
1533
  vgsWrapper = null;
1510
1534
  vgsContainer = null;
1511
1535
  vgsHelperText = null;
1512
1536
  wrapperElement;
1537
+ _vgsFieldsReady = !1;
1513
1538
  constructor(e) {
1514
1539
  const {
1515
1540
  value: t,
1516
1541
  onChange: s,
1517
1542
  onBlur: a,
1518
- errorMsg: n,
1543
+ errorMsg: i,
1519
1544
  checkoutProfile: r,
1520
1545
  translationFunc: o,
1521
1546
  autocomplete: d = "cc-name",
@@ -1525,7 +1550,7 @@ class gt {
1525
1550
  t,
1526
1551
  s,
1527
1552
  a,
1528
- n,
1553
+ i,
1529
1554
  r,
1530
1555
  o,
1531
1556
  d
@@ -1534,29 +1559,29 @@ class gt {
1534
1559
  buildVgsLayout(e, t) {
1535
1560
  const s = e.styles.borderRadius, a = document.createElement("div");
1536
1561
  a.style.marginBottom = "4px";
1537
- const n = document.createElement("label");
1538
- n.className = "input-label", n.textContent = t("cardholderNameLabel"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), this.wrapperElement.appendChild(a), this.vgsWrapper = document.createElement("div"), this.vgsWrapper.className = "vgs-wrap", this.vgsWrapper.style.position = "relative", this.vgsWrapper.style.borderRadius = `${s}px`, this.vgsWrapper.style.height = "38.5px", this.vgsWrapper.style.width = "100%", this.vgsWrapper.style.overflow = "hidden", this.vgsWrapper.style.background = "#fff", this.vgsWrapper.style.boxShadow = "none";
1562
+ const i = document.createElement("label");
1563
+ i.className = "input-label", i.textContent = t("cardholderNameLabel"), i.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(i), this.wrapperElement.appendChild(a), this.vgsWrapper = document.createElement("div"), this.vgsWrapper.className = "vgs-wrap", this.vgsWrapper.style.position = "relative", this.vgsWrapper.style.borderRadius = `${s}px`, this.vgsWrapper.style.height = "38.5px", this.vgsWrapper.style.width = "100%", this.vgsWrapper.style.overflow = "hidden";
1539
1564
  const r = document.createElement("div");
1540
- r.className = "vgs-field-skeleton", this.vgsWrapper.appendChild(r), this.vgsContainer = document.createElement("div"), this.vgsContainer.id = `vgs-cc-name-${Date.now()}`, this.vgsContainer.style.position = "relative", this.vgsContainer.style.zIndex = "1", this.vgsContainer.style.width = "100%", this.vgsContainer.style.height = "100%", this.vgsWrapper.appendChild(this.vgsContainer), this.wrapperElement.appendChild(this.vgsWrapper), this.vgsHelperText = new ve({ visible: !1 }), this.wrapperElement.appendChild(this.vgsHelperText.getElement());
1565
+ r.className = "vgs-field-skeleton", this.vgsWrapper.appendChild(r), this.vgsContainer = document.createElement("div"), this.vgsContainer.id = `vgs-cc-name-${Date.now()}`, this.vgsContainer.style.position = "relative", this.vgsContainer.style.zIndex = "1", this.vgsContainer.style.width = "100%", this.vgsContainer.style.height = "100%", this.vgsWrapper.appendChild(this.vgsContainer), this.wrapperElement.appendChild(this.vgsWrapper), this.vgsHelperText = new Se({ visible: !1 }), this.wrapperElement.appendChild(this.vgsHelperText.getElement());
1541
1566
  }
1542
- buildNativeLayout(e, t, s, a, n, r, o) {
1543
- this.input = new me({
1567
+ buildNativeLayout(e, t, s, a, i, r, o) {
1568
+ this.input = new pe({
1544
1569
  name: "name",
1545
1570
  label: r("cardholderNameLabel"),
1546
1571
  error: !1,
1547
1572
  errorMsg: a,
1548
1573
  styles: {
1549
- color: n.styles.textColor,
1550
- borderRadius: `${n.styles.borderRadius}px`,
1551
- fontSize: n.styles.fontSize,
1552
- fontFamily: n.styles.fontFamily
1574
+ color: i.styles.textColor,
1575
+ borderRadius: `${i.styles.borderRadius}px`,
1576
+ fontSize: i.styles.fontSize,
1577
+ fontFamily: i.styles.fontFamily
1553
1578
  },
1554
1579
  placeholder: r("cardholderNamePlaceholder"),
1555
1580
  value: e,
1556
1581
  autocomplete: o,
1557
1582
  onChange: (d) => {
1558
- const m = d.target.value, b = m.replace(/[^a-zA-Z\s\-'.]/g, "");
1559
- m !== b && this.input?.setValue(b), this.input?.setError(!1), this.trim(), t(d);
1583
+ const m = d.target.value, S = m.replace(/[^a-zA-Z\s\-'.]/g, "");
1584
+ m !== S && this.input?.setValue(S), this.input?.setError(!1), this.trim(), t(d);
1560
1585
  }
1561
1586
  }), this.input.addEventListener("blur", (d) => {
1562
1587
  s(d);
@@ -1567,16 +1592,16 @@ class gt {
1567
1592
  }
1568
1593
  handleVgsStateChange(e, t) {
1569
1594
  if (!this.isVgsMode || !this.vgsWrapper) return;
1570
- const a = !!e[ee.CARDHOLDER]?.isFocused;
1571
- if (this.vgsWrapper.classList.toggle("vgs-wrap-focused", a), !t || !this.vgsHelperText) return;
1572
- const n = t[ee.CARDHOLDER];
1573
- n ? (this.vgsHelperText.setText(n), this.vgsHelperText.toggleVisibility(!0)) : this.vgsHelperText.toggleVisibility(!1);
1595
+ const s = e[te.CARDHOLDER]?.isFocused;
1596
+ if (this._vgsFieldsReady && (this.vgsWrapper.style.boxShadow = s ? "0 0 0 1px rgba(50, 151, 211, 0.7), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3)" : "0 0 0 1px #e0e0e0, 0 2px 4px 0 rgba(0,0,0,0.07), 0 1px 1.5px 0 rgba(0,0,0,0.05)"), !t || !this.vgsHelperText) return;
1597
+ const a = t[te.CARDHOLDER];
1598
+ a ? (this.vgsHelperText.setText(a), this.vgsHelperText.toggleVisibility(!0)) : this.vgsHelperText.toggleVisibility(!1);
1574
1599
  }
1575
1600
  hideFakePlaceholder() {
1576
1601
  if (!this.vgsWrapper) return;
1577
- this.vgsWrapper.style.boxShadow = "";
1602
+ this._vgsFieldsReady = !0, this.vgsWrapper.style.overflow = "visible", this.vgsWrapper.style.transition = "box-shadow 0.1s ease-in", this.vgsWrapper.style.boxShadow = "0 0 0 1px #e0e0e0, 0 2px 4px 0 rgba(0,0,0,0.07), 0 1px 1.5px 0 rgba(0,0,0,0.05)";
1578
1603
  const e = this.vgsWrapper.querySelector(".vgs-field-skeleton");
1579
- e && e.remove();
1604
+ e && e.remove(), this.vgsContainer?.querySelectorAll("iframe").forEach((t) => t.style.height = "38.5px");
1580
1605
  }
1581
1606
  getValue() {
1582
1607
  return this.isVgsMode ? "" : this.input?.getValue() ?? "";
@@ -1604,7 +1629,7 @@ class gt {
1604
1629
  this.isVgsMode || this.input?.focus();
1605
1630
  }
1606
1631
  }
1607
- class pe extends k {
1632
+ class ge extends A {
1608
1633
  constructor() {
1609
1634
  super("div", ["skeleton-container"]), this.createSkeletonElements();
1610
1635
  }
@@ -1628,19 +1653,19 @@ class pe extends k {
1628
1653
  return e.appendChild(t), e.appendChild(s), e.appendChild(a), e;
1629
1654
  }
1630
1655
  }
1631
- class ft extends k {
1656
+ class yt extends A {
1632
1657
  constructor(e) {
1633
1658
  const { translationFunc: t, checkoutProfile: s } = e;
1634
1659
  super("div", ["payment-separator"]);
1635
- const a = this.getElement(), n = document.createElement("span");
1636
- n.className = "payment-separator__line";
1660
+ const a = this.getElement(), i = document.createElement("span");
1661
+ i.className = "payment-separator__line";
1637
1662
  const r = document.createElement("p");
1638
1663
  r.textContent = t("pay-with-card"), r.className = "payment-separator__text", r.style.fontFamily = `${s.styles.fontFamily}, sans-serif`;
1639
1664
  const o = document.createElement("span");
1640
- o.className = "payment-separator__line", a.appendChild(n), a.appendChild(r), a.appendChild(o);
1665
+ o.className = "payment-separator__line", a.appendChild(i), a.appendChild(r), a.appendChild(o);
1641
1666
  }
1642
1667
  }
1643
- class yt extends k {
1668
+ class bt extends A {
1644
1669
  paymentMethods;
1645
1670
  paymentSeparator;
1646
1671
  skeleton;
@@ -1649,13 +1674,13 @@ class yt extends k {
1649
1674
  checkoutProfile: t,
1650
1675
  formData: s,
1651
1676
  onPaypalSubmit: a,
1652
- onApplePaySubmit: n,
1677
+ onApplePaySubmit: i,
1653
1678
  supportedPaymentMethods: r,
1654
1679
  translationFunc: o,
1655
1680
  paymentId: d,
1656
1681
  checkoutKey: c,
1657
1682
  checkoutDetails: m,
1658
- environment: b,
1683
+ environment: S,
1659
1684
  countryCode: l
1660
1685
  } = e;
1661
1686
  if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
@@ -1666,42 +1691,42 @@ class yt extends k {
1666
1691
  this.renderSkeleton();
1667
1692
  return;
1668
1693
  }
1669
- const u = Object.entries(
1694
+ const p = Object.entries(
1670
1695
  t.additionalPaymentMethods
1671
- ).filter(([y, p]) => {
1672
- const g = p.enabled, h = r ? r[y] === !0 : !0, v = !p.countries || l && p.countries.includes(l);
1673
- return g && h && v;
1674
- }).sort((y, p) => y[1].order - p[1].order);
1675
- if (u.length === 0) {
1696
+ ).filter(([y, u]) => {
1697
+ const g = u.enabled, h = r ? r[y] === !0 : !0, b = !u.countries || l && u.countries.includes(l);
1698
+ return g && h && b;
1699
+ }).sort((y, u) => y[1].order - u[1].order);
1700
+ if (p.length === 0) {
1676
1701
  this.getElement().style.display = "none";
1677
1702
  return;
1678
1703
  }
1679
- for (const [y] of u)
1704
+ for (const [y] of p)
1680
1705
  switch (y) {
1681
1706
  case "paypal": {
1682
1707
  if (a) {
1683
- const p = new Ee({
1708
+ const u = new Ee({
1684
1709
  checkoutProfile: t,
1685
1710
  formData: s,
1686
1711
  onSubmit: a
1687
1712
  });
1688
- this.paymentMethods.set("paypal", p), p.appendTo(this.getElement());
1713
+ this.paymentMethods.set("paypal", u), u.appendTo(this.getElement());
1689
1714
  }
1690
1715
  break;
1691
1716
  }
1692
1717
  case "applePay": {
1693
- if (n && d && c) {
1694
- const p = t.appearance?.additionalPaymentMethods?.applePay, g = new Se({
1718
+ if (i && d && c) {
1719
+ const u = t.appearance?.additionalPaymentMethods?.applePay, g = new Ce({
1695
1720
  checkoutProfile: t,
1696
1721
  formData: s,
1697
- onSubmit: n,
1722
+ onSubmit: i,
1698
1723
  paymentId: d,
1699
1724
  checkoutKey: c,
1700
1725
  checkoutDetails: m,
1701
- environment: b,
1702
- displayName: p?.displayName,
1703
- requiredBillingContactFields: p?.requiredBillingContactFields,
1704
- requiredShippingContactFields: p?.requiredShippingContactFields
1726
+ environment: S,
1727
+ displayName: u?.displayName,
1728
+ requiredBillingContactFields: u?.requiredBillingContactFields,
1729
+ requiredShippingContactFields: u?.requiredShippingContactFields
1705
1730
  });
1706
1731
  this.paymentMethods.set("applePay", g), g.appendTo(this.getElement());
1707
1732
  }
@@ -1719,13 +1744,13 @@ class yt extends k {
1719
1744
  );
1720
1745
  break;
1721
1746
  }
1722
- this.paymentMethods.size > 0 && (this.paymentSeparator = new ft({
1747
+ this.paymentMethods.size > 0 && (this.paymentSeparator = new yt({
1723
1748
  translationFunc: o,
1724
1749
  checkoutProfile: t
1725
1750
  }), this.getElement().appendChild(this.paymentSeparator.getElement()));
1726
1751
  }
1727
1752
  renderSkeleton() {
1728
- this.skeleton = new pe(), this.getElement().appendChild(this.skeleton.getElement());
1753
+ this.skeleton = new ge(), this.getElement().appendChild(this.skeleton.getElement());
1729
1754
  }
1730
1755
  updateFormData(e) {
1731
1756
  const t = this.paymentMethods.get("paypal");
@@ -1737,8 +1762,8 @@ class yt extends k {
1737
1762
  return this.paymentMethods.size > 0 && this.getElement().style.display !== "none";
1738
1763
  }
1739
1764
  }
1740
- const bt = 17;
1741
- class vt extends k {
1765
+ const vt = 17;
1766
+ class St extends A {
1742
1767
  styles;
1743
1768
  isHovered = !1;
1744
1769
  constructor(e) {
@@ -1748,7 +1773,7 @@ class vt extends k {
1748
1773
  }
1749
1774
  applyStyles() {
1750
1775
  const e = this.getElement();
1751
- 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 === bt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
1776
+ 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 === vt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
1752
1777
  }
1753
1778
  handleMouseEnter() {
1754
1779
  this.isHovered = !0, this.applyStyles();
@@ -1760,11 +1785,11 @@ class vt extends k {
1760
1785
  return this.getElement().disabled = e, e ? (this.addClass("disabled"), this.removeClass("valid")) : (this.removeClass("disabled"), this.addClass("valid")), this.applyStyles(), this;
1761
1786
  }
1762
1787
  }
1763
- class St {
1788
+ class Ct {
1764
1789
  button;
1765
1790
  constructor(e) {
1766
1791
  const { disabled: t, checkoutProfile: s, translationFunc: a } = e;
1767
- this.button = new vt({
1792
+ this.button = new St({
1768
1793
  text: a(
1769
1794
  `buttonTexts.${s?.layout.actionButton.translationKey}`
1770
1795
  ),
@@ -1837,7 +1862,7 @@ class Et {
1837
1862
  (a) => a.enabled
1838
1863
  ))
1839
1864
  return;
1840
- this.paymentMethods = new yt({
1865
+ this.paymentMethods = new bt({
1841
1866
  checkoutProfile: e,
1842
1867
  formData: t,
1843
1868
  supportedPaymentMethods: this.supportedPaymentMethods,
@@ -1859,16 +1884,16 @@ class Et {
1859
1884
  }
1860
1885
  createEmailField(e, t, s, a) {
1861
1886
  try {
1862
- const n = e.layout.billingFields && Object.values(e.layout.billingFields).some(
1887
+ const i = e.layout.billingFields && Object.values(e.layout.billingFields).some(
1863
1888
  (r) => r?.enabled
1864
1889
  ) || e.layout.shippingFields && Object.values(e.layout.shippingFields).some(
1865
1890
  (r) => r?.enabled
1866
1891
  );
1867
- this.emailField = new Ce({
1892
+ this.emailField = new Fe({
1868
1893
  value: t.email,
1869
1894
  onChange: this.onChange,
1870
1895
  onBlur: this.onBlur,
1871
- onTab: n ? void 0 : () => this.focusManager.focusField(
1896
+ onTab: i ? void 0 : () => this.focusManager.focusField(
1872
1897
  e.layout.phoneNumber?.enabled ? "phoneNumber" : "cardNumber"
1873
1898
  ),
1874
1899
  error: !!(s.email && a.email),
@@ -1876,14 +1901,14 @@ class Et {
1876
1901
  checkoutProfile: e,
1877
1902
  translationFunc: this.translationFunc
1878
1903
  }), this.emailFocusHandler = () => this.onFieldFocus("email"), this.emailField.getElement().addEventListener("focus", this.emailFocusHandler, !0), this.focusManager.registerField("email", this.emailField), this.formElement.appendChild(this.emailField.getElement());
1879
- } catch (n) {
1880
- throw console.error("Error creating email field:", n), n;
1904
+ } catch (i) {
1905
+ throw console.error("Error creating email field:", i), i;
1881
1906
  }
1882
1907
  }
1883
1908
  createPhoneNumberField(e, t, s, a) {
1884
- const n = document.createElement("div");
1885
- this.phonePlaceholder = n, this.formElement.appendChild(n), Fe().then(({ PhoneNumberField: r }) => {
1886
- n.isConnected && (this.phoneNumberField = new r({
1909
+ const i = document.createElement("div");
1910
+ this.phonePlaceholder = i, this.formElement.appendChild(i), Me().then(({ PhoneNumberField: r }) => {
1911
+ i.isConnected && (this.phoneNumberField = new r({
1887
1912
  value: t.phoneNumber ?? "",
1888
1913
  onChange: this.onChange,
1889
1914
  onBlur: this.onBlur,
@@ -1895,9 +1920,9 @@ class Et {
1895
1920
  defaultCountry: e.layout.phoneNumber?.defaultCountry || "US",
1896
1921
  allowedCountries: e.layout.phoneNumber?.allowedCountries,
1897
1922
  locale: this.locale
1898
- }), this.phoneNumberFocusHandler = () => this.onFieldFocus("phoneNumber"), this.phoneNumberField.getElement().addEventListener("focus", this.phoneNumberFocusHandler, !0), this.focusManager.registerField("phoneNumber", this.phoneNumberField), n.replaceWith(this.phoneNumberField.getElement()), this.phonePlaceholder = void 0);
1923
+ }), this.phoneNumberFocusHandler = () => this.onFieldFocus("phoneNumber"), this.phoneNumberField.getElement().addEventListener("focus", this.phoneNumberFocusHandler, !0), this.focusManager.registerField("phoneNumber", this.phoneNumberField), i.replaceWith(this.phoneNumberField.getElement()), this.phonePlaceholder = void 0);
1899
1924
  }).catch((r) => {
1900
- console.error("Error creating phone number field:", r), n.remove(), this.phonePlaceholder = void 0;
1925
+ console.error("Error creating phone number field:", r), i.remove(), this.phonePlaceholder = void 0;
1901
1926
  });
1902
1927
  }
1903
1928
  setCheckoutDetailsLoaded(e) {
@@ -1909,7 +1934,7 @@ class Et {
1909
1934
  this.cardSectionSkeleton = this.buildCardSkeleton(e), this.formElement.appendChild(this.cardSectionSkeleton);
1910
1935
  return;
1911
1936
  }
1912
- if (this.cardSection = new Me({
1937
+ if (this.cardSection = new Ne({
1913
1938
  checkoutProfile: e,
1914
1939
  cardNumber: t.cardNumber,
1915
1940
  cardNumberError: s.cardNumber,
@@ -1923,20 +1948,19 @@ class Et {
1923
1948
  onChange: this.onChange,
1924
1949
  onBlur: this.onBlur,
1925
1950
  onCardBrandChange: () => {
1926
- if (t.cardCvv) {
1927
- const n = new Event("blur", { bubbles: !0 });
1928
- Object.defineProperty(n, "target", {
1929
- writable: !1,
1930
- value: { name: "cardCvv", value: t.cardCvv }
1931
- }), this.onBlur(n);
1932
- }
1951
+ t.cardCvv && this.onBlur(
1952
+ P({
1953
+ type: "blur",
1954
+ target: { name: "cardCvv", value: t.cardCvv }
1955
+ })
1956
+ );
1933
1957
  },
1934
1958
  translationFunc: this.translationFunc,
1935
1959
  vgsService: this.vgsService,
1936
1960
  onVgsStateChange: this.onVgsStateChange
1937
1961
  }), !this.vgsService) {
1938
- const n = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
1939
- n && (this.cardExpiryFocusHandler = () => this.onFieldFocus("cardExpiry"), n.addEventListener(
1962
+ const i = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
1963
+ i && (this.cardExpiryFocusHandler = () => this.onFieldFocus("cardExpiry"), i.addEventListener(
1940
1964
  "focus",
1941
1965
  this.cardExpiryFocusHandler
1942
1966
  ));
@@ -1955,8 +1979,8 @@ class Et {
1955
1979
  }), this.focusManager.registerField("cardCvv", {
1956
1980
  focus: () => this.cardSection?.focusField("cardCvv")
1957
1981
  }), this.formElement.appendChild(this.cardSection.getElement());
1958
- } catch (n) {
1959
- throw console.error("Error creating card section:", n), n;
1982
+ } catch (i) {
1983
+ throw console.error("Error creating card section:", i), i;
1960
1984
  }
1961
1985
  }
1962
1986
  createCardholderSection(e, t, s, a) {
@@ -1965,7 +1989,7 @@ class Et {
1965
1989
  this.cardholderSectionSkeleton = this.buildCardholderSkeleton(e), this.formElement.appendChild(this.cardholderSectionSkeleton);
1966
1990
  return;
1967
1991
  }
1968
- if (this.cardholderSection = new gt({
1992
+ if (this.cardholderSection = new ft({
1969
1993
  value: t.name,
1970
1994
  onChange: this.onChange,
1971
1995
  onBlur: this.onBlur,
@@ -1975,18 +1999,18 @@ class Et {
1975
1999
  translationFunc: this.translationFunc,
1976
2000
  isVgsMode: !!this.vgsService
1977
2001
  }), !this.vgsService) {
1978
- const n = this.cardholderSection.getElement().querySelector('input[name="name"]');
1979
- n && (this.nameFocusHandler = () => this.onFieldFocus("name"), n.addEventListener("focus", this.nameFocusHandler));
2002
+ const i = this.cardholderSection.getElement().querySelector('input[name="name"]');
2003
+ i && (this.nameFocusHandler = () => this.onFieldFocus("name"), i.addEventListener("focus", this.nameFocusHandler));
1980
2004
  }
1981
2005
  this.focusManager.registerField("name", this.cardholderSection), this.formElement.appendChild(this.cardholderSection.getElement());
1982
- } catch (n) {
1983
- throw console.error("Error creating cardholder section:", n), n;
2006
+ } catch (i) {
2007
+ throw console.error("Error creating cardholder section:", i), i;
1984
2008
  }
1985
2009
  }
1986
2010
  createBillingAddressSection(e, t, s, a) {
1987
2011
  try {
1988
- const n = e.layout.billingFields;
1989
- if (!n || !Object.values(n).some(
2012
+ const i = e.layout.billingFields;
2013
+ if (!i || !Object.values(i).some(
1990
2014
  (d) => d?.enabled
1991
2015
  )) return;
1992
2016
  const o = {
@@ -1998,11 +2022,11 @@ class Et {
1998
2022
  zipCode: "",
1999
2023
  country: ""
2000
2024
  };
2001
- this.billingAddressSection = new de({
2025
+ this.billingAddressSection = new ce({
2002
2026
  type: "billing",
2003
2027
  title: this.translationFunc("address.billingTitle"),
2004
2028
  checkoutProfile: e,
2005
- fieldsConfig: n,
2029
+ fieldsConfig: i,
2006
2030
  values: t.billingAddress ?? o,
2007
2031
  errors: s.billingAddress ?? {},
2008
2032
  touched: a.billingAddress ?? {},
@@ -2012,14 +2036,14 @@ class Et {
2012
2036
  locale: this.locale,
2013
2037
  grouped: e.layout.grouped
2014
2038
  }), this.formElement.appendChild(this.billingAddressSection.getElement());
2015
- } catch (n) {
2016
- throw console.error("Error creating billing address section:", n), n;
2039
+ } catch (i) {
2040
+ throw console.error("Error creating billing address section:", i), i;
2017
2041
  }
2018
2042
  }
2019
2043
  createShippingAddressSection(e, t, s, a) {
2020
2044
  try {
2021
- const n = e.layout.shippingFields;
2022
- if (!n || !Object.values(n).some(
2045
+ const i = e.layout.shippingFields;
2046
+ if (!i || !Object.values(i).some(
2023
2047
  (d) => d?.enabled
2024
2048
  )) return;
2025
2049
  const o = {
@@ -2031,11 +2055,11 @@ class Et {
2031
2055
  zipCode: "",
2032
2056
  country: ""
2033
2057
  };
2034
- this.shippingAddressSection = new de({
2058
+ this.shippingAddressSection = new ce({
2035
2059
  type: "shipping",
2036
2060
  title: this.translationFunc("address.shippingTitle"),
2037
2061
  checkoutProfile: e,
2038
- fieldsConfig: n,
2062
+ fieldsConfig: i,
2039
2063
  values: t.shippingAddress ?? o,
2040
2064
  errors: s.shippingAddress ?? {},
2041
2065
  touched: a.shippingAddress ?? {},
@@ -2045,13 +2069,13 @@ class Et {
2045
2069
  locale: this.locale,
2046
2070
  grouped: e.layout.grouped
2047
2071
  }), this.formElement.appendChild(this.shippingAddressSection.getElement());
2048
- } catch (n) {
2049
- throw console.error("Error creating shipping address section:", n), n;
2072
+ } catch (i) {
2073
+ throw console.error("Error creating shipping address section:", i), i;
2050
2074
  }
2051
2075
  }
2052
2076
  createSubmitButton(e, t) {
2053
2077
  try {
2054
- this.submitButton = new St({
2078
+ this.submitButton = new Ct({
2055
2079
  disabled: t,
2056
2080
  checkoutProfile: e,
2057
2081
  translationFunc: this.translationFunc
@@ -2066,12 +2090,12 @@ class Et {
2066
2090
  updatePhoneNumberField(e, t, s) {
2067
2091
  this.phoneNumberField && (this.phoneNumberField.setValue(e), this.phoneNumberField.setError(t, s));
2068
2092
  }
2069
- updateCardSection(e, t, s, a, n, r, o, d, c) {
2093
+ updateCardSection(e, t, s, a, i, r, o, d, c) {
2070
2094
  this.cardSection && (this.cardSection.updateCardNumber(
2071
2095
  e,
2072
2096
  t,
2073
2097
  s
2074
- ), this.cardSection.updateCardCvv(a, n, r), this.cardSection.updateCardExpiry(
2098
+ ), this.cardSection.updateCardCvv(a, i, r), this.cardSection.updateCardExpiry(
2075
2099
  o,
2076
2100
  d,
2077
2101
  c
@@ -2110,8 +2134,8 @@ class Et {
2110
2134
  buildCardSkeleton(e) {
2111
2135
  const t = e.styles.borderRadius, s = document.createElement("div"), a = document.createElement("div");
2112
2136
  a.style.marginBottom = "4px";
2113
- const n = document.createElement("label");
2114
- n.className = "input-label", n.textContent = this.translationFunc("cardInformation"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), s.appendChild(a);
2137
+ const i = document.createElement("label");
2138
+ i.className = "input-label", i.textContent = this.translationFunc("cardInformation"), i.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(i), s.appendChild(a);
2115
2139
  const r = document.createElement("div");
2116
2140
  r.className = "vgs-card-group", r.style.borderRadius = `${t}px`, r.style.background = "#fff", r.style.display = "flex", r.style.flexDirection = "column", r.style.gap = "8px";
2117
2141
  const o = document.createElement("div");
@@ -2130,17 +2154,17 @@ class Et {
2130
2154
  buildCardholderSkeleton(e) {
2131
2155
  const t = e.styles.borderRadius, s = document.createElement("div"), a = document.createElement("div");
2132
2156
  a.style.marginBottom = "4px";
2133
- const n = document.createElement("label");
2134
- n.className = "input-label", n.textContent = this.translationFunc("cardholderNameLabel"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), s.appendChild(a);
2157
+ const i = document.createElement("label");
2158
+ i.className = "input-label", i.textContent = this.translationFunc("cardholderNameLabel"), i.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(i), s.appendChild(a);
2135
2159
  const r = document.createElement("div");
2136
2160
  return r.style.position = "relative", r.style.borderRadius = `${t}px`, r.style.height = "38.5px", r.style.width = "100%", r.style.overflow = "hidden", r.style.background = "#fff", r.appendChild(this.createSkeletonDiv()), s.appendChild(r), s;
2137
2161
  }
2138
2162
  async mountVgsFields(e) {
2139
2163
  if (!this.vgsService || !this.cardSection) return;
2140
2164
  await this.vgsService.whenReady();
2141
- const t = this.cardSection.getVgsContainerIds(), s = this.cardholderSection?.getVgsContainerId(), a = await mt(
2165
+ const t = this.cardSection.getVgsContainerIds(), s = this.cardholderSection?.getVgsContainerId(), a = await pt(
2142
2166
  e.styles.fontFamily
2143
- ), n = this.cardSection.buildVgsFieldCss(
2167
+ ), i = this.cardSection.buildVgsFieldCss(
2144
2168
  e,
2145
2169
  a
2146
2170
  );
@@ -2151,7 +2175,7 @@ class Et {
2151
2175
  cardCvv: t.cardCvv ? `#${t.cardCvv}` : void 0,
2152
2176
  cardholderName: s ? `#${s}` : void 0
2153
2177
  },
2154
- n,
2178
+ i,
2155
2179
  {
2156
2180
  cardNumber: "1234 5678 9012 3456",
2157
2181
  cardExpiry: this.translationFunc("cardExpiry"),
@@ -2198,7 +2222,7 @@ class Et {
2198
2222
  this.billingAddressSection && (this.billingAddressSection.getElement().remove(), this.billingAddressSection = void 0), this.shippingAddressSection && (this.shippingAddressSection.getElement().remove(), this.shippingAddressSection = void 0), this.submitButton && (this.submitButton.getElement().remove(), this.submitButton = void 0), this.paymentMethods && (this.paymentMethods.getElement().remove(), this.paymentMethods = void 0);
2199
2223
  }
2200
2224
  }
2201
- class Ct {
2225
+ class Ft {
2202
2226
  formManager;
2203
2227
  focusManager;
2204
2228
  onFormSubmit;
@@ -2208,18 +2232,18 @@ class Ct {
2208
2232
  this.formManager = e.formManager, this.focusManager = e.focusManager, this.onFormSubmit = e.onFormSubmit, this.onUIUpdate = e.onUIUpdate;
2209
2233
  }
2210
2234
  handleChange = (e) => {
2211
- const t = e.target, { name: s, value: a } = t, n = s;
2212
- this.formManager.handleChange(n, a), e instanceof CustomEvent && e.detail?.programmatic ? this.localTouchedFields.delete(n) : this.localTouchedFields.has(n) || (this.localTouchedFields.add(n), this.formManager.handleBlur(n, a));
2235
+ const t = e.target, { name: s, value: a } = t, i = s;
2236
+ this.formManager.handleChange(i, a), e instanceof CustomEvent && e.detail?.programmatic ? this.localTouchedFields.delete(i) : this.localTouchedFields.has(i) || (this.localTouchedFields.add(i), this.formManager.handleBlur(i, a));
2213
2237
  const { formData: o, errors: d, touched: c } = this.formManager.getFormState();
2214
2238
  this.focusManager.handleStateUpdate(o, d, c);
2215
2239
  };
2216
2240
  handleBlur = (e) => {
2217
- const t = e.target, { name: s, value: a } = t, n = s;
2218
- this.localTouchedFields.add(n), this.formManager.handleBlur(n, a), setTimeout(() => {
2241
+ const t = e.target, { name: s, value: a } = t, i = s;
2242
+ this.localTouchedFields.add(i), this.formManager.handleBlur(i, a), setTimeout(() => {
2219
2243
  this.onUIUpdate();
2220
2244
  }, 0);
2221
2245
  const { formData: r, errors: o, touched: d } = this.formManager.getFormState();
2222
- d[n] || this.focusManager.handleStateUpdate(r, o, d);
2246
+ d[i] || this.focusManager.handleStateUpdate(r, o, d);
2223
2247
  };
2224
2248
  handleSubmit = async (e) => {
2225
2249
  e.preventDefault(), await this.onFormSubmit(e);
@@ -2239,7 +2263,7 @@ class Ct {
2239
2263
  this.localTouchedFields.clear();
2240
2264
  }
2241
2265
  }
2242
- class Ft {
2266
+ class Mt {
2243
2267
  formManager;
2244
2268
  checkoutProfile;
2245
2269
  formElement;
@@ -2263,7 +2287,7 @@ class Ft {
2263
2287
  try {
2264
2288
  if (e.checkoutProfile.styles?.fontFamily)
2265
2289
  try {
2266
- const { cleanup: t } = Ne({
2290
+ const { cleanup: t } = we({
2267
2291
  fontFamily: e.checkoutProfile.styles.fontFamily
2268
2292
  });
2269
2293
  this.fontCleanup = t, this.formElement.style.fontFamily = e.checkoutProfile.styles.fontFamily;
@@ -2281,16 +2305,16 @@ class Ft {
2281
2305
  isFormDisabled() {
2282
2306
  const e = this.formManager.getFormState(), t = this.checkoutProfile.getState(), s = Object.keys(e.errors).filter(
2283
2307
  (f) => f !== "billingAddress" && f !== "shippingAddress"
2284
- ).length > 0, a = e.errors.billingAddress, n = a && typeof a == "object" ? Object.keys(a).length > 0 : !1, r = e.errors.shippingAddress, o = r && typeof r == "object" ? Object.keys(r).length > 0 : !1, d = s || n || o, m = Z(
2308
+ ).length > 0, a = e.errors.billingAddress, i = a && typeof a == "object" ? Object.keys(a).length > 0 : !1, r = e.errors.shippingAddress, o = r && typeof r == "object" ? Object.keys(r).length > 0 : !1, d = s || i || o, m = J(
2285
2309
  t.checkoutProfile?.layout
2286
- ) ? !!(e.formData.billingAddress?.firstName || e.formData.billingAddress?.lastName || e.formData.shippingAddress?.firstName || e.formData.shippingAddress?.lastName) : !!e.formData.name, l = t.checkoutProfile?.layout.phoneNumber?.enabled ?? !1 ? !!e.formData.phoneNumber : !0, { billingFields: u, shippingFields: y } = t.checkoutProfile?.layout ?? {}, p = /* @__PURE__ */ new Set(["US", "CA"]), g = (f, S) => {
2310
+ ) ? !!(e.formData.billingAddress?.firstName || e.formData.billingAddress?.lastName || e.formData.shippingAddress?.firstName || e.formData.shippingAddress?.lastName) : !!e.formData.name, l = t.checkoutProfile?.layout.phoneNumber?.enabled ?? !1 ? !!e.formData.phoneNumber : !0, { billingFields: p, shippingFields: y } = t.checkoutProfile?.layout ?? {}, u = /* @__PURE__ */ new Set(["US", "CA"]), g = (f, v) => {
2287
2311
  if (!f) return !0;
2288
- const C = S?.country ?? "";
2289
- return Object.entries(f).every(([N, A]) => !A?.enabled || N === "state" && (!p.has(C) || A.hiddenForCountries?.includes(C)) ? !0 : !!S?.[N]?.trim());
2312
+ const E = v?.country ?? "";
2313
+ return Object.entries(f).every(([N, x]) => !x?.enabled || N === "state" && (!u.has(E) || x.hiddenForCountries?.includes(E)) ? !0 : !!v?.[N]?.trim());
2290
2314
  }, h = !this.isVgsMode || Object.values(this.vgsFieldsState).every(
2291
2315
  (f) => f?.isValid === !0
2292
- ), v = this.isVgsMode ? !!e.formData.email && l && h && g(u, e.formData.billingAddress) && g(y, e.formData.shippingAddress) : !!e.formData.email && l && m && !!e.formData.cardNumber && !!e.formData.cardCvv && !!e.formData.cardExpiry && g(u, e.formData.billingAddress) && g(y, e.formData.shippingAddress);
2293
- return d || !v || this.isSubmitting;
2316
+ ), b = this.isVgsMode ? !!e.formData.email && l && h && g(p, e.formData.billingAddress) && g(y, e.formData.shippingAddress) : !!e.formData.email && l && m && !!e.formData.cardNumber && !!e.formData.cardCvv && !!e.formData.cardExpiry && g(p, e.formData.billingAddress) && g(y, e.formData.shippingAddress);
2317
+ return d || !b || this.isSubmitting;
2294
2318
  }
2295
2319
  setSubmitting(e) {
2296
2320
  this.isSubmitting = e;
@@ -2306,9 +2330,9 @@ class Ft {
2306
2330
  for (const [s, a] of Object.entries(this.vgsFieldsState)) {
2307
2331
  if (!a?.isTouched || a.isFocused || a.isValid)
2308
2332
  continue;
2309
- const n = a.errors?.[0];
2310
- if (!n) continue;
2311
- const r = we(s, n.code);
2333
+ const i = a.errors?.[0];
2334
+ if (!i) continue;
2335
+ const r = Pe(s, i.code);
2312
2336
  r && (t[s] = e(r));
2313
2337
  }
2314
2338
  return t;
@@ -2320,18 +2344,18 @@ class Ft {
2320
2344
  this.fontCleanup && (this.fontCleanup(), this.fontCleanup = void 0);
2321
2345
  }
2322
2346
  }
2323
- class Mt extends k {
2347
+ class Nt extends A {
2324
2348
  titleElement;
2325
2349
  constructor(e = {}) {
2326
2350
  super("div", ["blur-bg"]);
2327
2351
  const t = D.createDiv(["loader"]);
2328
- this.titleElement = new k("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
2352
+ this.titleElement = new A("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
2329
2353
  }
2330
2354
  setText(e) {
2331
2355
  return this.titleElement.setText(e), this;
2332
2356
  }
2333
2357
  }
2334
- const ce = {
2358
+ const he = {
2335
2359
  street: "",
2336
2360
  firstName: "",
2337
2361
  lastName: "",
@@ -2339,16 +2363,16 @@ const ce = {
2339
2363
  city: "",
2340
2364
  zipCode: "",
2341
2365
  country: ""
2342
- }, he = (i, e) => {
2366
+ }, ue = (n, e) => {
2343
2367
  const t = {}, s = `${e}.`;
2344
- return Object.keys(i).forEach((a) => {
2368
+ return Object.keys(n).forEach((a) => {
2345
2369
  if (a.startsWith(s)) {
2346
- const n = a.slice(s.length);
2347
- t[n] = i[a];
2370
+ const i = a.slice(s.length);
2371
+ t[i] = n[a];
2348
2372
  }
2349
2373
  }), t;
2350
2374
  };
2351
- class Nt {
2375
+ class wt {
2352
2376
  formElement;
2353
2377
  componentManager;
2354
2378
  onLoadingStateChange;
@@ -2382,13 +2406,13 @@ class Nt {
2382
2406
  !!(e.errors.name && e.touched.name),
2383
2407
  e.errors.name
2384
2408
  ), this.componentManager.updateBillingAddressSection(
2385
- e.formData.billingAddress ?? ce,
2409
+ e.formData.billingAddress ?? he,
2386
2410
  e.errors.billingAddress ?? {},
2387
- he(e.touched, "billingAddress")
2411
+ ue(e.touched, "billingAddress")
2388
2412
  ), this.componentManager.updateShippingAddressSection(
2389
- e.formData.shippingAddress ?? ce,
2413
+ e.formData.shippingAddress ?? he,
2390
2414
  e.errors.shippingAddress ?? {},
2391
- he(e.touched, "shippingAddress")
2415
+ ue(e.touched, "shippingAddress")
2392
2416
  ), this.componentManager.updateSubmitButton(t);
2393
2417
  }
2394
2418
  setLoadingState(e) {
@@ -2396,10 +2420,10 @@ class Nt {
2396
2420
  this.onLoadingStateChange(e);
2397
2421
  return;
2398
2422
  }
2399
- e ? (this.hideSkeleton(), this.formSkeleton = new pe(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
2423
+ e ? (this.hideSkeleton(), this.formSkeleton = new ge(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
2400
2424
  }
2401
2425
  showSpinner(e) {
2402
- this.hideSpinner(), this.spinner = new Mt({ text: e }), this.formElement.appendChild(this.spinner.getElement());
2426
+ this.hideSpinner(), this.spinner = new Nt({ text: e }), this.formElement.appendChild(this.spinner.getElement());
2403
2427
  }
2404
2428
  hideSpinner() {
2405
2429
  this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
@@ -2408,7 +2432,7 @@ class Nt {
2408
2432
  this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0);
2409
2433
  }
2410
2434
  setErrorMessage(e) {
2411
- this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new Pe({ message: e }), this.formElement.insertBefore(
2435
+ this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new ke({ message: e }), this.formElement.insertBefore(
2412
2436
  this.alert.getElement(),
2413
2437
  this.formElement.firstChild
2414
2438
  );
@@ -2420,7 +2444,7 @@ class Nt {
2420
2444
  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);
2421
2445
  }
2422
2446
  }
2423
- const x = (i) => ({
2447
+ const T = (n) => ({
2424
2448
  street: "",
2425
2449
  firstName: "",
2426
2450
  lastName: "",
@@ -2428,14 +2452,14 @@ const x = (i) => ({
2428
2452
  city: "",
2429
2453
  zipCode: "",
2430
2454
  country: "",
2431
- ...i
2455
+ ...n
2432
2456
  });
2433
- class wt extends k {
2457
+ class Pt extends A {
2434
2458
  options;
2435
- formManager = dt();
2459
+ formManager = ct();
2436
2460
  checkoutProfile;
2437
- translation = ke();
2438
- focusManager = new Ae();
2461
+ translation = Ae();
2462
+ focusManager = new xe();
2439
2463
  // Managers
2440
2464
  componentManager;
2441
2465
  eventHandler;
@@ -2446,7 +2470,7 @@ class wt extends k {
2446
2470
  vgsJwt;
2447
2471
  vgsCardResult;
2448
2472
  constructor(e) {
2449
- super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new T()), this.checkoutProfile = lt({
2473
+ super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new L()), this.checkoutProfile = dt({
2450
2474
  appearance: e.appearance
2451
2475
  }), e.locale && this.translation.setLocale(e.locale), this.componentManager = new Et({
2452
2476
  formElement: this.element,
@@ -2465,11 +2489,11 @@ class wt extends k {
2465
2489
  environment: e.environment,
2466
2490
  vgsService: this.vgsService,
2467
2491
  onVgsStateChange: (t) => this.handleVgsStateChange(t)
2468
- }), this.uiManager = new Nt({
2492
+ }), this.uiManager = new wt({
2469
2493
  formElement: this.element,
2470
2494
  componentManager: this.componentManager,
2471
2495
  onLoadingStateChange: e.onLoadingStateChange
2472
- }), this.stateCoordinator = new Ft({
2496
+ }), this.stateCoordinator = new Mt({
2473
2497
  formManager: this.formManager,
2474
2498
  checkoutProfile: this.checkoutProfile,
2475
2499
  componentManager: this.componentManager,
@@ -2479,7 +2503,7 @@ class wt extends k {
2479
2503
  onError: (t) => this.uiManager.setErrorMessage(t),
2480
2504
  onLoadingChange: (t) => this.uiManager.setLoadingState(t),
2481
2505
  getInitialFormData: () => this._getFormStateData().formData
2482
- }), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new Ct({
2506
+ }), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new Ft({
2483
2507
  formManager: this.formManager,
2484
2508
  focusManager: this.focusManager,
2485
2509
  onFormSubmit: async () => this.handleSubmit(),
@@ -2504,12 +2528,12 @@ class wt extends k {
2504
2528
  },
2505
2529
  ...e.initialValues.name && { name: e.initialValues.name },
2506
2530
  ...e.initialValues.billingAddress && {
2507
- billingAddress: x(
2531
+ billingAddress: T(
2508
2532
  e.initialValues.billingAddress
2509
2533
  )
2510
2534
  },
2511
2535
  ...e.initialValues.shippingAddress && {
2512
- shippingAddress: x(
2536
+ shippingAddress: T(
2513
2537
  e.initialValues.shippingAddress
2514
2538
  )
2515
2539
  }
@@ -2526,10 +2550,10 @@ class wt extends k {
2526
2550
  cardNumber: "",
2527
2551
  cardCvv: "",
2528
2552
  ...t?.billingAddress && {
2529
- billingAddress: x(t.billingAddress)
2553
+ billingAddress: T(t.billingAddress)
2530
2554
  },
2531
2555
  ...t?.shippingAddress && {
2532
- shippingAddress: x(t.shippingAddress)
2556
+ shippingAddress: T(t.shippingAddress)
2533
2557
  }
2534
2558
  },
2535
2559
  errors: e.errors || {},
@@ -2556,11 +2580,11 @@ class wt extends k {
2556
2580
  phoneNumber: "",
2557
2581
  phoneCountryCode: e.checkoutProfile.layout.phoneNumber.defaultCountry?.toUpperCase() || "US"
2558
2582
  }), e.checkoutProfile.layout.billingFields && this.formManager.getFormState().formData.billingAddress === void 0 && this.formManager.setFormData({
2559
- billingAddress: x()
2583
+ billingAddress: T()
2560
2584
  }), e.checkoutProfile.layout.shippingFields && this.formManager.getFormState().formData.shippingAddress === void 0 && this.formManager.setFormData({
2561
- shippingAddress: x()
2585
+ shippingAddress: T()
2562
2586
  });
2563
- const { formData: t, errors: s, touched: a } = this._getFormStateData(), n = pt(
2587
+ const { formData: t, errors: s, touched: a } = this._getFormStateData(), i = gt(
2564
2588
  e.checkoutProfile.layout
2565
2589
  );
2566
2590
  try {
@@ -2581,7 +2605,7 @@ class wt extends k {
2581
2605
  } catch (o) {
2582
2606
  console.error("Failed to create email field:", o);
2583
2607
  }
2584
- if (n) {
2608
+ if (i) {
2585
2609
  try {
2586
2610
  this.componentManager.createBillingAddressSection(
2587
2611
  e.checkoutProfile,
@@ -2624,7 +2648,7 @@ class wt extends k {
2624
2648
  } catch (o) {
2625
2649
  console.error("Failed to create card section:", o);
2626
2650
  }
2627
- if (!Z(
2651
+ if (!J(
2628
2652
  e.checkoutProfile.layout
2629
2653
  ))
2630
2654
  try {
@@ -2662,12 +2686,12 @@ class wt extends k {
2662
2686
  */
2663
2687
  inferCardholderName() {
2664
2688
  const e = this.checkoutProfile.getState();
2665
- if (!e.checkoutProfile || !Z(
2689
+ if (!e.checkoutProfile || !J(
2666
2690
  e.checkoutProfile.layout
2667
2691
  )) return;
2668
2692
  const { formData: s } = this._getFormStateData(), a = s.billingAddress ?? s.shippingAddress;
2669
2693
  if (!a) return;
2670
- const n = a.firstName?.trim() ?? "", r = a.lastName?.trim() ?? "", o = [n, r].filter(Boolean).join(" ");
2694
+ const i = a.firstName?.trim() ?? "", r = a.lastName?.trim() ?? "", o = [i, r].filter(Boolean).join(" ");
2671
2695
  o && this.formManager.setFormData({ name: o });
2672
2696
  }
2673
2697
  /**
@@ -2678,10 +2702,10 @@ class wt extends k {
2678
2702
  inferAddresses() {
2679
2703
  const e = this.checkoutProfile.getState();
2680
2704
  if (!e.checkoutProfile) return;
2681
- const { billingFields: t, shippingFields: s } = e.checkoutProfile.layout, a = t && Object.values(t).some((o) => o?.enabled), n = s && Object.values(s).some((o) => o?.enabled), { formData: r } = this._getFormStateData();
2682
- !a && n && r.shippingAddress ? this.formManager.setFormData({
2705
+ const { billingFields: t, shippingFields: s } = e.checkoutProfile.layout, a = t && Object.values(t).some((o) => o?.enabled), i = s && Object.values(s).some((o) => o?.enabled), { formData: r } = this._getFormStateData();
2706
+ !a && i && r.shippingAddress ? this.formManager.setFormData({
2683
2707
  billingAddress: { ...r.shippingAddress }
2684
- }) : !n && a && r.billingAddress && this.formManager.setFormData({
2708
+ }) : !i && a && r.billingAddress && this.formManager.setFormData({
2685
2709
  shippingAddress: { ...r.billingAddress }
2686
2710
  });
2687
2711
  }
@@ -2769,8 +2793,8 @@ class wt extends k {
2769
2793
  this.eventHandler.handleKeyDown
2770
2794
  ), this.componentManager.cleanup(), this.uiManager.cleanup(), this.getElement().remove();
2771
2795
  }
2772
- associatePayment(e, t, s, a, n) {
2773
- this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), n && !this.vgsService && (this.vgsJwt = n, this.vgsService = new T(), this.componentManager.setVgsService(this.vgsService), this.stateCoordinator.setVgsMode(!0), this.vgsService.init(this.options.environment).then((o) => {
2796
+ associatePayment(e, t, s, a, i) {
2797
+ this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), i && !this.vgsService && (this.vgsJwt = i, this.vgsService = new L(), this.componentManager.setVgsService(this.vgsService), this.stateCoordinator.setVgsMode(!0), this.vgsService.init(this.options.environment).then((o) => {
2774
2798
  this.vgsService?.createForm(
2775
2799
  o,
2776
2800
  (d) => this.handleVgsStateChange(d)
@@ -2783,7 +2807,7 @@ class wt extends k {
2783
2807
  e,
2784
2808
  t,
2785
2809
  a
2786
- ), !n && this.checkoutProfile.getState().checkoutProfile && this.renderFormComponents();
2810
+ ), !i && this.checkoutProfile.getState().checkoutProfile && this.renderFormComponents();
2787
2811
  const r = this.checkoutProfile.getState();
2788
2812
  if (r.checkoutProfile) {
2789
2813
  const { formData: o } = this._getFormStateData();
@@ -2795,7 +2819,7 @@ class wt extends k {
2795
2819
  }
2796
2820
  }
2797
2821
  }
2798
- class Pt {
2822
+ class kt {
2799
2823
  container = null;
2800
2824
  options;
2801
2825
  onSubmit;
@@ -2819,7 +2843,7 @@ class Pt {
2819
2843
  }
2820
2844
  }
2821
2845
  renderForm(e) {
2822
- this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new wt({
2846
+ this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new Pt({
2823
2847
  apiKey: this.options.apiKey,
2824
2848
  onSubmit: this.onSubmit,
2825
2849
  locale: this.options.locale,
@@ -2846,17 +2870,17 @@ class Pt {
2846
2870
  clearError() {
2847
2871
  this.form && this.form.clearErrorMessage();
2848
2872
  }
2849
- async associatePayment(e, t, s, a, n) {
2850
- this.options.paymentId = e, this.options.checkoutKey = t, this.options.checkoutDetails = a, this.options.vgsJwt = n, this.form && this.form.associatePayment(
2873
+ async associatePayment(e, t, s, a, i) {
2874
+ this.options.paymentId = e, this.options.checkoutKey = t, this.options.checkoutDetails = a, this.options.vgsJwt = i, this.form && this.form.associatePayment(
2851
2875
  e,
2852
2876
  t,
2853
2877
  s,
2854
2878
  a,
2855
- n
2879
+ i
2856
2880
  );
2857
2881
  }
2858
2882
  }
2859
- class kt {
2883
+ class At {
2860
2884
  state;
2861
2885
  listeners = /* @__PURE__ */ new Set();
2862
2886
  constructor(e) {
@@ -2878,16 +2902,17 @@ class kt {
2878
2902
  this.listeners.forEach((t) => t(e));
2879
2903
  }
2880
2904
  }
2881
- const At = "en";
2905
+ const xt = "en";
2882
2906
  class Dt {
2883
2907
  config;
2908
+ _callbacks;
2884
2909
  paymentState;
2885
2910
  apiService;
2886
2911
  formManager;
2887
2912
  stateManager;
2888
2913
  sessionId;
2889
2914
  constructor(e) {
2890
- this.config = this.validateConfig(e), this.paymentState = {}, this.sessionId = crypto.randomUUID(), rt({
2915
+ this.config = this.validateConfig(e), this._callbacks = { ...this.config.callbacks }, this.paymentState = {}, this.sessionId = crypto.randomUUID(), ot({
2891
2916
  environment: this.config.environment,
2892
2917
  sessionId: this.sessionId
2893
2918
  }), M(F.CHECKOUT_INITIALIZED, {
@@ -2895,17 +2920,17 @@ class Dt {
2895
2920
  }), this.apiService = new De(
2896
2921
  this.config.apiKey,
2897
2922
  this.config.environment
2898
- ), this.stateManager = new kt({
2923
+ ), this.stateManager = new At({
2899
2924
  mounted: !1,
2900
2925
  form: null
2901
- }), this.formManager = new Pt(
2926
+ }), this.formManager = new kt(
2902
2927
  {
2903
2928
  locale: this.config.locale,
2904
2929
  apiKey: this.config.apiKey,
2905
2930
  disableErrorMessages: this.config.disableErrorMessages,
2906
2931
  environment: this.config.environment,
2907
2932
  appearance: this.config.appearance,
2908
- onLoadingStateChange: this.config.callbacks.onLoadingStateChange,
2933
+ onLoadingStateChange: (...t) => this._callbacks.onLoadingStateChange?.(...t),
2909
2934
  initialValues: this.config.initialValues
2910
2935
  },
2911
2936
  this.handleSubmit.bind(this)
@@ -2920,7 +2945,7 @@ class Dt {
2920
2945
  apiKey: e.apiKey,
2921
2946
  returnUrl: e.returnUrl,
2922
2947
  environment: e.environment,
2923
- locale: e.locale || At,
2948
+ locale: e.locale || xt,
2924
2949
  disableErrorMessages: e.disableErrorMessages ?? !1,
2925
2950
  manualActionHandling: e.manualActionHandling ?? !1,
2926
2951
  appearance: e.appearance,
@@ -2971,15 +2996,15 @@ class Dt {
2971
2996
  });
2972
2997
  const a = performance.now();
2973
2998
  try {
2974
- const n = await this.apiService.authorizePayment({
2999
+ const i = await this.apiService.authorizePayment({
2975
3000
  checkoutKey: this.paymentState.checkoutKey,
2976
3001
  formData: e || null,
2977
3002
  paymentId: this.paymentState.paymentId,
2978
3003
  returnUrl: this.config.returnUrl,
2979
3004
  applePayData: t
2980
3005
  }), r = performance.now() - a;
2981
- re(
2982
- te.PAYMENT_AUTHORIZATION_TIME,
3006
+ oe(
3007
+ se.PAYMENT_AUTHORIZATION_TIME,
2983
3008
  r,
2984
3009
  "ms",
2985
3010
  {
@@ -2990,11 +3015,11 @@ class Dt {
2990
3015
  ), M(F.PAYMENT_SUBMIT_SUCCESS, {
2991
3016
  payment_id: this.paymentState.paymentId,
2992
3017
  payment_method: s
2993
- }), this.handlePaymentResponse(n);
2994
- } catch (n) {
3018
+ }), this.handlePaymentResponse(i);
3019
+ } catch (i) {
2995
3020
  const r = performance.now() - a;
2996
- re(
2997
- te.PAYMENT_AUTHORIZATION_TIME,
3021
+ oe(
3022
+ se.PAYMENT_AUTHORIZATION_TIME,
2998
3023
  r,
2999
3024
  "ms",
3000
3025
  {
@@ -3005,29 +3030,27 @@ class Dt {
3005
3030
  ), M(F.PAYMENT_SUBMIT_FAILED, {
3006
3031
  payment_id: this.paymentState.paymentId,
3007
3032
  payment_method: s,
3008
- error_message: n.details?.message ?? "Unknown error"
3009
- }), this.handleAuthorizationError(n);
3033
+ error_message: i.details?.message ?? "Unknown error"
3034
+ }), this.handleAuthorizationError(i);
3010
3035
  }
3011
3036
  }
3012
3037
  handlePaymentResponse(e) {
3013
3038
  if (e.latestTransaction.status === "authorized" && (M(F.PAYMENT_AUTHORIZED, {
3014
3039
  payment_id: this.paymentState.paymentId ?? "",
3015
3040
  status: e.latestTransaction.status
3016
- }), this.config.callbacks.onPaymentSucceeded?.(
3017
- e.latestTransaction.status
3018
- )), e.latestTransaction.status === "failed" && (M(F.PAYMENT_FAILED, {
3041
+ }), this._callbacks.onPaymentSucceeded?.(e.latestTransaction.status)), e.latestTransaction.status === "failed" && (M(F.PAYMENT_FAILED, {
3019
3042
  payment_id: this.paymentState.paymentId ?? "",
3020
3043
  status: e.latestTransaction.status
3021
- }), this.config.callbacks.onPaymentFailed?.(e.latestTransaction.status)), e.status === "requires_action") {
3044
+ }), this._callbacks.onPaymentFailed?.(e.latestTransaction.status)), e.status === "requires_action") {
3022
3045
  const { redirectUrl: t } = e.action;
3023
3046
  M(F.PAYMENT_ACTION_REQUIRED, {
3024
3047
  payment_id: this.paymentState.paymentId ?? "",
3025
3048
  status: e.status
3026
- }), this.config.manualActionHandling ? this.config.callbacks.onActionRequired?.(t) : globalThis.location.href = t;
3049
+ }), this.config.manualActionHandling ? this._callbacks.onActionRequired?.(t) : globalThis.location.href = t;
3027
3050
  }
3028
3051
  }
3029
3052
  handleAuthorizationError(e) {
3030
- this.config.callbacks.onPaymentFailed?.(e.details?.message);
3053
+ this._callbacks.onPaymentFailed?.(e.details?.message);
3031
3054
  const { form: t } = this.stateManager.getState();
3032
3055
  t && this.formManager.update({ errorMsg: e.details?.message });
3033
3056
  }
@@ -3070,7 +3093,7 @@ class Dt {
3070
3093
  "Invalid response: supportedPaymentMethods must be an array"
3071
3094
  );
3072
3095
  if (!s.supportedPaymentMethods.every(
3073
- (n) => typeof n == "string"
3096
+ (i) => typeof i == "string"
3074
3097
  ))
3075
3098
  throw new Error(
3076
3099
  "Invalid response: all supportedPaymentMethods must be strings"
@@ -3081,7 +3104,7 @@ class Dt {
3081
3104
  countryCode: s.countryCode
3082
3105
  };
3083
3106
  const a = s.supportedPaymentMethods.reduce(
3084
- (n, r) => (n[r] = !0, n),
3107
+ (i, r) => (i[r] = !0, i),
3085
3108
  {}
3086
3109
  );
3087
3110
  await this.formManager.associatePayment(
@@ -3099,26 +3122,29 @@ class Dt {
3099
3122
  throw M(F.PAYMENT_ASSOCIATION_FAILED, {
3100
3123
  payment_id: e,
3101
3124
  error_message: s instanceof Error ? s.message : "Unknown error"
3102
- }), ot(
3125
+ }), lt(
3103
3126
  s instanceof Error ? s : new Error("Failed to associate payment"),
3104
3127
  { payment_id: e }
3105
3128
  ), s;
3106
3129
  }
3107
3130
  }
3131
+ setCallbacks(e) {
3132
+ Object.assign(this._callbacks, e);
3133
+ }
3108
3134
  }
3109
3135
  typeof globalThis < "u" && (globalThis.OdusCheckout = Dt);
3110
3136
  export {
3111
3137
  Dt as OdusCheckout,
3112
- Vt as deLocale,
3113
- _t as enLocale,
3114
- Rt as esLocale,
3115
- Bt as frLocale,
3116
- Ut as itLocale,
3117
- Ot as plLocale,
3118
- Ht as ptLocale,
3119
- ot as pushError,
3138
+ _t as deLocale,
3139
+ Rt as enLocale,
3140
+ Bt as esLocale,
3141
+ Ut as frLocale,
3142
+ Ot as itLocale,
3143
+ Ht as plLocale,
3144
+ zt as ptLocale,
3145
+ lt as pushError,
3120
3146
  M as pushEvent,
3121
- xt as pushLog,
3122
- re as pushMeasurement,
3123
- zt as trLocale
3147
+ Tt as pushLog,
3148
+ oe as pushMeasurement,
3149
+ $t as trLocale
3124
3150
  };