@odus/checkout 0.29.0 → 0.30.0-beta.1

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 (7) hide show
  1. package/dist/checkout.es.js +1316 -855
  2. package/dist/elements.es.js +2 -2
  3. package/dist/index.css +1 -1
  4. package/dist/package.json +2 -1
  5. package/dist/phone.js +11 -3
  6. package/dist/shared.js +4352 -1934
  7. package/package.json +2 -1
package/dist/checkout.es.js CHANGED
@@ -1,6 +1,6 @@
1
- import { c as ie, a as ce, f as V, d as he, C as A, I as re, g as ue, S as R, b as Z, e as w, A as me, P as pe, E as fe, l as ge, h as ye, i as be, j as Ee, k as Se, F as Fe, m as ve, n as Ce } from "./shared.js";
2
- import { o as vt, p as Ct, q as Mt, r as Nt, s as Pt, t as At, u as wt, v as kt } from "./shared.js";
3
- const v = {
1
+ import { l as pe, c as de, a as ge, f as U, d as fe, C as P, I as ce, g as ye, S as H, b as Z, H as be, V as J, e as k, A as ve, P as Se, E as Ee, h as Ce, i as Fe, j as Me, k as Ne, m as we, n as Pe, F as ke, o as Ae, p as De } from "./shared.js";
2
+ import { q as Tt, r as Vt, s as _t, t as Bt, u as Ot, v as Rt, w as Ut, x as Ht } from "./shared.js";
3
+ const C = {
4
4
  // Checkout lifecycle events
5
5
  CHECKOUT_INITIALIZED: "checkout.initialized",
6
6
  CHECKOUT_MOUNTED: "checkout.mounted",
@@ -16,88 +16,88 @@ const v = {
16
16
  PAYMENT_AUTHORIZED: "payment.authorized",
17
17
  PAYMENT_FAILED: "payment.failed",
18
18
  PAYMENT_ACTION_REQUIRED: "payment.action_required"
19
- }, G = {
19
+ }, X = {
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
- }, Me = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, Ne = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Pe = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, q = (n) => {
24
- if (!n)
23
+ }, Ie = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, xe = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Le = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, q = (i) => {
24
+ if (!i)
25
25
  return [];
26
- const e = [], t = n.split(`
26
+ const e = [], t = i.split(`
27
27
  `);
28
28
  for (const s of t) {
29
- const i = s.trim();
30
- if (!i)
29
+ const a = s.trim();
30
+ if (!a)
31
31
  continue;
32
- let a = Me.exec(i);
33
- if (a) {
32
+ let n = Ie.exec(a);
33
+ if (n) {
34
34
  e.push({
35
- function: a[1] || "(anonymous)",
36
- filename: a[2],
37
- lineno: parseInt(a[3], 10),
38
- colno: parseInt(a[4], 10)
35
+ function: n[1] || "(anonymous)",
36
+ filename: n[2],
37
+ lineno: parseInt(n[3], 10),
38
+ colno: parseInt(n[4], 10)
39
39
  });
40
40
  continue;
41
41
  }
42
- a = Ne.exec(i) ?? Pe.exec(i), a && e.push({
43
- function: a[1] || "(anonymous)",
44
- filename: a[2],
45
- lineno: parseInt(a[3], 10),
46
- colno: parseInt(a[4], 10)
42
+ n = xe.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)
47
47
  });
48
48
  }
49
49
  return e;
50
- }, Ae = "@odus/telemetry", we = "0.0.1";
51
- let O, x, Y;
52
- const ke = () => {
50
+ }, Te = "@odus/telemetry", Ve = "0.0.1";
51
+ let B, O, Y;
52
+ const _e = () => {
53
53
  if (typeof navigator > "u")
54
54
  return {};
55
- const n = navigator.userAgent;
55
+ const i = navigator.userAgent;
56
56
  let e, t, s;
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 i = /Mobi|Android|iPhone|iPad/i.test(n) || void 0;
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;
59
59
  return {
60
60
  name: e,
61
61
  version: t,
62
62
  os: s,
63
- mobile: i ?? !1,
63
+ mobile: a ?? !1,
64
64
  language: navigator.language,
65
65
  viewportWidth: String(window.innerWidth),
66
66
  viewportHeight: String(window.innerHeight),
67
- userAgent: n
67
+ userAgent: i
68
68
  };
69
- }, Ie = () => typeof window > "u" ? {} : { url: window.location.href }, De = (n) => {
70
- O = void 0, Y = void 0, x = n.sessionTracking?.session ? { id: n.sessionTracking.session.id } : void 0;
71
- }, Te = (n) => {
72
- O = n;
73
- }, Le = () => {
74
- O = void 0;
75
- }, _e = (n) => {
76
- x = n;
77
- }, Be = (n) => {
78
- Y = n;
79
- }, Oe = () => x?.id, xe = (n) => ({
80
- sdk: { name: Ae, version: we },
81
- app: n.app,
82
- user: O,
83
- session: x,
84
- page: Ie(),
85
- browser: ke(),
69
+ }, Be = () => typeof window > "u" ? {} : { url: window.location.href }, Oe = (i) => {
70
+ B = void 0, Y = void 0, O = i.sessionTracking?.session ? { id: i.sessionTracking.session.id } : void 0;
71
+ }, Re = (i) => {
72
+ B = i;
73
+ }, Ue = () => {
74
+ B = void 0;
75
+ }, He = (i) => {
76
+ O = i;
77
+ }, ze = (i) => {
78
+ Y = i;
79
+ }, $e = () => O?.id, je = (i) => ({
80
+ sdk: { name: Te, version: Ve },
81
+ app: i.app,
82
+ user: B,
83
+ session: O,
84
+ page: Be(),
85
+ browser: _e(),
86
86
  view: Y
87
- }), Ue = 30, Ve = 250, Re = 6e4;
88
- let k = [], P = null, W = 0, T = null, L = null;
89
- const He = (n) => {
90
- if (P)
87
+ }), Ke = 30, qe = 250, We = 6e4;
88
+ let A = [], w = null, G = 0, L = null, T = null;
89
+ const Ye = (i) => {
90
+ if (w)
91
91
  return;
92
- const e = n.batching?.sendTimeout ?? Ve;
93
- P = setTimeout(() => {
94
- U(n);
92
+ const e = i.batching?.sendTimeout ?? qe;
93
+ w = setTimeout(() => {
94
+ R(i);
95
95
  }, e);
96
- }, ze = (n, e) => {
96
+ }, Ge = (i, e) => {
97
97
  const t = {
98
- meta: xe(e)
98
+ meta: je(e)
99
99
  };
100
- for (const s of n)
100
+ for (const s of i)
101
101
  switch (s.type) {
102
102
  case "exception":
103
103
  (t.exceptions ??= []).push(s.payload);
@@ -113,248 +113,248 @@ const He = (n) => {
113
113
  break;
114
114
  }
115
115
  return t;
116
- }, je = (n, e, t = !1) => {
117
- const s = JSON.stringify(n), i = Oe(), a = {
116
+ }, Ze = (i, e, t = !1) => {
117
+ const s = JSON.stringify(i), a = $e(), n = {
118
118
  "Content-Type": "application/json"
119
119
  };
120
- if (i && (a["x-faro-session-id"] = i), t && typeof navigator < "u" && navigator.sendBeacon) {
121
- const d = new Blob([s], { type: "application/json" });
122
- navigator.sendBeacon(e, d);
120
+ if (a && (n["x-faro-session-id"] = a), t && typeof navigator < "u" && navigator.sendBeacon) {
121
+ const o = new Blob([s], { type: "application/json" });
122
+ navigator.sendBeacon(e, o);
123
123
  return;
124
124
  }
125
- const r = s.length < Re;
125
+ const r = s.length < We;
126
126
  fetch(e, {
127
127
  method: "POST",
128
- headers: a,
128
+ headers: n,
129
129
  body: s,
130
130
  keepalive: r
131
- }).then((d) => {
132
- if (d.status === 429) {
133
- const l = d.headers.get("Retry-After"), u = l ? parseInt(l, 10) * 1e3 : 3e4;
134
- W = Date.now() + u;
131
+ }).then((o) => {
132
+ if (o.status === 429) {
133
+ const d = o.headers.get("Retry-After"), c = d ? parseInt(d, 10) * 1e3 : 3e4;
134
+ G = Date.now() + c;
135
135
  }
136
136
  }).catch(() => {
137
137
  });
138
- }, U = (n, e = !1) => {
139
- if (P && (clearTimeout(P), P = null), k.length === 0)
138
+ }, R = (i, e = !1) => {
139
+ if (w && (clearTimeout(w), w = null), A.length === 0)
140
140
  return;
141
- if (Date.now() < W) {
142
- k = [];
141
+ if (Date.now() < G) {
142
+ A = [];
143
143
  return;
144
144
  }
145
- const t = k;
146
- k = [];
145
+ const t = A;
146
+ A = [];
147
147
  try {
148
- let s = ze(t, n);
149
- if (n.beforeSend) {
150
- const i = n.beforeSend(s);
151
- if (!i)
148
+ let s = Ge(t, i);
149
+ if (i.beforeSend) {
150
+ const a = i.beforeSend(s);
151
+ if (!a)
152
152
  return;
153
- s = i;
153
+ s = a;
154
154
  }
155
- je(s, n.url, e);
155
+ Ze(s, i.url, e);
156
156
  } catch {
157
157
  }
158
- }, M = (n, e) => {
159
- k.push(n);
160
- const t = e.batching?.itemLimit ?? Ue;
161
- if (k.length >= t) {
162
- U(e);
158
+ }, N = (i, e) => {
159
+ A.push(i);
160
+ const t = e.batching?.itemLimit ?? Ke;
161
+ if (A.length >= t) {
162
+ R(e);
163
163
  return;
164
164
  }
165
- He(e);
166
- }, Ke = (n) => {
167
- if (k = [], W = 0, P && (clearTimeout(P), P = null), typeof document > "u")
165
+ Ye(e);
166
+ }, Je = (i) => {
167
+ if (A = [], G = 0, w && (clearTimeout(w), w = null), typeof document > "u")
168
168
  return;
169
- T && document.removeEventListener("visibilitychange", T), L && window.removeEventListener("pagehide", L);
170
- const e = () => U(n, !0);
171
- T = () => {
169
+ L && document.removeEventListener("visibilitychange", L), T && window.removeEventListener("pagehide", T);
170
+ const e = () => R(i, !0);
171
+ L = () => {
172
172
  document.visibilityState === "hidden" && e();
173
- }, L = e, document.addEventListener("visibilitychange", T), window.addEventListener("pagehide", L);
174
- }, X = () => (/* @__PURE__ */ new Date()).toISOString();
175
- let Q = null, J = null;
176
- const qe = (n) => {
177
- typeof window > "u" || (Q = (e) => {
173
+ }, T = e, document.addEventListener("visibilitychange", L), window.addEventListener("pagehide", T);
174
+ }, Q = () => (/* @__PURE__ */ new Date()).toISOString();
175
+ let ee = null, te = null;
176
+ const Xe = (i) => {
177
+ typeof window > "u" || (ee = (e) => {
178
178
  const t = e.error instanceof Error ? e.error : new Error(e.message);
179
- M({
179
+ N({
180
180
  type: "exception",
181
181
  payload: {
182
182
  type: t.name,
183
183
  value: t.message,
184
- timestamp: X(),
184
+ timestamp: Q(),
185
185
  stacktrace: t.stack ? { frames: q(t.stack) } : void 0
186
186
  }
187
- }, n);
188
- }, J = (e) => {
187
+ }, i);
188
+ }, te = (e) => {
189
189
  const t = e.reason, s = t instanceof Error ? t : new Error(String(t));
190
- M({
190
+ N({
191
191
  type: "exception",
192
192
  payload: {
193
193
  type: s.name,
194
194
  value: s.message,
195
- timestamp: X(),
195
+ timestamp: Q(),
196
196
  stacktrace: s.stack ? { frames: q(s.stack) } : void 0,
197
197
  context: { source: "unhandledrejection" }
198
198
  }
199
- }, n);
200
- }, window.addEventListener("error", Q), window.addEventListener("unhandledrejection", J));
201
- }, ee = "odus_telemetry_session_id", H = () => {
202
- const n = new Uint8Array(16);
203
- return crypto.getRandomValues(n), Array.from(n, (e) => e.toString(16).padStart(2, "0")).join("");
204
- }, $e = (n) => {
205
- if (n)
206
- return n;
199
+ }, i);
200
+ }, window.addEventListener("error", ee), window.addEventListener("unhandledrejection", te));
201
+ }, se = "odus_telemetry_session_id", z = () => {
202
+ const i = new Uint8Array(16);
203
+ return crypto.getRandomValues(i), Array.from(i, (e) => e.toString(16).padStart(2, "0")).join("");
204
+ }, Qe = (i) => {
205
+ if (i)
206
+ return i;
207
207
  if (typeof sessionStorage > "u")
208
- return H();
208
+ return z();
209
209
  try {
210
- const e = sessionStorage.getItem(ee);
210
+ const e = sessionStorage.getItem(se);
211
211
  if (e)
212
212
  return e;
213
- const t = H();
214
- return sessionStorage.setItem(ee, t), t;
213
+ const t = z();
214
+ return sessionStorage.setItem(se, t), t;
215
215
  } catch {
216
- return H();
216
+ return z();
217
217
  }
218
- }, Ye = (n) => {
219
- if (!n.sessionTracking?.enabled)
218
+ }, et = (i) => {
219
+ if (!i.sessionTracking?.enabled)
220
220
  return;
221
- const e = $e(n.sessionTracking.session?.id);
222
- _e({ id: e });
223
- }, z = () => (/* @__PURE__ */ new Date()).toISOString(), j = (n, e) => {
224
- if (typeof PerformanceObserver > "u" || !PerformanceObserver.supportedEntryTypes?.includes(n))
221
+ const e = Qe(i.sessionTracking.session?.id);
222
+ He({ id: e });
223
+ }, $ = () => (/* @__PURE__ */ new Date()).toISOString(), j = (i, e) => {
224
+ if (typeof PerformanceObserver > "u" || !PerformanceObserver.supportedEntryTypes?.includes(i))
225
225
  return;
226
226
  new PerformanceObserver((s) => {
227
- for (const i of s.getEntries())
228
- e(i);
229
- }).observe({ type: n, buffered: !0 });
230
- }, We = (n) => {
227
+ for (const a of s.getEntries())
228
+ e(a);
229
+ }).observe({ type: i, buffered: !0 });
230
+ }, tt = (i) => {
231
231
  if (typeof window > "u")
232
232
  return;
233
233
  j("largest-contentful-paint", (t) => {
234
- M({
234
+ N({
235
235
  type: "measurement",
236
236
  payload: {
237
237
  type: "web-vitals",
238
238
  values: { lcp: t.startTime },
239
- timestamp: z()
239
+ timestamp: $()
240
240
  }
241
- }, n);
241
+ }, i);
242
242
  });
243
243
  let e = 0;
244
244
  j("layout-shift", (t) => {
245
245
  const s = t;
246
- s.hadRecentInput || (e += s.value, M({
246
+ s.hadRecentInput || (e += s.value, N({
247
247
  type: "measurement",
248
248
  payload: {
249
249
  type: "web-vitals",
250
250
  values: { cls: e },
251
- timestamp: z()
251
+ timestamp: $()
252
252
  }
253
- }, n));
253
+ }, i));
254
254
  }), j("event", (t) => {
255
255
  const s = t;
256
- s.duration > 0 && M({
256
+ s.duration > 0 && N({
257
257
  type: "measurement",
258
258
  payload: {
259
259
  type: "web-vitals",
260
260
  values: { inp: s.duration },
261
- timestamp: z()
261
+ timestamp: $()
262
262
  }
263
- }, n);
263
+ }, i);
264
264
  });
265
- }, B = {
265
+ }, _ = {
266
266
  INFO: "info",
267
267
  WARN: "warn",
268
268
  ERROR: "error"
269
- }, _ = () => (/* @__PURE__ */ new Date()).toISOString(), Ze = (n) => {
270
- De(n), Ke(n);
271
- const e = n.instrumentations ?? {
269
+ }, V = () => (/* @__PURE__ */ new Date()).toISOString(), st = (i) => {
270
+ Oe(i), Je(i);
271
+ const e = i.instrumentations ?? {
272
272
  errors: !0,
273
273
  webVitals: !0,
274
274
  session: !0
275
275
  };
276
- return e.session !== !1 && Ye(n), e.errors !== !1 && qe(n), e.webVitals !== !1 && We(n), {
276
+ return e.session !== !1 && et(i), e.errors !== !1 && Xe(i), e.webVitals !== !1 && tt(i), {
277
277
  pushError(t, s) {
278
- M({
278
+ N({
279
279
  type: "exception",
280
280
  payload: {
281
281
  type: t.name,
282
282
  value: t.message,
283
- timestamp: _(),
283
+ timestamp: V(),
284
284
  stacktrace: t.stack ? { frames: q(t.stack) } : void 0,
285
285
  context: s?.context
286
286
  }
287
- }, n);
287
+ }, i);
288
288
  },
289
289
  pushEvent(t, s) {
290
- M({
290
+ N({
291
291
  type: "event",
292
292
  payload: {
293
293
  name: t,
294
- timestamp: _(),
294
+ timestamp: V(),
295
295
  attributes: s
296
296
  }
297
- }, n);
297
+ }, i);
298
298
  },
299
299
  pushMeasurement(t) {
300
- M({
300
+ N({
301
301
  type: "measurement",
302
302
  payload: {
303
303
  type: t.type,
304
304
  values: t.values,
305
- timestamp: _(),
305
+ timestamp: V(),
306
306
  context: t.context
307
307
  }
308
- }, n);
308
+ }, i);
309
309
  },
310
310
  pushLog(t, s) {
311
- M({
311
+ N({
312
312
  type: "log",
313
313
  payload: {
314
314
  message: t.join(" "),
315
- level: s?.level ?? B.INFO,
316
- timestamp: _(),
315
+ level: s?.level ?? _.INFO,
316
+ timestamp: V(),
317
317
  context: s?.context
318
318
  }
319
- }, n);
319
+ }, i);
320
320
  },
321
321
  setUser(t) {
322
- Te(t);
322
+ Re(t);
323
323
  },
324
324
  resetUser() {
325
- Le();
325
+ Ue();
326
326
  },
327
327
  setView(t) {
328
- Be(t);
328
+ ze(t);
329
329
  },
330
330
  flush() {
331
- U(n);
331
+ R(i);
332
332
  }
333
333
  };
334
- }, Ge = (n) => n === "test" ? "https://sandbox-analytics.odus.com/collect" : "https://analytics.odus.com/collect", Xe = () => {
334
+ }, nt = (i) => i === "test" ? "https://sandbox-analytics.odus.com/collect" : "https://analytics.odus.com/collect", it = () => {
335
335
  if (typeof window > "u")
336
336
  return !1;
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");
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");
339
339
  };
340
- let F = null;
341
- const Qe = (n) => {
342
- if (F)
343
- return F;
344
- if (Xe())
340
+ let E = null;
341
+ const at = (i) => {
342
+ if (E)
343
+ return E;
344
+ if (it())
345
345
  return null;
346
- const e = Ge(n.environment);
347
- return F = Ze({
346
+ const e = nt(i.environment);
347
+ return E = st({
348
348
  url: e,
349
349
  app: {
350
350
  name: "odus-checkout",
351
- environment: n.environment === "test" ? "sandbox" : "production"
351
+ environment: i.environment === "test" ? "sandbox" : "production"
352
352
  },
353
353
  isolate: !0,
354
354
  sessionTracking: {
355
355
  enabled: !0,
356
356
  session: {
357
- id: n.sessionId
357
+ id: i.sessionId
358
358
  }
359
359
  },
360
360
  beforeSend: (t) => {
@@ -368,44 +368,270 @@ const Qe = (n) => {
368
368
  "card",
369
369
  "cvv",
370
370
  "pan"
371
- ].forEach((a) => {
372
- s.searchParams.has(a) && s.searchParams.set(a, "[REDACTED]");
371
+ ].forEach((n) => {
372
+ s.searchParams.has(n) && s.searchParams.set(n, "[REDACTED]");
373
373
  }), t.meta.view.name = s.toString();
374
374
  } catch {
375
375
  }
376
376
  return t;
377
377
  }
378
- }), F;
379
- }, Je = (n, e) => {
380
- F && F.pushError(n, { context: e });
381
- }, C = (n, e) => {
382
- F && F.pushEvent(n, e);
383
- }, te = (n, e, t, s) => {
384
- F && F.pushMeasurement({
385
- type: n,
386
- values: { [n]: e },
378
+ }), E;
379
+ }, rt = (i, e) => {
380
+ E && E.pushError(i, { context: e });
381
+ }, F = (i, e) => {
382
+ E && E.pushEvent(i, e);
383
+ }, ne = (i, e, t, s) => {
384
+ E && E.pushMeasurement({
385
+ type: i,
386
+ values: { [i]: e },
387
387
  context: {
388
388
  ...t && { unit: t },
389
389
  ...s
390
390
  }
391
391
  });
392
- }, Et = (n, e = "info", t) => {
393
- if (!F) return;
392
+ }, It = (i, e = "info", t) => {
393
+ if (!E) return;
394
394
  const s = {
395
- info: B.INFO,
396
- warn: B.WARN,
397
- error: B.ERROR
395
+ info: _.INFO,
396
+ warn: _.WARN,
397
+ error: _.ERROR
398
398
  };
399
- F.pushLog([n], {
399
+ E.pushLog([i], {
400
400
  level: s[e],
401
401
  context: t
402
402
  });
403
+ }, ie = {
404
+ test: "tntwpdhfwng",
405
+ live: "TBD"
406
+ }, ae = {
407
+ test: "sandbox",
408
+ live: "live"
403
409
  };
404
- function K(n) {
410
+ class I {
411
+ vgsForm = null;
412
+ fields = [];
413
+ readyResolve;
414
+ readyPromise;
415
+ environment;
416
+ constructor() {
417
+ this.readyPromise = new Promise((e) => {
418
+ this.readyResolve = e;
419
+ });
420
+ }
421
+ async init(e) {
422
+ return this.environment = e, await pe({
423
+ vaultId: ie[e],
424
+ environment: ae[e],
425
+ version: "3.2.2"
426
+ });
427
+ }
428
+ createForm(e, t) {
429
+ if (!this.environment)
430
+ throw new Error("VGS not initialized — call init() first");
431
+ return this.vgsForm = e.create(
432
+ ie[this.environment],
433
+ ae[this.environment],
434
+ t
435
+ ), this.readyResolve?.(), this.vgsForm;
436
+ }
437
+ whenReady() {
438
+ return this.readyPromise;
439
+ }
440
+ mountCardFields(e, t, s, a) {
441
+ if (!this.vgsForm)
442
+ throw new Error("VGS form not initialized");
443
+ if (e.cardNumber) {
444
+ const n = this.vgsForm.cardNumberField(e.cardNumber, {
445
+ placeholder: s.cardNumber,
446
+ autoComplete: "cc-number",
447
+ validations: ["required", "validCardNumber"],
448
+ addCardBrands: [
449
+ {
450
+ type: "visa",
451
+ pattern: /^4/,
452
+ format: /(\d{1,4})/g,
453
+ length: [16],
454
+ cvcLength: [3],
455
+ luhn: !0
456
+ },
457
+ {
458
+ type: "mastercard",
459
+ pattern: /^(5[1-5]|2[2-7])/,
460
+ format: /(\d{1,4})/g,
461
+ length: [16],
462
+ cvcLength: [3],
463
+ luhn: !0
464
+ },
465
+ {
466
+ type: "american-express",
467
+ pattern: /^3[47]/,
468
+ format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
469
+ length: [15],
470
+ cvcLength: [4],
471
+ luhn: !0
472
+ },
473
+ {
474
+ type: "discover",
475
+ pattern: /^(6011|65|64[4-9]|622)/,
476
+ format: /(\d{1,4})/g,
477
+ length: [16, 19],
478
+ cvcLength: [3],
479
+ luhn: !0
480
+ }
481
+ ],
482
+ css: t
483
+ });
484
+ n.on("update", (r) => {
485
+ a && a(I.mapCardType(r.cardType));
486
+ }), this.fields.push(n);
487
+ }
488
+ if (e.cardExpiry) {
489
+ const n = this.vgsForm.cardExpirationDateField(
490
+ e.cardExpiry,
491
+ {
492
+ placeholder: s.cardExpiry,
493
+ autoComplete: "cc-exp",
494
+ validations: ["required", "validCardExpirationDate"],
495
+ css: t
496
+ }
497
+ );
498
+ this.fields.push(n);
499
+ }
500
+ if (e.cardCvv) {
501
+ const n = this.vgsForm.cardCVCField(e.cardCvv, {
502
+ placeholder: s.cardCvv,
503
+ autoComplete: "cc-csc",
504
+ validations: ["required", "validCardSecurityCode"],
505
+ css: t
506
+ });
507
+ this.fields.push(n);
508
+ }
509
+ if (e.cardholderName) {
510
+ const n = this.vgsForm.cardholderNameField(
511
+ e.cardholderName,
512
+ {
513
+ placeholder: s.cardholderName,
514
+ autoComplete: "cc-name",
515
+ validations: ["required"],
516
+ css: t
517
+ }
518
+ );
519
+ this.fields.push(n);
520
+ }
521
+ }
522
+ waitForFieldsReady() {
523
+ return Promise.all(this.fields.map((e) => e.promise));
524
+ }
525
+ createCard(e) {
526
+ if (!this.vgsForm)
527
+ return Promise.reject(new Error("VGS form not initialized"));
528
+ const t = this.vgsForm;
529
+ return new Promise((s, a) => {
530
+ t.createCard(
531
+ { auth: e },
532
+ (n, r) => {
533
+ if (r?.errors) {
534
+ a(r.errors);
535
+ return;
536
+ }
537
+ const o = r?.data;
538
+ if (!o?.id) {
539
+ a(new Error("Card creation failed: no card ID returned"));
540
+ return;
541
+ }
542
+ if (n === 303) {
543
+ this.patchCard(e, o.id).then(s).catch(a);
544
+ return;
545
+ }
546
+ s(I.extractCardResult(o));
547
+ },
548
+ (n) => {
549
+ a(n);
550
+ }
551
+ );
552
+ });
553
+ }
554
+ patchCard(e, t) {
555
+ if (!this.vgsForm || !this.environment)
556
+ return Promise.reject(new Error("VGS not initialized"));
557
+ const s = this.vgsForm;
558
+ return new Promise((a, n) => {
559
+ s.submit(
560
+ `/cards/${t}`,
561
+ {
562
+ method: "PATCH",
563
+ headers: {
564
+ Authorization: `Bearer ${e}`,
565
+ "Content-Type": "application/vnd.api+json"
566
+ },
567
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
568
+ data: (r) => ({
569
+ data: {
570
+ attributes: {
571
+ cvc: r.cvc,
572
+ exp_month: r["exp-date"].month,
573
+ exp_year: r["exp-date"].year
574
+ }
575
+ }
576
+ })
577
+ },
578
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
579
+ (r, o) => {
580
+ if (r >= 400 || o?.errors) {
581
+ n(o?.errors ?? new Error("Card update failed"));
582
+ return;
583
+ }
584
+ const d = o?.data;
585
+ if (!d?.id) {
586
+ n(new Error("Card update failed: no card ID returned"));
587
+ return;
588
+ }
589
+ const c = I.extractCardResult(d), p = o.included?.find(
590
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
591
+ (b) => b.type === "card_updates"
592
+ );
593
+ p?.attributes?.updated_values?.length && (c.updatedValues = p.attributes.updated_values), a(c);
594
+ },
595
+ (r) => {
596
+ n(r);
597
+ }
598
+ );
599
+ });
600
+ }
601
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
602
+ static extractCardResult(e) {
603
+ const t = e.attributes;
604
+ return {
605
+ cardId: e.id,
606
+ expMonth: String(t?.exp_month ?? ""),
607
+ cvc: String(t?.cvc ?? ""),
608
+ expYear: String(t?.exp_year ?? ""),
609
+ name: String(t?.cardholder?.name ?? "")
610
+ };
611
+ }
612
+ destroy() {
613
+ this.vgsForm = null, this.fields = [];
614
+ }
615
+ static mapCardType(e) {
616
+ return e ? {
617
+ visa: "visa",
618
+ mastercard: "mastercard",
619
+ "american-express": "amex",
620
+ amex: "amex",
621
+ "diners-club": "unknown",
622
+ discover: "discover",
623
+ jcb: "unknown",
624
+ unionpay: "unknown",
625
+ maestro: "unknown",
626
+ elo: "unknown"
627
+ }[e] ?? "unknown" : "unknown";
628
+ }
629
+ }
630
+ function K(i) {
405
631
  return {
406
632
  name: "Custom Appearance",
407
- additionalPaymentMethods: n.additionalPaymentMethods || {},
408
- styles: n.styles || {
633
+ additionalPaymentMethods: i.additionalPaymentMethods || {},
634
+ styles: i.styles || {
409
635
  fontSize: 14,
410
636
  textColor: "#000000",
411
637
  buttonColor: "#0070f3",
@@ -415,102 +641,102 @@ function K(n) {
415
641
  buttonFontSize: 16
416
642
  },
417
643
  layout: {
418
- grouped: n.layout?.grouped,
419
- actionButton: n.layout?.actionButton || {
644
+ grouped: i.layout?.grouped,
645
+ actionButton: i.layout?.actionButton || {
420
646
  translationKey: null
421
647
  },
422
- phoneNumber: n.layout?.phoneNumber ? {
423
- enabled: n.layout.phoneNumber.enabled,
424
- label: n.layout.phoneNumber.label,
425
- defaultCountry: n.layout.phoneNumber.defaultCountry,
426
- allowedCountries: n.layout.phoneNumber.allowedCountries
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
427
653
  } : void 0,
428
654
  billingFields: {
429
655
  street: {
430
- enabled: n.layout?.billingFields?.street?.enabled ?? !1,
431
- label: n.layout?.billingFields?.street?.label
656
+ enabled: i.layout?.billingFields?.street?.enabled ?? !1,
657
+ label: i.layout?.billingFields?.street?.label
432
658
  },
433
659
  city: {
434
- enabled: n.layout?.billingFields?.city?.enabled ?? !1,
435
- label: n.layout?.billingFields?.city?.label
660
+ enabled: i.layout?.billingFields?.city?.enabled ?? !1,
661
+ label: i.layout?.billingFields?.city?.label
436
662
  },
437
663
  state: {
438
- enabled: n.layout?.billingFields?.state?.enabled ?? !1,
439
- label: n.layout?.billingFields?.state?.label,
440
- options: n.layout?.billingFields?.state?.options
664
+ enabled: i.layout?.billingFields?.state?.enabled ?? !1,
665
+ label: i.layout?.billingFields?.state?.label,
666
+ options: i.layout?.billingFields?.state?.options
441
667
  },
442
668
  zipCode: {
443
- enabled: n.layout?.billingFields?.zipCode?.enabled ?? !1,
444
- label: n.layout?.billingFields?.zipCode?.label
669
+ enabled: i.layout?.billingFields?.zipCode?.enabled ?? !1,
670
+ label: i.layout?.billingFields?.zipCode?.label
445
671
  },
446
672
  firstName: {
447
- enabled: n.layout?.billingFields?.firstName?.enabled ?? !1,
448
- label: n.layout?.billingFields?.firstName?.label
673
+ enabled: i.layout?.billingFields?.firstName?.enabled ?? !1,
674
+ label: i.layout?.billingFields?.firstName?.label
449
675
  },
450
676
  lastName: {
451
- enabled: n.layout?.billingFields?.lastName?.enabled ?? !1,
452
- label: n.layout?.billingFields?.lastName?.label
677
+ enabled: i.layout?.billingFields?.lastName?.enabled ?? !1,
678
+ label: i.layout?.billingFields?.lastName?.label
453
679
  },
454
680
  country: {
455
- enabled: n.layout?.billingFields?.country?.enabled ?? !1,
456
- label: n.layout?.billingFields?.country?.label,
457
- options: n.layout?.billingFields?.country?.options
681
+ enabled: i.layout?.billingFields?.country?.enabled ?? !1,
682
+ label: i.layout?.billingFields?.country?.label,
683
+ options: i.layout?.billingFields?.country?.options
458
684
  }
459
685
  },
460
- shippingFields: n.layout?.shippingFields ? {
686
+ shippingFields: i.layout?.shippingFields ? {
461
687
  street: {
462
- enabled: n.layout.shippingFields.street?.enabled ?? !1,
463
- label: n.layout.shippingFields.street?.label
688
+ enabled: i.layout.shippingFields.street?.enabled ?? !1,
689
+ label: i.layout.shippingFields.street?.label
464
690
  },
465
691
  firstName: {
466
- enabled: n.layout.shippingFields.firstName?.enabled ?? !1,
467
- label: n.layout.shippingFields.firstName?.label
692
+ enabled: i.layout.shippingFields.firstName?.enabled ?? !1,
693
+ label: i.layout.shippingFields.firstName?.label
468
694
  },
469
695
  lastName: {
470
- enabled: n.layout.shippingFields.lastName?.enabled ?? !1,
471
- label: n.layout.shippingFields.lastName?.label
696
+ enabled: i.layout.shippingFields.lastName?.enabled ?? !1,
697
+ label: i.layout.shippingFields.lastName?.label
472
698
  },
473
699
  city: {
474
- enabled: n.layout.shippingFields.city?.enabled ?? !1,
475
- label: n.layout.shippingFields.city?.label
700
+ enabled: i.layout.shippingFields.city?.enabled ?? !1,
701
+ label: i.layout.shippingFields.city?.label
476
702
  },
477
703
  state: {
478
- enabled: n.layout.shippingFields.state?.enabled ?? !1,
479
- label: n.layout.shippingFields.state?.label,
480
- options: n.layout.shippingFields.state?.options
704
+ enabled: i.layout.shippingFields.state?.enabled ?? !1,
705
+ label: i.layout.shippingFields.state?.label,
706
+ options: i.layout.shippingFields.state?.options
481
707
  },
482
708
  zipCode: {
483
- enabled: n.layout.shippingFields.zipCode?.enabled ?? !1,
484
- label: n.layout.shippingFields.zipCode?.label
709
+ enabled: i.layout.shippingFields.zipCode?.enabled ?? !1,
710
+ label: i.layout.shippingFields.zipCode?.label
485
711
  },
486
712
  country: {
487
- enabled: n.layout.shippingFields.country?.enabled ?? !1,
488
- label: n.layout.shippingFields.country?.label,
489
- options: n.layout.shippingFields.country?.options
713
+ enabled: i.layout.shippingFields.country?.enabled ?? !1,
714
+ label: i.layout.shippingFields.country?.label,
715
+ options: i.layout.shippingFields.country?.options
490
716
  }
491
717
  } : void 0
492
718
  },
493
719
  appearance: {
494
- additionalPaymentMethods: n.additionalPaymentMethods ? {
495
- applePay: n.additionalPaymentMethods.applePay ? {
496
- displayName: n.additionalPaymentMethods.applePay.displayName,
497
- requiredBillingContactFields: n.additionalPaymentMethods.applePay.requiredBillingContactFields,
498
- requiredShippingContactFields: n.additionalPaymentMethods.applePay.requiredShippingContactFields
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
499
725
  } : void 0
500
726
  } : void 0
501
727
  }
502
728
  };
503
729
  }
504
- function et({
505
- appearance: n
730
+ function ot({
731
+ appearance: i
506
732
  }) {
507
- const e = ie({
733
+ const e = de({
508
734
  checkoutProfile: void 0,
509
735
  isLoading: !0,
510
736
  error: null
511
737
  });
512
- if (n) {
513
- const s = K(n);
738
+ if (i) {
739
+ const s = K(i);
514
740
  return Promise.resolve().then(() => {
515
741
  e.setState({
516
742
  checkoutProfile: s,
@@ -520,10 +746,10 @@ function et({
520
746
  }), {
521
747
  getState: e.getState.bind(e),
522
748
  subscribe: e.subscribe.bind(e),
523
- updateProfile: (i) => {
524
- const a = K(i);
749
+ updateProfile: (a) => {
750
+ const n = K(a);
525
751
  e.setState({
526
- checkoutProfile: a,
752
+ checkoutProfile: n,
527
753
  isLoading: !1,
528
754
  error: null
529
755
  });
@@ -570,9 +796,9 @@ function et({
570
796
  getState: e.getState.bind(e),
571
797
  subscribe: e.subscribe.bind(e),
572
798
  updateProfile: (s) => {
573
- const i = K(s);
799
+ const a = K(s);
574
800
  e.setState({
575
- checkoutProfile: i,
801
+ checkoutProfile: a,
576
802
  isLoading: !1,
577
803
  error: null
578
804
  });
@@ -581,8 +807,8 @@ function et({
581
807
  }
582
808
  };
583
809
  }
584
- const tt = () => {
585
- const n = ce(), e = ie({
810
+ const lt = () => {
811
+ const i = ge(), e = de({
586
812
  formData: {
587
813
  name: "",
588
814
  email: "",
@@ -599,185 +825,204 @@ const tt = () => {
599
825
  cardCvv: !1
600
826
  },
601
827
  isValid: !1
602
- }), t = (o, f, m, h) => {
603
- if (o === "cardCvv")
604
- return n.cardCvv(f, m);
605
- if (o === "phoneNumber" && h)
606
- return n.phoneNumber(f, h);
607
- const p = n[o];
608
- return p?.(f);
609
- }, s = (o) => {
610
- const f = {};
611
- return Object.keys(o).forEach((h) => {
612
- const p = o[h];
613
- if (p === void 0) return;
614
- let c;
615
- h === "cardCvv" ? c = t(h, p, o.cardNumber) : h === "phoneNumber" ? c = t(
616
- h,
617
- p,
828
+ }), t = (l, g, m, u) => {
829
+ if (l === "cardCvv")
830
+ return i.cardCvv(g, m);
831
+ if (l === "phoneNumber" && u)
832
+ return i.phoneNumber(g, u);
833
+ const f = i[l];
834
+ return f?.(g);
835
+ }, s = (l) => {
836
+ const g = {};
837
+ return Object.keys(l).forEach((u) => {
838
+ const f = l[u];
839
+ if (f === void 0) return;
840
+ let h;
841
+ u === "cardCvv" ? h = t(u, f, l.cardNumber) : u === "phoneNumber" ? h = t(
842
+ u,
843
+ f,
618
844
  void 0,
619
- o.phoneCountryCode
620
- ) : c = t(h, p), c && (f[h] = c);
845
+ l.phoneCountryCode
846
+ ) : h = t(u, f), h && (g[u] = h);
621
847
  }), [
622
848
  "billingAddress",
623
849
  "shippingAddress"
624
- ].forEach((h) => {
625
- const p = o[h];
626
- if (p && typeof p == "object") {
627
- const c = {};
628
- Object.keys(p).forEach(
629
- (b) => {
630
- const g = p[b];
631
- if (g === void 0) return;
632
- const S = n[b];
850
+ ].forEach((u) => {
851
+ const f = l[u];
852
+ if (f && typeof f == "object") {
853
+ const h = {};
854
+ Object.keys(f).forEach(
855
+ (y) => {
856
+ const v = f[y];
857
+ if (v === void 0) return;
858
+ const S = i[y];
633
859
  if (S) {
634
- const N = S(g);
635
- N && (c[b] = N);
860
+ const M = S(v);
861
+ M && (h[y] = M);
636
862
  }
637
863
  }
638
- ), Object.keys(c).length > 0 && (f[h] = c);
864
+ ), Object.keys(h).length > 0 && (g[u] = h);
639
865
  }
640
- }), f;
641
- }, i = (o) => {
642
- const f = s(o);
643
- return Object.keys(f).length === 0;
644
- }, a = "billingAddress.", r = "shippingAddress.", d = (o) => o.startsWith(a) ? {
866
+ }), g;
867
+ }, a = (l) => {
868
+ const g = s(l);
869
+ return Object.keys(g).length === 0;
870
+ }, n = "billingAddress.", r = "shippingAddress.", o = (l) => l.startsWith(n) ? {
645
871
  parent: "billingAddress",
646
- field: o.slice(a.length)
647
- } : o.startsWith(r) ? {
872
+ field: l.slice(n.length)
873
+ } : l.startsWith(r) ? {
648
874
  parent: "shippingAddress",
649
- field: o.slice(r.length)
650
- } : null, l = (o, f, m, h) => {
651
- const p = { ...o };
652
- if (h)
653
- p[f] = {
654
- ...p[f],
655
- [m]: h
875
+ field: l.slice(r.length)
876
+ } : null, d = (l, g, m, u) => {
877
+ const f = { ...l };
878
+ if (u)
879
+ f[g] = {
880
+ ...f[g],
881
+ [m]: u
656
882
  };
657
883
  else {
658
- const c = {
659
- ...p[f]
884
+ const h = {
885
+ ...f[g]
660
886
  };
661
- delete c[m], Object.keys(c).length === 0 ? delete p[f] : p[f] = c;
887
+ delete h[m], Object.keys(h).length === 0 ? delete f[g] : f[g] = h;
662
888
  }
663
- return p;
664
- }, u = (o, f) => {
889
+ return f;
890
+ }, c = (l, g) => {
665
891
  const m = e.getState();
666
- let h = f;
667
- const p = d(o);
668
- if (!p && o in V)
669
- if (o === "cardCvv") {
670
- const S = he(m.formData.cardNumber) === "amex" ? 4 : 3;
671
- h = V.cardCvv(f, S);
892
+ let u = g;
893
+ const f = o(l);
894
+ if (!f && l in U)
895
+ if (l === "cardCvv") {
896
+ const S = fe(m.formData.cardNumber) === "amex" ? 4 : 3;
897
+ u = U.cardCvv(g, S);
672
898
  } else
673
- h = V[o](f);
674
- let c;
675
- if (p) {
676
- const { parent: g, field: S } = p;
677
- c = {
899
+ u = U[l](g);
900
+ let h;
901
+ if (f) {
902
+ const { parent: v, field: S } = f;
903
+ h = {
678
904
  ...m.formData,
679
- [g]: {
680
- ...m.formData[g] ?? {},
681
- [S]: h
905
+ [v]: {
906
+ ...m.formData[v] ?? {},
907
+ [S]: u
682
908
  }
683
909
  };
684
910
  } else
685
- c = {
911
+ h = {
686
912
  ...m.formData,
687
- [o]: h
913
+ [l]: u
688
914
  };
689
- let b = { ...m.errors };
690
- if (o === "phoneCountryCode" && c.phoneNumber) {
691
- const g = t(
915
+ let y = { ...m.errors };
916
+ if (l === "phoneCountryCode" && h.phoneNumber) {
917
+ const v = t(
692
918
  "phoneNumber",
693
- c.phoneNumber,
919
+ h.phoneNumber,
694
920
  void 0,
695
- h
921
+ u
696
922
  );
697
- g ? b.phoneNumber = g : delete b.phoneNumber;
923
+ v ? y.phoneNumber = v : delete y.phoneNumber;
698
924
  }
699
- if (m.touched[o])
700
- if (p) {
701
- const { parent: g, field: S } = p, N = n[S], D = N ? N(
702
- h
925
+ if (m.touched[l])
926
+ if (f) {
927
+ const { parent: v, field: S } = f, M = i[S], x = M ? M(
928
+ u
703
929
  ) : void 0;
704
- b = l(b, g, S, D);
930
+ y = d(y, v, S, x);
705
931
  } else {
706
- let g;
707
- o === "cardCvv" ? g = t(o, h, c.cardNumber) : o === "phoneNumber" ? g = t(
708
- o,
709
- h,
932
+ let v;
933
+ l === "cardCvv" ? v = t(l, u, h.cardNumber) : l === "phoneNumber" ? v = t(
934
+ l,
935
+ u,
710
936
  void 0,
711
- c.phoneCountryCode
712
- ) : g = t(o, h), g ? b[o] = g : delete b[o];
937
+ h.phoneCountryCode
938
+ ) : v = t(l, u), v ? y[l] = v : delete y[l];
713
939
  }
714
940
  e.setState({
715
- formData: c,
716
- errors: b,
717
- isValid: i(c)
941
+ formData: h,
942
+ errors: y,
943
+ isValid: a(h)
718
944
  });
719
- }, E = (o, f) => {
720
- const m = e.getState(), h = d(o);
721
- if (h) {
722
- const { parent: g, field: S } = h, N = {
945
+ }, p = (l, g) => {
946
+ const m = e.getState(), u = o(l);
947
+ if (u) {
948
+ const { parent: v, field: S } = u, M = {
723
949
  ...m.formData,
724
- [g]: {
725
- ...m.formData[g] ?? {},
726
- [S]: f
950
+ [v]: {
951
+ ...m.formData[v] ?? {},
952
+ [S]: g
727
953
  }
728
- }, D = n[S], le = D ? D(f) : void 0, de = l(m.errors, g, S, le);
954
+ }, x = i[S], ue = x ? x(g) : void 0, me = d(m.errors, v, S, ue);
729
955
  e.setState({
730
- formData: N,
956
+ formData: M,
731
957
  touched: {
732
958
  ...m.touched,
733
- [o]: !0
959
+ [l]: !0
734
960
  },
735
- errors: de,
736
- isValid: i(N)
961
+ errors: me,
962
+ isValid: a(M)
737
963
  });
738
964
  return;
739
965
  }
740
- const p = {
966
+ const f = {
741
967
  ...m.touched,
742
- [o]: !0
968
+ [l]: !0
743
969
  };
744
- let c;
745
- o === "cardCvv" ? c = t(o, f, m.formData.cardNumber) : o === "phoneNumber" ? c = t(
746
- o,
747
- f,
970
+ let h;
971
+ l === "cardCvv" ? h = t(l, g, m.formData.cardNumber) : l === "phoneNumber" ? h = t(
972
+ l,
973
+ g,
748
974
  void 0,
749
975
  m.formData.phoneCountryCode
750
- ) : c = t(o, f);
751
- const b = { ...m.errors };
752
- c ? b[o] = c : delete b[o], e.setState({
753
- touched: p,
754
- errors: b
976
+ ) : h = t(l, g);
977
+ const y = { ...m.errors };
978
+ h ? y[l] = h : delete y[l], e.setState({
979
+ touched: f,
980
+ errors: y
755
981
  });
756
- }, y = (o) => {
982
+ }, b = (l) => {
757
983
  const m = {
758
984
  ...e.getState().formData,
759
- ...o
985
+ ...l
760
986
  };
761
987
  e.setState({
762
988
  formData: m,
763
- isValid: i(m)
989
+ isValid: a(m)
764
990
  });
765
991
  };
766
992
  return {
767
993
  getFormState: e.getState.bind(e),
768
994
  subscribe: e.subscribe.bind(e),
769
- handleChange: u,
770
- handleBlur: E,
771
- setFormData: y,
995
+ handleChange: c,
996
+ handleBlur: p,
997
+ setFormData: b,
772
998
  reset: e.resetState.bind(e)
773
999
  };
774
- };
775
- function $(n) {
776
- if (!n) return !1;
777
- const { billingFields: e, shippingFields: t } = n, s = e && Object.values(e).some((a) => a?.enabled), i = t && Object.values(t).some((a) => a?.enabled);
778
- return !!(s || i);
1000
+ }, dt = "https://fonts.googleapis.com/css2", ct = /src:\s*url\(([^)]+\.woff2[^)]*)\)/, ht = /\/\*\s*latin\s*\*\/\s*@font-face\s*\{[^}]*src:\s*url\(([^)]+\.woff2[^)]*)\)[^}]*\}/;
1001
+ async function ut(i) {
1002
+ if (!i) return null;
1003
+ const e = i.trim().replace(/\s+/g, "+"), t = `${dt}?family=${e}:wght@400;700&display=swap`;
1004
+ try {
1005
+ const s = await fetch(t);
1006
+ if (!s.ok) return null;
1007
+ const a = await s.text(), n = ht.exec(a);
1008
+ if (n?.[1]) return n[1];
1009
+ const r = ct.exec(a);
1010
+ return r?.[1] ? r[1] : null;
1011
+ } catch {
1012
+ return null;
1013
+ }
1014
+ }
1015
+ function mt(i) {
1016
+ if (!i) return !1;
1017
+ const { billingFields: e, shippingFields: t } = i, s = e && Object.values(e).some((n) => n?.enabled), a = t && Object.values(t).some((n) => n?.enabled);
1018
+ return !!(s || a);
779
1019
  }
780
- class se extends A {
1020
+ function W(i) {
1021
+ if (!i) return !1;
1022
+ const { billingFields: e, shippingFields: t } = i, s = e?.firstName?.enabled && e?.lastName?.enabled, a = t?.firstName?.enabled && t?.lastName?.enabled;
1023
+ return !!(s || a);
1024
+ }
1025
+ class re extends P {
781
1026
  inputs = /* @__PURE__ */ new Map();
782
1027
  type;
783
1028
  onChange;
@@ -789,159 +1034,159 @@ class se extends A {
789
1034
  grouped;
790
1035
  constructor(e) {
791
1036
  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;
792
- const { title: t, checkoutProfile: s, fieldsConfig: i, values: a, errors: r, touched: d } = e;
1037
+ const { title: t, checkoutProfile: s, fieldsConfig: a, values: n, errors: r, touched: o } = e;
793
1038
  if (this.grouped) {
794
- const l = document.createElement("h3");
795
- l.className = "address-section-title", l.textContent = t, l.style.color = s.styles.textColor, l.style.fontFamily = `"${s.styles.fontFamily}", sans-serif`, l.style.fontSize = `${s.styles.fontSize}px`, l.style.fontWeight = "normal", this.getElement().appendChild(l);
1039
+ const d = document.createElement("h3");
1040
+ 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);
796
1041
  }
797
- 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, i, a, r, d);
1042
+ 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);
798
1043
  }
799
- borderRadius(e, t, s, i, a) {
800
- const r = (d) => d ? `${e}px` : "0px";
801
- return `${r(t)} ${r(s)} ${r(i)} ${r(a)}`;
1044
+ borderRadius(e, t, s, a, n) {
1045
+ const r = (o) => o ? `${e}px` : "0px";
1046
+ return `${r(t)} ${r(s)} ${r(a)} ${r(n)}`;
802
1047
  }
803
- createFields(e, t, s, i, a) {
1048
+ createFields(e, t, s, a, n) {
804
1049
  if (!this.grouped) {
805
1050
  this.createUngroupedFields(
806
1051
  e,
807
1052
  t,
808
1053
  s,
809
- i,
810
- a
1054
+ a,
1055
+ n
811
1056
  );
812
1057
  return;
813
1058
  }
814
- const r = e.styles.borderRadius, d = {
1059
+ const r = e.styles.borderRadius, o = {
815
1060
  color: e.styles.textColor,
816
1061
  fontSize: e.styles.fontSize,
817
1062
  fontFamily: e.styles.fontFamily
818
- }, l = [];
819
- t.street?.enabled && l.push({ kind: "street" });
820
- const u = [];
821
- t.firstName?.enabled && u.push("firstName"), t.lastName?.enabled && u.push("lastName"), u.length > 0 && l.push({ kind: "name", fields: u }), t.country?.enabled && l.push({ kind: "country" });
822
- const E = [];
823
- t.city?.enabled && E.push("city"), t.zipCode?.enabled && E.push("zipCode"), E.length > 0 && l.push({ kind: "cityZip", fields: E }), t.state?.enabled && l.push({ kind: "state" });
824
- const y = l.length;
825
- l.forEach((o, f) => {
826
- const m = f === 0, h = f === y - 1, p = (c, b) => ({
827
- ...d,
1063
+ }, d = [];
1064
+ t.street?.enabled && d.push({ kind: "street" });
1065
+ const c = [];
1066
+ 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" });
1067
+ const p = [];
1068
+ t.city?.enabled && p.push("city"), t.zipCode?.enabled && p.push("zipCode"), p.length > 0 && d.push({ kind: "cityZip", fields: p }), t.state?.enabled && d.push({ kind: "state" });
1069
+ const b = d.length;
1070
+ d.forEach((l, g) => {
1071
+ const m = g === 0, u = g === b - 1, f = (h, y) => ({
1072
+ ...o,
828
1073
  borderRadius: this.borderRadius(
829
1074
  r,
830
- m && c,
831
- m && b,
832
- h && b,
833
- h && c
1075
+ m && h,
1076
+ m && y,
1077
+ u && y,
1078
+ u && h
834
1079
  )
835
1080
  });
836
- if (o.kind === "street") {
837
- const c = this.createRow(["full"]), b = this.createInput(
1081
+ if (l.kind === "street") {
1082
+ const h = this.createRow(["full"]), y = this.createInput(
838
1083
  "street",
839
1084
  t.street?.label ?? this.translationFunc("address.addressLine1"),
840
1085
  s.street,
841
- i.street,
842
1086
  a.street,
843
- p(!0, !0),
1087
+ n.street,
1088
+ f(!0, !0),
844
1089
  "street-address"
845
1090
  );
846
- this.inputs.set("street", b), c.appendChild(b.getElement()), this.fieldsContainer.appendChild(c);
1091
+ this.inputs.set("street", y), h.appendChild(y.getElement()), this.fieldsContainer.appendChild(h);
847
1092
  return;
848
1093
  }
849
- if (o.kind === "name") {
850
- const c = this.createRow(o.fields.map(() => "half")), b = o.fields.length === 1;
851
- if (o.fields.includes("firstName")) {
852
- const g = b || o.fields[o.fields.length - 1] === "firstName", S = this.createInput(
1094
+ if (l.kind === "name") {
1095
+ const h = this.createRow(l.fields.map(() => "half")), y = l.fields.length === 1;
1096
+ if (l.fields.includes("firstName")) {
1097
+ const v = y || l.fields[l.fields.length - 1] === "firstName", S = this.createInput(
853
1098
  "firstName",
854
1099
  t.firstName?.label ?? this.translationFunc("address.firstName"),
855
1100
  s.firstName,
856
- i.firstName,
857
1101
  a.firstName,
858
- p(!0, g),
1102
+ n.firstName,
1103
+ f(!0, v),
859
1104
  "given-name"
860
1105
  );
861
- this.inputs.set("firstName", S), c.appendChild(S.getElement());
1106
+ this.inputs.set("firstName", S), h.appendChild(S.getElement());
862
1107
  }
863
- if (o.fields.includes("lastName")) {
864
- const g = b || o.fields[0] === "lastName", S = this.createInput(
1108
+ if (l.fields.includes("lastName")) {
1109
+ const v = y || l.fields[0] === "lastName", S = this.createInput(
865
1110
  "lastName",
866
1111
  t.lastName?.label ?? this.translationFunc("address.lastName"),
867
1112
  s.lastName,
868
- i.lastName,
869
1113
  a.lastName,
870
- p(g, !0),
1114
+ n.lastName,
1115
+ f(v, !0),
871
1116
  "family-name"
872
1117
  );
873
- this.inputs.set("lastName", S), c.appendChild(S.getElement());
1118
+ this.inputs.set("lastName", S), h.appendChild(S.getElement());
874
1119
  }
875
- this.fieldsContainer.appendChild(c);
1120
+ this.fieldsContainer.appendChild(h);
876
1121
  return;
877
1122
  }
878
- if (o.kind === "country") {
879
- const c = this.createRow(["full"]), b = this.createCountrySelect(
1123
+ if (l.kind === "country") {
1124
+ const h = this.createRow(["full"]), y = this.createCountrySelect(
880
1125
  s.country,
881
- i.country,
882
1126
  a.country,
883
- p(!0, !0),
1127
+ n.country,
1128
+ f(!0, !0),
884
1129
  t.country?.options,
885
1130
  t.country?.label
886
1131
  );
887
- this.inputs.set("country", b), c.appendChild(b.getElement()), this.fieldsContainer.appendChild(c);
1132
+ this.inputs.set("country", y), h.appendChild(y.getElement()), this.fieldsContainer.appendChild(h);
888
1133
  return;
889
1134
  }
890
- if (o.kind === "cityZip") {
891
- const c = this.createRow(o.fields.map(() => "half")), b = o.fields.length === 1;
892
- if (o.fields.includes("city")) {
893
- const g = b || o.fields[o.fields.length - 1] === "city", S = this.createInput(
1135
+ if (l.kind === "cityZip") {
1136
+ const h = this.createRow(l.fields.map(() => "half")), y = l.fields.length === 1;
1137
+ if (l.fields.includes("city")) {
1138
+ const v = y || l.fields[l.fields.length - 1] === "city", S = this.createInput(
894
1139
  "city",
895
1140
  t.city?.label ?? this.translationFunc("address.townCity"),
896
1141
  s.city,
897
- i.city,
898
1142
  a.city,
899
- p(!0, g),
1143
+ n.city,
1144
+ f(!0, v),
900
1145
  "address-level2"
901
1146
  );
902
- this.inputs.set("city", S), c.appendChild(S.getElement());
1147
+ this.inputs.set("city", S), h.appendChild(S.getElement());
903
1148
  }
904
- if (o.fields.includes("zipCode")) {
905
- const g = b || o.fields[0] === "zipCode", S = this.createInput(
1149
+ if (l.fields.includes("zipCode")) {
1150
+ const v = y || l.fields[0] === "zipCode", S = this.createInput(
906
1151
  "zipCode",
907
1152
  t.zipCode?.label ?? this.translationFunc("address.postalCode"),
908
1153
  s.zipCode,
909
- i.zipCode,
910
1154
  a.zipCode,
911
- p(g, !0),
1155
+ n.zipCode,
1156
+ f(v, !0),
912
1157
  "postal-code"
913
1158
  );
914
- this.inputs.set("zipCode", S), c.appendChild(S.getElement());
1159
+ this.inputs.set("zipCode", S), h.appendChild(S.getElement());
915
1160
  }
916
- this.fieldsContainer.appendChild(c);
1161
+ this.fieldsContainer.appendChild(h);
917
1162
  return;
918
1163
  }
919
- if (o.kind === "state") {
920
- const c = this.createRow(["full"]);
1164
+ if (l.kind === "state") {
1165
+ const h = this.createRow(["full"]);
921
1166
  if (this.stateOptions = t.state?.options, t.state?.options && t.state.options.length > 0) {
922
- const g = this.createStateSelect(
1167
+ const v = this.createStateSelect(
923
1168
  s.state,
924
- i.state,
925
1169
  a.state,
926
- p(!0, !0),
1170
+ n.state,
1171
+ f(!0, !0),
927
1172
  t.state?.options,
928
1173
  s.country,
929
1174
  t.state?.label
930
1175
  );
931
- this.inputs.set("state", g), c.appendChild(g.getElement());
1176
+ this.inputs.set("state", v), h.appendChild(v.getElement());
932
1177
  } else {
933
- const g = this.createInput(
1178
+ const v = this.createInput(
934
1179
  "state",
935
1180
  t.state?.label ?? this.translationFunc("address.chooseState"),
936
1181
  s.state,
937
- i.state,
938
1182
  a.state,
939
- p(!0, !0),
1183
+ n.state,
1184
+ f(!0, !0),
940
1185
  "address-level1"
941
1186
  );
942
- this.inputs.set("state", g), c.appendChild(g.getElement());
1187
+ this.inputs.set("state", v), h.appendChild(v.getElement());
943
1188
  }
944
- this.fieldsContainer.appendChild(c);
1189
+ this.fieldsContainer.appendChild(h);
945
1190
  }
946
1191
  });
947
1192
  }
@@ -949,181 +1194,181 @@ class se extends A {
949
1194
  const t = document.createElement("div");
950
1195
  return t.className = `address-row address-row-${e.length === 1 ? "single" : "double"}`, t;
951
1196
  }
952
- createInput(e, t, s, i, a, r, d) {
953
- const l = `${this.type}Address.${e}`, u = new re({
954
- name: l,
1197
+ createInput(e, t, s, a, n, r, o) {
1198
+ const d = `${this.type}Address.${e}`, c = new ce({
1199
+ name: d,
955
1200
  error: !1,
956
1201
  errorMsg: void 0,
957
1202
  styles: r,
958
1203
  ...this.grouped ? { placeholder: t } : {
959
1204
  label: t,
960
1205
  placeholder: (() => {
961
- const E = `address.placeholder.${e}`, y = this.translationFunc(E);
962
- return y !== E ? y : t;
1206
+ const p = `address.placeholder.${e}`, b = this.translationFunc(p);
1207
+ return b !== p ? b : t;
963
1208
  })()
964
1209
  },
965
1210
  value: s,
966
- autocomplete: d,
967
- onChange: (E) => {
968
- u.setError(!1);
969
- const y = new Event("input", { bubbles: !0 });
970
- Object.defineProperty(y, "target", {
1211
+ autocomplete: o,
1212
+ onChange: (p) => {
1213
+ c.setError(!1);
1214
+ const b = new Event("input", { bubbles: !0 });
1215
+ Object.defineProperty(b, "target", {
971
1216
  writable: !1,
972
1217
  value: {
973
- name: l,
974
- value: E.target.value
1218
+ name: d,
1219
+ value: p.target.value
975
1220
  }
976
- }), this.onChange(y);
1221
+ }), this.onChange(b);
977
1222
  }
978
1223
  });
979
- return u.addEventListener("blur", (E) => {
980
- const y = new Event("blur", { bubbles: !0 });
981
- Object.defineProperty(y, "target", {
1224
+ return c.addEventListener("blur", (p) => {
1225
+ const b = new Event("blur", { bubbles: !0 });
1226
+ Object.defineProperty(b, "target", {
982
1227
  writable: !1,
983
1228
  value: {
984
- name: l,
985
- value: E.target.value
1229
+ name: d,
1230
+ value: p.target.value
986
1231
  }
987
- }), this.onBlur(y);
988
- }), u;
1232
+ }), this.onBlur(b);
1233
+ }), c;
989
1234
  }
990
- createCountrySelect(e, t, s, i, a, r) {
991
- const d = `${this.type}Address.country`, l = ue(a, this.locale), u = new R({
992
- name: d,
1235
+ createCountrySelect(e, t, s, a, n, r) {
1236
+ const o = `${this.type}Address.country`, d = ye(n, this.locale), c = new H({
1237
+ name: o,
993
1238
  error: !1,
994
1239
  errorMsg: void 0,
995
- styles: i,
1240
+ styles: a,
996
1241
  placeholder: this.translationFunc("address.chooseCountry"),
997
1242
  ...!this.grouped && {
998
1243
  label: r ?? this.translationFunc("address.chooseCountry")
999
1244
  },
1000
1245
  value: e,
1001
- options: l,
1246
+ options: d,
1002
1247
  autocomplete: "country",
1003
- onChange: (E) => {
1004
- u.setError(!1);
1005
- const y = E.target.value;
1006
- this.updateStateOptionsForCountry(y);
1007
- const o = new Event("change", { bubbles: !0 });
1008
- Object.defineProperty(o, "target", {
1248
+ onChange: (p) => {
1249
+ c.setError(!1);
1250
+ const b = p.target.value;
1251
+ this.updateStateOptionsForCountry(b);
1252
+ const l = new Event("change", { bubbles: !0 });
1253
+ Object.defineProperty(l, "target", {
1009
1254
  writable: !1,
1010
1255
  value: {
1011
- name: d,
1012
- value: y
1256
+ name: o,
1257
+ value: b
1013
1258
  }
1014
- }), this.onChange(o);
1259
+ }), this.onChange(l);
1015
1260
  }
1016
1261
  });
1017
- return u.addEventListener("blur", (E) => {
1018
- const y = new Event("blur", { bubbles: !0 });
1019
- Object.defineProperty(y, "target", {
1262
+ return c.addEventListener("blur", (p) => {
1263
+ const b = new Event("blur", { bubbles: !0 });
1264
+ Object.defineProperty(b, "target", {
1020
1265
  writable: !1,
1021
1266
  value: {
1022
- name: d,
1023
- value: E.target.value
1267
+ name: o,
1268
+ value: p.target.value
1024
1269
  }
1025
- }), this.onBlur(y);
1026
- }), u;
1270
+ }), this.onBlur(b);
1271
+ }), c;
1027
1272
  }
1028
1273
  updateStateOptionsForCountry(e) {
1029
1274
  const t = this.inputs.get("state");
1030
- if (!(t instanceof R)) return;
1031
- const s = e === "CA" ? "CA" : "US", i = Z(this.stateOptions, s), a = s === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState");
1032
- t.setOptions(i, a);
1275
+ if (!(t instanceof H)) return;
1276
+ const s = e === "CA" ? "CA" : "US", a = Z(this.stateOptions, s), n = s === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState");
1277
+ t.setOptions(a, n);
1033
1278
  }
1034
- createStateSelect(e, t, s, i, a, r, d) {
1035
- const l = `${this.type}Address.state`, u = r === "CA" ? "CA" : "US", E = Z(a, u), y = u === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState"), o = new R({
1036
- name: l,
1279
+ createStateSelect(e, t, s, a, n, r, o) {
1280
+ const d = `${this.type}Address.state`, c = r === "CA" ? "CA" : "US", p = Z(n, c), b = c === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState"), l = new H({
1281
+ name: d,
1037
1282
  error: !1,
1038
1283
  errorMsg: void 0,
1039
- styles: i,
1040
- placeholder: y,
1041
- ...!this.grouped && { label: d ?? y },
1284
+ styles: a,
1285
+ placeholder: b,
1286
+ ...!this.grouped && { label: o ?? b },
1042
1287
  value: e,
1043
- options: E,
1288
+ options: p,
1044
1289
  autocomplete: "address-level1",
1045
- onChange: (f) => {
1046
- o.setError(!1);
1290
+ onChange: (g) => {
1291
+ l.setError(!1);
1047
1292
  const m = new Event("change", { bubbles: !0 });
1048
1293
  Object.defineProperty(m, "target", {
1049
1294
  writable: !1,
1050
1295
  value: {
1051
- name: l,
1052
- value: f.target.value
1296
+ name: d,
1297
+ value: g.target.value
1053
1298
  }
1054
1299
  }), this.onChange(m);
1055
1300
  }
1056
1301
  });
1057
- return o.addEventListener("blur", (f) => {
1302
+ return l.addEventListener("blur", (g) => {
1058
1303
  const m = new Event("blur", { bubbles: !0 });
1059
1304
  Object.defineProperty(m, "target", {
1060
1305
  writable: !1,
1061
1306
  value: {
1062
- name: l,
1063
- value: f.target.value
1307
+ name: d,
1308
+ value: g.target.value
1064
1309
  }
1065
1310
  }), this.onBlur(m);
1066
- }), o;
1311
+ }), l;
1067
1312
  }
1068
- createUngroupedFields(e, t, s, i, a) {
1069
- const r = e.styles.borderRadius, d = {
1313
+ createUngroupedFields(e, t, s, a, n) {
1314
+ const r = e.styles.borderRadius, o = {
1070
1315
  color: e.styles.textColor,
1071
1316
  fontSize: e.styles.fontSize,
1072
1317
  fontFamily: e.styles.fontFamily,
1073
1318
  borderRadius: `${r}px`
1074
- }, l = (u, E, y) => {
1075
- if (!t[u]?.enabled) return;
1076
- const o = t[u]?.label ?? this.translationFunc(E), f = this.createRow(["full"]), m = this.createInput(
1077
- u,
1319
+ }, d = (c, p, b) => {
1320
+ if (!t[c]?.enabled) return;
1321
+ const l = t[c]?.label ?? this.translationFunc(p), g = this.createRow(["full"]), m = this.createInput(
1322
+ c,
1323
+ l,
1324
+ s[c],
1325
+ a[c],
1326
+ n[c],
1078
1327
  o,
1079
- s[u],
1080
- i[u],
1081
- a[u],
1082
- d,
1083
- y
1328
+ b
1084
1329
  );
1085
- this.inputs.set(u, m), f.appendChild(m.getElement()), this.fieldsContainer.appendChild(f);
1330
+ this.inputs.set(c, m), g.appendChild(m.getElement()), this.fieldsContainer.appendChild(g);
1086
1331
  };
1087
- if (l("firstName", "address.firstName", "given-name"), l("lastName", "address.lastName", "family-name"), l("street", "address.addressLine1", "street-address"), l("city", "address.townCity", "address-level2"), t.country?.enabled) {
1088
- const u = t.country?.label ?? this.translationFunc("address.chooseCountry"), E = this.createRow(["full"]), y = this.createCountrySelect(
1332
+ 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) {
1333
+ const c = t.country?.label ?? this.translationFunc("address.chooseCountry"), p = this.createRow(["full"]), b = this.createCountrySelect(
1089
1334
  s.country,
1090
- i.country,
1091
1335
  a.country,
1092
- d,
1336
+ n.country,
1337
+ o,
1093
1338
  t.country?.options,
1094
- u
1339
+ c
1095
1340
  );
1096
- this.inputs.set("country", y), E.appendChild(y.getElement()), this.fieldsContainer.appendChild(E);
1341
+ this.inputs.set("country", b), p.appendChild(b.getElement()), this.fieldsContainer.appendChild(p);
1097
1342
  }
1098
1343
  if (t.state?.enabled) {
1099
1344
  this.stateOptions = t.state?.options;
1100
- const u = this.createRow(["full"]), E = t.state?.options && t.state.options.length > 0, y = t.state?.label ?? this.translationFunc("address.chooseState");
1101
- if (E) {
1102
- const o = this.createStateSelect(
1345
+ const c = this.createRow(["full"]), p = t.state?.options && t.state.options.length > 0, b = t.state?.label ?? this.translationFunc("address.chooseState");
1346
+ if (p) {
1347
+ const l = this.createStateSelect(
1103
1348
  s.state,
1104
- i.state,
1105
1349
  a.state,
1106
- d,
1350
+ n.state,
1351
+ o,
1107
1352
  t.state?.options,
1108
1353
  s.country,
1109
- y
1354
+ b
1110
1355
  );
1111
- this.inputs.set("state", o), u.appendChild(o.getElement());
1356
+ this.inputs.set("state", l), c.appendChild(l.getElement());
1112
1357
  } else {
1113
- const o = this.createInput(
1358
+ const l = this.createInput(
1114
1359
  "state",
1115
- y,
1360
+ b,
1116
1361
  s.state,
1117
- i.state,
1118
1362
  a.state,
1119
- d,
1363
+ n.state,
1364
+ o,
1120
1365
  "address-level1"
1121
1366
  );
1122
- this.inputs.set("state", o), u.appendChild(o.getElement());
1367
+ this.inputs.set("state", l), c.appendChild(l.getElement());
1123
1368
  }
1124
- this.fieldsContainer.appendChild(u);
1369
+ this.fieldsContainer.appendChild(c);
1125
1370
  }
1126
- l("zipCode", "address.postalCode", "postal-code");
1371
+ d("zipCode", "address.postalCode", "postal-code");
1127
1372
  }
1128
1373
  getValue(e) {
1129
1374
  return this.inputs.get(e)?.getValue() ?? "";
@@ -1148,28 +1393,28 @@ class se extends A {
1148
1393
  });
1149
1394
  }
1150
1395
  setError(e, t, s) {
1151
- const i = this.inputs.get(e);
1152
- if (i) {
1153
- const a = i.getElement().querySelector("input") || i.getElement().querySelector("select");
1154
- document.activeElement !== a && i.setError(t, s);
1155
- }
1156
- }
1157
- updateField(e, t, s, i) {
1158
1396
  const a = this.inputs.get(e);
1159
1397
  if (a) {
1160
- const d = a.getElement().querySelector("input") || a.getElement().querySelector("select"), l = a.getValue();
1161
- !(document.activeElement === d) && !(t === "" && l !== "") && this.setValue(e, t);
1398
+ const n = a.getElement().querySelector("input") || a.getElement().querySelector("select");
1399
+ document.activeElement !== n && a.setError(t, s);
1400
+ }
1401
+ }
1402
+ updateField(e, t, s, a) {
1403
+ const n = this.inputs.get(e);
1404
+ if (n) {
1405
+ const o = n.getElement().querySelector("input") || n.getElement().querySelector("select"), d = n.getValue();
1406
+ !(document.activeElement === o) && !(t === "" && d !== "") && this.setValue(e, t);
1162
1407
  }
1163
- const r = !!(i && s);
1408
+ const r = !!(a && s);
1164
1409
  this.setError(e, r, s);
1165
1410
  }
1166
1411
  updateAllFields(e, t, s) {
1167
- Object.keys(e).forEach((i) => {
1412
+ Object.keys(e).forEach((a) => {
1168
1413
  this.updateField(
1169
- i,
1170
- e[i],
1171
- t[i],
1172
- !!s[i]
1414
+ a,
1415
+ e[a],
1416
+ t[a],
1417
+ !!s[a]
1173
1418
  );
1174
1419
  });
1175
1420
  }
@@ -1178,66 +1423,108 @@ class se extends A {
1178
1423
  e && e.focus();
1179
1424
  }
1180
1425
  }
1181
- class st {
1182
- input;
1426
+ class pt {
1427
+ input = null;
1428
+ isVgsMode;
1429
+ vgsWrapper = null;
1430
+ vgsContainer = null;
1431
+ vgsHelperText = null;
1432
+ wrapperElement;
1183
1433
  constructor(e) {
1184
1434
  const {
1185
1435
  value: t,
1186
1436
  onChange: s,
1187
- onBlur: i,
1188
- errorMsg: a,
1437
+ onBlur: a,
1438
+ errorMsg: n,
1189
1439
  checkoutProfile: r,
1190
- translationFunc: d,
1191
- autocomplete: l = "cc-name"
1440
+ translationFunc: o,
1441
+ autocomplete: d = "cc-name",
1442
+ isVgsMode: c = !1
1192
1443
  } = e;
1193
- this.input = new re({
1444
+ this.isVgsMode = c, this.wrapperElement = document.createElement("div"), c ? this.buildVgsLayout(r, o) : this.buildNativeLayout(
1445
+ t,
1446
+ s,
1447
+ a,
1448
+ n,
1449
+ r,
1450
+ o,
1451
+ d
1452
+ );
1453
+ }
1454
+ buildVgsLayout(e, t) {
1455
+ const s = e.styles.borderRadius, a = document.createElement("div");
1456
+ a.style.marginBottom = "4px";
1457
+ const n = document.createElement("label");
1458
+ 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";
1459
+ const r = document.createElement("div");
1460
+ 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 be({ visible: !1 }), this.wrapperElement.appendChild(this.vgsHelperText.getElement());
1461
+ }
1462
+ buildNativeLayout(e, t, s, a, n, r, o) {
1463
+ this.input = new ce({
1194
1464
  name: "name",
1195
- label: d("cardholderNameLabel"),
1196
- // Always hide error initially - we'll show it only on blur if needed
1465
+ label: r("cardholderNameLabel"),
1197
1466
  error: !1,
1198
1467
  errorMsg: a,
1199
1468
  styles: {
1200
- color: r.styles.textColor,
1201
- borderRadius: `${r.styles.borderRadius}px`,
1202
- fontSize: r.styles.fontSize,
1203
- fontFamily: r.styles.fontFamily
1469
+ color: n.styles.textColor,
1470
+ borderRadius: `${n.styles.borderRadius}px`,
1471
+ fontSize: n.styles.fontSize,
1472
+ fontFamily: n.styles.fontFamily
1204
1473
  },
1205
- placeholder: d("cardholderNamePlaceholder"),
1206
- value: t,
1207
- autocomplete: l,
1208
- onChange: (u) => {
1209
- const y = u.target.value, o = y.replace(/[^a-zA-Z\s\-'.]/g, "");
1210
- y !== o && this.input.setValue(o), this.input.setError(!1), this.trim(), s(u);
1474
+ placeholder: r("cardholderNamePlaceholder"),
1475
+ value: e,
1476
+ autocomplete: o,
1477
+ onChange: (d) => {
1478
+ const p = d.target.value, b = p.replace(/[^a-zA-Z\s\-'.]/g, "");
1479
+ p !== b && this.input?.setValue(b), this.input?.setError(!1), this.trim(), t(d);
1211
1480
  }
1212
- }), this.input.addEventListener("blur", (u) => {
1213
- i(u);
1214
- });
1481
+ }), this.input.addEventListener("blur", (d) => {
1482
+ s(d);
1483
+ }), this.wrapperElement.appendChild(this.input.getElement());
1484
+ }
1485
+ getVgsContainerId() {
1486
+ return this.vgsContainer?.id;
1487
+ }
1488
+ handleVgsStateChange(e, t) {
1489
+ if (!this.isVgsMode || !this.vgsWrapper) return;
1490
+ const a = !!e[J.CARDHOLDER]?.isFocused;
1491
+ if (this.vgsWrapper.classList.toggle("vgs-wrap-focused", a), !t || !this.vgsHelperText) return;
1492
+ const n = t[J.CARDHOLDER];
1493
+ n ? (this.vgsHelperText.setText(n), this.vgsHelperText.toggleVisibility(!0)) : this.vgsHelperText.toggleVisibility(!1);
1494
+ }
1495
+ hideFakePlaceholder() {
1496
+ if (!this.vgsWrapper) return;
1497
+ this.vgsWrapper.style.boxShadow = "";
1498
+ const e = this.vgsWrapper.querySelector(".vgs-field-skeleton");
1499
+ e && e.remove();
1215
1500
  }
1216
1501
  getValue() {
1217
- return this.input.getValue();
1502
+ return this.isVgsMode ? "" : this.input?.getValue() ?? "";
1218
1503
  }
1219
1504
  setValue(e) {
1220
- return this.input.setValue(e), this;
1505
+ return this.isVgsMode || this.input?.setValue(e), this;
1221
1506
  }
1222
1507
  trim() {
1508
+ if (this.isVgsMode) return this;
1223
1509
  const e = this.getValue().trimStart();
1224
1510
  return this.setValue(e), this;
1225
1511
  }
1226
1512
  setError(e, t) {
1227
- const s = this.input.getElement().querySelector("input");
1228
- return document.activeElement !== s && this.input.setError(e, t), this;
1513
+ if (this.isVgsMode) return this;
1514
+ const s = this.input?.getElement().querySelector("input");
1515
+ return s && document.activeElement !== s && this.input?.setError(e, t), this;
1229
1516
  }
1230
1517
  getElement() {
1231
- return this.input.getElement();
1518
+ return !this.isVgsMode && this.input ? this.input.getElement() : this.wrapperElement;
1232
1519
  }
1233
1520
  appendTo(e) {
1234
- return this.input.appendTo(e), this;
1521
+ return e.appendChild(this.getElement()), this;
1235
1522
  }
1236
1523
  focus() {
1237
- this.input.focus();
1524
+ this.isVgsMode || this.input?.focus();
1238
1525
  }
1239
1526
  }
1240
- class oe extends A {
1527
+ class he extends P {
1241
1528
  constructor() {
1242
1529
  super("div", ["skeleton-container"]), this.createSkeletonElements();
1243
1530
  }
@@ -1245,35 +1532,35 @@ class oe extends A {
1245
1532
  this.appendChild(this.createPaymentMethodSkeleton()), this.appendChild(this.createPaymentSeparatorSkeleton());
1246
1533
  }
1247
1534
  createPaymentMethodSkeleton() {
1248
- const e = w.createDiv(["skeleton-field"]), t = w.createDiv([
1535
+ const e = k.createDiv(["skeleton-field"]), t = k.createDiv([
1249
1536
  "skeleton",
1250
1537
  "skeleton-payment-method"
1251
1538
  ]);
1252
1539
  return e.appendChild(t), e;
1253
1540
  }
1254
1541
  createPaymentSeparatorSkeleton() {
1255
- const e = w.createDiv([
1542
+ const e = k.createDiv([
1256
1543
  "payment-separator_container"
1257
- ]), t = w.createDiv(["payment-separator__line"]), s = w.createDiv([
1544
+ ]), t = k.createDiv(["payment-separator__line"]), s = k.createDiv([
1258
1545
  "skeleton",
1259
1546
  "skeleton-separator-text"
1260
- ]), i = w.createDiv(["payment-separator__line"]);
1261
- return e.appendChild(t), e.appendChild(s), e.appendChild(i), e;
1547
+ ]), a = k.createDiv(["payment-separator__line"]);
1548
+ return e.appendChild(t), e.appendChild(s), e.appendChild(a), e;
1262
1549
  }
1263
1550
  }
1264
- class nt extends A {
1551
+ class gt extends P {
1265
1552
  constructor(e) {
1266
1553
  const { translationFunc: t, checkoutProfile: s } = e;
1267
1554
  super("div", ["payment-separator"]);
1268
- const i = this.getElement(), a = document.createElement("span");
1269
- a.className = "payment-separator__line";
1555
+ const a = this.getElement(), n = document.createElement("span");
1556
+ n.className = "payment-separator__line";
1270
1557
  const r = document.createElement("p");
1271
1558
  r.textContent = t("pay-with-card"), r.className = "payment-separator__text", r.style.fontFamily = `${s.styles.fontFamily}, sans-serif`;
1272
- const d = document.createElement("span");
1273
- d.className = "payment-separator__line", i.appendChild(a), i.appendChild(r), i.appendChild(d);
1559
+ const o = document.createElement("span");
1560
+ o.className = "payment-separator__line", a.appendChild(n), a.appendChild(r), a.appendChild(o);
1274
1561
  }
1275
1562
  }
1276
- class at extends A {
1563
+ class ft extends P {
1277
1564
  paymentMethods;
1278
1565
  paymentSeparator;
1279
1566
  skeleton;
@@ -1281,15 +1568,15 @@ class at extends A {
1281
1568
  const {
1282
1569
  checkoutProfile: t,
1283
1570
  formData: s,
1284
- onPaypalSubmit: i,
1285
- onApplePaySubmit: a,
1571
+ onPaypalSubmit: a,
1572
+ onApplePaySubmit: n,
1286
1573
  supportedPaymentMethods: r,
1287
- translationFunc: d,
1288
- paymentId: l,
1289
- checkoutKey: u,
1290
- checkoutDetails: E,
1291
- environment: y,
1292
- countryCode: o
1574
+ translationFunc: o,
1575
+ paymentId: d,
1576
+ checkoutKey: c,
1577
+ checkoutDetails: p,
1578
+ environment: b,
1579
+ countryCode: l
1293
1580
  } = e;
1294
1581
  if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
1295
1582
  this.getElement().style.display = "none";
@@ -1299,44 +1586,44 @@ class at extends A {
1299
1586
  this.renderSkeleton();
1300
1587
  return;
1301
1588
  }
1302
- const f = Object.entries(
1589
+ const g = Object.entries(
1303
1590
  t.additionalPaymentMethods
1304
- ).filter(([m, h]) => {
1305
- const p = h.enabled, c = r ? r[m] === !0 : !0, b = !h.countries || o && h.countries.includes(o);
1306
- return p && c && b;
1307
- }).sort((m, h) => m[1].order - h[1].order);
1308
- if (f.length === 0) {
1591
+ ).filter(([m, u]) => {
1592
+ const f = u.enabled, h = r ? r[m] === !0 : !0, y = !u.countries || l && u.countries.includes(l);
1593
+ return f && h && y;
1594
+ }).sort((m, u) => m[1].order - u[1].order);
1595
+ if (g.length === 0) {
1309
1596
  this.getElement().style.display = "none";
1310
1597
  return;
1311
1598
  }
1312
- for (const [m] of f)
1599
+ for (const [m] of g)
1313
1600
  switch (m) {
1314
1601
  case "paypal": {
1315
- if (i) {
1316
- const h = new pe({
1602
+ if (a) {
1603
+ const u = new Se({
1317
1604
  checkoutProfile: t,
1318
1605
  formData: s,
1319
- onSubmit: i
1606
+ onSubmit: a
1320
1607
  });
1321
- this.paymentMethods.set("paypal", h), h.appendTo(this.getElement());
1608
+ this.paymentMethods.set("paypal", u), u.appendTo(this.getElement());
1322
1609
  }
1323
1610
  break;
1324
1611
  }
1325
1612
  case "applePay": {
1326
- if (a && l && u) {
1327
- const h = t.appearance?.additionalPaymentMethods?.applePay, p = new me({
1613
+ if (n && d && c) {
1614
+ const u = t.appearance?.additionalPaymentMethods?.applePay, f = new ve({
1328
1615
  checkoutProfile: t,
1329
1616
  formData: s,
1330
- onSubmit: a,
1331
- paymentId: l,
1332
- checkoutKey: u,
1333
- checkoutDetails: E,
1334
- environment: y,
1335
- displayName: h?.displayName,
1336
- requiredBillingContactFields: h?.requiredBillingContactFields,
1337
- requiredShippingContactFields: h?.requiredShippingContactFields
1617
+ onSubmit: n,
1618
+ paymentId: d,
1619
+ checkoutKey: c,
1620
+ checkoutDetails: p,
1621
+ environment: b,
1622
+ displayName: u?.displayName,
1623
+ requiredBillingContactFields: u?.requiredBillingContactFields,
1624
+ requiredShippingContactFields: u?.requiredShippingContactFields
1338
1625
  });
1339
- this.paymentMethods.set("applePay", p), p.appendTo(this.getElement());
1626
+ this.paymentMethods.set("applePay", f), f.appendTo(this.getElement());
1340
1627
  }
1341
1628
  break;
1342
1629
  }
@@ -1352,13 +1639,13 @@ class at extends A {
1352
1639
  );
1353
1640
  break;
1354
1641
  }
1355
- this.paymentMethods.size > 0 && (this.paymentSeparator = new nt({
1356
- translationFunc: d,
1642
+ this.paymentMethods.size > 0 && (this.paymentSeparator = new gt({
1643
+ translationFunc: o,
1357
1644
  checkoutProfile: t
1358
1645
  }), this.getElement().appendChild(this.paymentSeparator.getElement()));
1359
1646
  }
1360
1647
  renderSkeleton() {
1361
- this.skeleton = new oe(), this.getElement().appendChild(this.skeleton.getElement());
1648
+ this.skeleton = new he(), this.getElement().appendChild(this.skeleton.getElement());
1362
1649
  }
1363
1650
  updateFormData(e) {
1364
1651
  const t = this.paymentMethods.get("paypal");
@@ -1370,8 +1657,8 @@ class at extends A {
1370
1657
  return this.paymentMethods.size > 0 && this.getElement().style.display !== "none";
1371
1658
  }
1372
1659
  }
1373
- const it = 17;
1374
- class rt extends A {
1660
+ const yt = 17;
1661
+ class bt extends P {
1375
1662
  styles;
1376
1663
  isHovered = !1;
1377
1664
  constructor(e) {
@@ -1381,7 +1668,7 @@ class rt extends A {
1381
1668
  }
1382
1669
  applyStyles() {
1383
1670
  const e = this.getElement();
1384
- 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 === it ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
1671
+ 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 === yt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
1385
1672
  }
1386
1673
  handleMouseEnter() {
1387
1674
  this.isHovered = !0, this.applyStyles();
@@ -1393,12 +1680,12 @@ class rt extends A {
1393
1680
  return this.getElement().disabled = e, e ? (this.addClass("disabled"), this.removeClass("valid")) : (this.removeClass("disabled"), this.addClass("valid")), this.applyStyles(), this;
1394
1681
  }
1395
1682
  }
1396
- class ot {
1683
+ class vt {
1397
1684
  button;
1398
1685
  constructor(e) {
1399
- const { disabled: t, checkoutProfile: s, translationFunc: i } = e;
1400
- this.button = new rt({
1401
- text: i(
1686
+ const { disabled: t, checkoutProfile: s, translationFunc: a } = e;
1687
+ this.button = new bt({
1688
+ text: a(
1402
1689
  `buttonTexts.${s?.layout.actionButton.translationKey}`
1403
1690
  ),
1404
1691
  styles: {
@@ -1424,7 +1711,7 @@ class ot {
1424
1711
  return this.button.appendTo(e), this;
1425
1712
  }
1426
1713
  }
1427
- class lt {
1714
+ class St {
1428
1715
  formElement;
1429
1716
  focusManager;
1430
1717
  translationFunc;
@@ -1439,6 +1726,8 @@ class lt {
1439
1726
  checkoutKey;
1440
1727
  checkoutDetails;
1441
1728
  environment;
1729
+ vgsService;
1730
+ onVgsStateChange;
1442
1731
  // Form components
1443
1732
  emailField;
1444
1733
  phoneNumberField;
@@ -1449,6 +1738,9 @@ class lt {
1449
1738
  paymentMethods;
1450
1739
  billingAddressSection;
1451
1740
  shippingAddressSection;
1741
+ cardSectionSkeleton;
1742
+ cardholderSectionSkeleton;
1743
+ isCheckoutDetailsLoaded = !1;
1452
1744
  // Event handler references
1453
1745
  emailFocusHandler;
1454
1746
  phoneNumberFocusHandler;
@@ -1457,15 +1749,15 @@ class lt {
1457
1749
  cardCvvFocusHandler;
1458
1750
  nameFocusHandler;
1459
1751
  constructor(e) {
1460
- this.formElement = e.formElement, this.focusManager = e.focusManager, this.translationFunc = e.translationFunc, this.locale = e.locale, this.onFieldFocus = e.onFieldFocus, this.onChange = e.onChange, this.onBlur = e.onBlur, this.onPaypalSubmit = e.onPaypalSubmit, this.onApplePaySubmit = e.onApplePaySubmit, this.supportedPaymentMethods = e.supportedPaymentMethods, this.paymentId = e.paymentId, this.checkoutKey = e.checkoutKey, this.checkoutDetails = e.checkoutDetails, this.environment = e.environment;
1752
+ this.formElement = e.formElement, this.focusManager = e.focusManager, this.translationFunc = e.translationFunc, this.locale = e.locale, this.onFieldFocus = e.onFieldFocus, this.onChange = e.onChange, this.onBlur = e.onBlur, this.onPaypalSubmit = e.onPaypalSubmit, this.onApplePaySubmit = e.onApplePaySubmit, this.supportedPaymentMethods = e.supportedPaymentMethods, this.paymentId = e.paymentId, this.checkoutKey = e.checkoutKey, this.checkoutDetails = e.checkoutDetails, this.environment = e.environment, this.vgsService = e.vgsService, this.onVgsStateChange = e.onVgsStateChange;
1461
1753
  }
1462
1754
  createPaymentMethods(e, t, s = !1) {
1463
1755
  try {
1464
1756
  if (!e?.additionalPaymentMethods || Object.keys(e.additionalPaymentMethods).length === 0 || !Object.values(e.additionalPaymentMethods).some(
1465
- (i) => i.enabled
1757
+ (a) => a.enabled
1466
1758
  ))
1467
1759
  return;
1468
- this.paymentMethods = new at({
1760
+ this.paymentMethods = new ft({
1469
1761
  checkoutProfile: e,
1470
1762
  formData: t,
1471
1763
  supportedPaymentMethods: this.supportedPaymentMethods,
@@ -1481,119 +1773,143 @@ class lt {
1481
1773
  this.paymentMethods.getElement(),
1482
1774
  this.formElement.firstChild
1483
1775
  ) : this.formElement.appendChild(this.paymentMethods.getElement());
1484
- } catch (i) {
1485
- throw console.error("Error creating payment methods:", i), i;
1776
+ } catch (a) {
1777
+ throw console.error("Error creating payment methods:", a), a;
1486
1778
  }
1487
1779
  }
1488
- createEmailField(e, t, s, i) {
1780
+ createEmailField(e, t, s, a) {
1489
1781
  try {
1490
- const a = e.layout.billingFields && Object.values(e.layout.billingFields).some(
1782
+ const n = e.layout.billingFields && Object.values(e.layout.billingFields).some(
1491
1783
  (r) => r?.enabled
1492
1784
  ) || e.layout.shippingFields && Object.values(e.layout.shippingFields).some(
1493
1785
  (r) => r?.enabled
1494
1786
  );
1495
- this.emailField = new fe({
1787
+ this.emailField = new Ee({
1496
1788
  value: t.email,
1497
1789
  onChange: this.onChange,
1498
1790
  onBlur: this.onBlur,
1499
- onTab: a ? void 0 : () => this.focusManager.focusField(
1791
+ onTab: n ? void 0 : () => this.focusManager.focusField(
1500
1792
  e.layout.phoneNumber?.enabled ? "phoneNumber" : "cardNumber"
1501
1793
  ),
1502
- error: !!(s.email && i.email),
1794
+ error: !!(s.email && a.email),
1503
1795
  errorMsg: s.email,
1504
1796
  checkoutProfile: e,
1505
1797
  translationFunc: this.translationFunc
1506
1798
  }), 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());
1507
- } catch (a) {
1508
- throw console.error("Error creating email field:", a), a;
1799
+ } catch (n) {
1800
+ throw console.error("Error creating email field:", n), n;
1509
1801
  }
1510
1802
  }
1511
- createPhoneNumberField(e, t, s, i) {
1512
- const a = document.createElement("div");
1513
- this.phonePlaceholder = a, this.formElement.appendChild(a), ge().then(({ PhoneNumberField: r }) => {
1514
- a.isConnected && (this.phoneNumberField = new r({
1803
+ createPhoneNumberField(e, t, s, a) {
1804
+ const n = document.createElement("div");
1805
+ this.phonePlaceholder = n, this.formElement.appendChild(n), Ce().then(({ PhoneNumberField: r }) => {
1806
+ n.isConnected && (this.phoneNumberField = new r({
1515
1807
  value: t.phoneNumber ?? "",
1516
1808
  onChange: this.onChange,
1517
1809
  onBlur: this.onBlur,
1518
1810
  onTab: () => this.focusManager.focusField("cardNumber"),
1519
- error: !!(s.phoneNumber && i.phoneNumber),
1811
+ error: !!(s.phoneNumber && a.phoneNumber),
1520
1812
  errorMsg: s.phoneNumber,
1521
1813
  checkoutProfile: e,
1522
1814
  translationFunc: this.translationFunc,
1523
1815
  defaultCountry: e.layout.phoneNumber?.defaultCountry || "US",
1524
1816
  allowedCountries: e.layout.phoneNumber?.allowedCountries,
1525
1817
  locale: this.locale
1526
- }), this.phoneNumberFocusHandler = () => this.onFieldFocus("phoneNumber"), this.phoneNumberField.getElement().addEventListener("focus", this.phoneNumberFocusHandler, !0), this.focusManager.registerField("phoneNumber", this.phoneNumberField), a.replaceWith(this.phoneNumberField.getElement()), this.phonePlaceholder = void 0);
1818
+ }), 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);
1527
1819
  }).catch((r) => {
1528
- console.error("Error creating phone number field:", r), a.remove(), this.phonePlaceholder = void 0;
1820
+ console.error("Error creating phone number field:", r), n.remove(), this.phonePlaceholder = void 0;
1529
1821
  });
1530
1822
  }
1531
- createCardSection(e, t, s, i) {
1823
+ setCheckoutDetailsLoaded(e) {
1824
+ this.isCheckoutDetailsLoaded = e;
1825
+ }
1826
+ createCardSection(e, t, s, a) {
1532
1827
  try {
1533
- this.cardSection = new ye({
1828
+ if (!this.isCheckoutDetailsLoaded) {
1829
+ this.cardSectionSkeleton = this.buildCardSkeleton(e), this.formElement.appendChild(this.cardSectionSkeleton);
1830
+ return;
1831
+ }
1832
+ if (this.cardSection = new Fe({
1534
1833
  checkoutProfile: e,
1535
1834
  cardNumber: t.cardNumber,
1536
1835
  cardNumberError: s.cardNumber,
1537
- cardNumberTouched: !!i.cardNumber,
1836
+ cardNumberTouched: !!a.cardNumber,
1538
1837
  cardCvv: t.cardCvv,
1539
1838
  cardCvvError: s.cardCvv,
1540
- cardCvvTouched: !!i.cardCvv,
1839
+ cardCvvTouched: !!a.cardCvv,
1541
1840
  cardExpiry: t.cardExpiry,
1542
1841
  cardExpiryError: s.cardExpiry,
1543
- cardExpiryTouched: !!i.cardExpiry,
1842
+ cardExpiryTouched: !!a.cardExpiry,
1544
1843
  onChange: this.onChange,
1545
1844
  onBlur: this.onBlur,
1546
1845
  onCardBrandChange: () => {
1547
1846
  if (t.cardCvv) {
1548
- const l = new Event("blur", { bubbles: !0 });
1549
- Object.defineProperty(l, "target", {
1847
+ const n = new Event("blur", { bubbles: !0 });
1848
+ Object.defineProperty(n, "target", {
1550
1849
  writable: !1,
1551
1850
  value: { name: "cardCvv", value: t.cardCvv }
1552
- }), this.onBlur(l);
1851
+ }), this.onBlur(n);
1553
1852
  }
1554
1853
  },
1555
- translationFunc: this.translationFunc
1556
- });
1557
- const a = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
1558
- a && (this.cardExpiryFocusHandler = () => this.onFieldFocus("cardExpiry"), a.addEventListener("focus", this.cardExpiryFocusHandler));
1559
- const r = this.cardSection.getElement().querySelector('input[name="cardNumber"]');
1560
- r && (this.cardNumberFocusHandler = () => this.onFieldFocus("cardNumber"), r.addEventListener("focus", this.cardNumberFocusHandler));
1561
- const d = this.cardSection.getElement().querySelector('input[name="cardCvv"]');
1562
- d && (this.cardCvvFocusHandler = () => this.onFieldFocus("cardCvv"), d.addEventListener("focus", this.cardCvvFocusHandler)), this.focusManager.registerField("cardNumber", {
1854
+ translationFunc: this.translationFunc,
1855
+ vgsService: this.vgsService,
1856
+ onVgsStateChange: this.onVgsStateChange
1857
+ }), !this.vgsService) {
1858
+ const n = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
1859
+ n && (this.cardExpiryFocusHandler = () => this.onFieldFocus("cardExpiry"), n.addEventListener(
1860
+ "focus",
1861
+ this.cardExpiryFocusHandler
1862
+ ));
1863
+ const r = this.cardSection.getElement().querySelector('input[name="cardNumber"]');
1864
+ r && (this.cardNumberFocusHandler = () => this.onFieldFocus("cardNumber"), r.addEventListener(
1865
+ "focus",
1866
+ this.cardNumberFocusHandler
1867
+ ));
1868
+ const o = this.cardSection.getElement().querySelector('input[name="cardCvv"]');
1869
+ o && (this.cardCvvFocusHandler = () => this.onFieldFocus("cardCvv"), o.addEventListener("focus", this.cardCvvFocusHandler));
1870
+ }
1871
+ this.focusManager.registerField("cardNumber", {
1563
1872
  focus: () => this.cardSection?.focusField("cardNumber")
1564
1873
  }), this.focusManager.registerField("cardExpiry", {
1565
1874
  focus: () => this.cardSection?.focusField("cardExpiry")
1566
1875
  }), this.focusManager.registerField("cardCvv", {
1567
1876
  focus: () => this.cardSection?.focusField("cardCvv")
1568
1877
  }), this.formElement.appendChild(this.cardSection.getElement());
1569
- } catch (a) {
1570
- throw console.error("Error creating card section:", a), a;
1878
+ } catch (n) {
1879
+ throw console.error("Error creating card section:", n), n;
1571
1880
  }
1572
1881
  }
1573
- createCardholderSection(e, t, s, i) {
1882
+ createCardholderSection(e, t, s, a) {
1574
1883
  try {
1575
- this.cardholderSection = new st({
1884
+ if (!this.isCheckoutDetailsLoaded) {
1885
+ this.cardholderSectionSkeleton = this.buildCardholderSkeleton(e), this.formElement.appendChild(this.cardholderSectionSkeleton);
1886
+ return;
1887
+ }
1888
+ if (this.cardholderSection = new pt({
1576
1889
  value: t.name,
1577
1890
  onChange: this.onChange,
1578
1891
  onBlur: this.onBlur,
1579
- error: !!(s.name && i.name),
1892
+ error: !!(s.name && a.name),
1580
1893
  errorMsg: s.name,
1581
1894
  checkoutProfile: e,
1582
- translationFunc: this.translationFunc
1583
- });
1584
- const a = this.cardholderSection.getElement().querySelector('input[name="name"]');
1585
- a && (this.nameFocusHandler = () => this.onFieldFocus("name"), a.addEventListener("focus", this.nameFocusHandler)), this.focusManager.registerField("name", this.cardholderSection), this.formElement.appendChild(this.cardholderSection.getElement());
1586
- } catch (a) {
1587
- throw console.error("Error creating cardholder section:", a), a;
1895
+ translationFunc: this.translationFunc,
1896
+ isVgsMode: !!this.vgsService
1897
+ }), !this.vgsService) {
1898
+ const n = this.cardholderSection.getElement().querySelector('input[name="name"]');
1899
+ n && (this.nameFocusHandler = () => this.onFieldFocus("name"), n.addEventListener("focus", this.nameFocusHandler));
1900
+ }
1901
+ this.focusManager.registerField("name", this.cardholderSection), this.formElement.appendChild(this.cardholderSection.getElement());
1902
+ } catch (n) {
1903
+ throw console.error("Error creating cardholder section:", n), n;
1588
1904
  }
1589
1905
  }
1590
- createBillingAddressSection(e, t, s, i) {
1906
+ createBillingAddressSection(e, t, s, a) {
1591
1907
  try {
1592
- const a = e.layout.billingFields;
1593
- if (!a || !Object.values(a).some(
1594
- (l) => l?.enabled
1908
+ const n = e.layout.billingFields;
1909
+ if (!n || !Object.values(n).some(
1910
+ (d) => d?.enabled
1595
1911
  )) return;
1596
- const d = {
1912
+ const o = {
1597
1913
  street: "",
1598
1914
  firstName: "",
1599
1915
  lastName: "",
@@ -1602,31 +1918,31 @@ class lt {
1602
1918
  zipCode: "",
1603
1919
  country: ""
1604
1920
  };
1605
- this.billingAddressSection = new se({
1921
+ this.billingAddressSection = new re({
1606
1922
  type: "billing",
1607
1923
  title: this.translationFunc("address.billingTitle"),
1608
1924
  checkoutProfile: e,
1609
- fieldsConfig: a,
1610
- values: t.billingAddress ?? d,
1925
+ fieldsConfig: n,
1926
+ values: t.billingAddress ?? o,
1611
1927
  errors: s.billingAddress ?? {},
1612
- touched: i.billingAddress ?? {},
1928
+ touched: a.billingAddress ?? {},
1613
1929
  onChange: this.onChange,
1614
1930
  onBlur: this.onBlur,
1615
1931
  translationFunc: this.translationFunc,
1616
1932
  locale: this.locale,
1617
1933
  grouped: e.layout.grouped
1618
1934
  }), this.formElement.appendChild(this.billingAddressSection.getElement());
1619
- } catch (a) {
1620
- throw console.error("Error creating billing address section:", a), a;
1935
+ } catch (n) {
1936
+ throw console.error("Error creating billing address section:", n), n;
1621
1937
  }
1622
1938
  }
1623
- createShippingAddressSection(e, t, s, i) {
1939
+ createShippingAddressSection(e, t, s, a) {
1624
1940
  try {
1625
- const a = e.layout.shippingFields;
1626
- if (!a || !Object.values(a).some(
1627
- (l) => l?.enabled
1941
+ const n = e.layout.shippingFields;
1942
+ if (!n || !Object.values(n).some(
1943
+ (d) => d?.enabled
1628
1944
  )) return;
1629
- const d = {
1945
+ const o = {
1630
1946
  street: "",
1631
1947
  firstName: "",
1632
1948
  lastName: "",
@@ -1635,27 +1951,27 @@ class lt {
1635
1951
  zipCode: "",
1636
1952
  country: ""
1637
1953
  };
1638
- this.shippingAddressSection = new se({
1954
+ this.shippingAddressSection = new re({
1639
1955
  type: "shipping",
1640
1956
  title: this.translationFunc("address.shippingTitle"),
1641
1957
  checkoutProfile: e,
1642
- fieldsConfig: a,
1643
- values: t.shippingAddress ?? d,
1958
+ fieldsConfig: n,
1959
+ values: t.shippingAddress ?? o,
1644
1960
  errors: s.shippingAddress ?? {},
1645
- touched: i.shippingAddress ?? {},
1961
+ touched: a.shippingAddress ?? {},
1646
1962
  onChange: this.onChange,
1647
1963
  onBlur: this.onBlur,
1648
1964
  translationFunc: this.translationFunc,
1649
1965
  locale: this.locale,
1650
1966
  grouped: e.layout.grouped
1651
1967
  }), this.formElement.appendChild(this.shippingAddressSection.getElement());
1652
- } catch (a) {
1653
- throw console.error("Error creating shipping address section:", a), a;
1968
+ } catch (n) {
1969
+ throw console.error("Error creating shipping address section:", n), n;
1654
1970
  }
1655
1971
  }
1656
1972
  createSubmitButton(e, t) {
1657
1973
  try {
1658
- this.submitButton = new ot({
1974
+ this.submitButton = new vt({
1659
1975
  disabled: t,
1660
1976
  checkoutProfile: e,
1661
1977
  translationFunc: this.translationFunc
@@ -1670,15 +1986,15 @@ class lt {
1670
1986
  updatePhoneNumberField(e, t, s) {
1671
1987
  this.phoneNumberField && (this.phoneNumberField.setValue(e), this.phoneNumberField.setError(t, s));
1672
1988
  }
1673
- updateCardSection(e, t, s, i, a, r, d, l, u) {
1989
+ updateCardSection(e, t, s, a, n, r, o, d, c) {
1674
1990
  this.cardSection && (this.cardSection.updateCardNumber(
1675
1991
  e,
1676
1992
  t,
1677
1993
  s
1678
- ), this.cardSection.updateCardCvv(i, a, r), this.cardSection.updateCardExpiry(
1994
+ ), this.cardSection.updateCardCvv(a, n, r), this.cardSection.updateCardExpiry(
1995
+ o,
1679
1996
  d,
1680
- l,
1681
- u
1997
+ c
1682
1998
  ));
1683
1999
  }
1684
2000
  updateCardholderSection(e, t, s) {
@@ -1708,6 +2024,70 @@ class lt {
1708
2024
  hasComponents() {
1709
2025
  return !!this.emailField;
1710
2026
  }
2027
+ setVgsService(e) {
2028
+ this.vgsService = e;
2029
+ }
2030
+ buildCardSkeleton(e) {
2031
+ const t = e.styles.borderRadius, s = document.createElement("div"), a = document.createElement("div");
2032
+ a.style.marginBottom = "4px";
2033
+ const n = document.createElement("label");
2034
+ n.className = "input-label", n.textContent = this.translationFunc("cardInformation"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), s.appendChild(a);
2035
+ const r = document.createElement("div");
2036
+ 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";
2037
+ const o = document.createElement("div");
2038
+ o.className = "card-number-row", o.style.position = "relative", o.style.height = "38.5px", o.style.overflow = "hidden", o.style.borderRadius = `${t}px`, o.appendChild(this.createSkeletonDiv()), r.appendChild(o);
2039
+ const d = document.createElement("div");
2040
+ d.style.display = "flex", d.style.gap = "8px";
2041
+ const c = document.createElement("div");
2042
+ c.style.position = "relative", c.style.flex = "1", c.style.height = "38.5px", c.style.overflow = "hidden", c.style.borderRadius = `${t}px`, c.appendChild(this.createSkeletonDiv()), d.appendChild(c);
2043
+ const p = document.createElement("div");
2044
+ return p.style.position = "relative", p.style.flex = "1", p.style.height = "38.5px", p.style.overflow = "hidden", p.style.borderRadius = `${t}px`, p.appendChild(this.createSkeletonDiv()), d.appendChild(p), r.appendChild(d), s.appendChild(r), s;
2045
+ }
2046
+ createSkeletonDiv() {
2047
+ const e = document.createElement("div");
2048
+ return e.className = "vgs-field-skeleton", e;
2049
+ }
2050
+ buildCardholderSkeleton(e) {
2051
+ const t = e.styles.borderRadius, s = document.createElement("div"), a = document.createElement("div");
2052
+ a.style.marginBottom = "4px";
2053
+ const n = document.createElement("label");
2054
+ n.className = "input-label", n.textContent = this.translationFunc("cardholderNameLabel"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), s.appendChild(a);
2055
+ const r = document.createElement("div");
2056
+ 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;
2057
+ }
2058
+ async mountVgsFields(e) {
2059
+ if (!this.vgsService || !this.cardSection) return;
2060
+ await this.vgsService.whenReady();
2061
+ const t = this.cardSection.getVgsContainerIds(), s = this.cardholderSection?.getVgsContainerId(), a = await ut(
2062
+ e.styles.fontFamily
2063
+ ), n = this.cardSection.buildVgsFieldCss(
2064
+ e,
2065
+ a
2066
+ );
2067
+ this.vgsService.mountCardFields(
2068
+ {
2069
+ cardNumber: t.cardNumber ? `#${t.cardNumber}` : void 0,
2070
+ cardExpiry: t.cardExpiry ? `#${t.cardExpiry}` : void 0,
2071
+ cardCvv: t.cardCvv ? `#${t.cardCvv}` : void 0,
2072
+ cardholderName: s ? `#${s}` : void 0
2073
+ },
2074
+ n,
2075
+ {
2076
+ cardNumber: "1234 5678 9012 3456",
2077
+ cardExpiry: this.translationFunc("cardExpiry"),
2078
+ cardCvv: "CVV",
2079
+ cardholderName: this.translationFunc("cardholderNamePlaceholder")
2080
+ },
2081
+ (r) => this.cardSection?.updateVgsCardBrand(r)
2082
+ ), this.vgsService.waitForFieldsReady().then(() => {
2083
+ requestAnimationFrame(() => {
2084
+ this.cardSection?.hideFakePlaceholders(), this.cardholderSection?.hideFakePlaceholder();
2085
+ });
2086
+ });
2087
+ }
2088
+ handleVgsStateChange(e, t) {
2089
+ this.cardSection?.handleVgsStateChange(e, t), this.cardholderSection?.handleVgsStateChange(e, t);
2090
+ }
1711
2091
  cleanup() {
1712
2092
  if (this.emailField) {
1713
2093
  const e = this.emailField.getElement().querySelector('input[name="email"]');
@@ -1717,7 +2097,7 @@ class lt {
1717
2097
  const e = this.phoneNumberField.getElement().querySelector('input[name="phoneNumber"]');
1718
2098
  e && this.phoneNumberFocusHandler && e.removeEventListener("focus", this.phoneNumberFocusHandler), this.phoneNumberField.getElement().remove(), this.phoneNumberField = void 0;
1719
2099
  }
1720
- if (this.cardSection) {
2100
+ if (this.cardSectionSkeleton && (this.cardSectionSkeleton.remove(), this.cardSectionSkeleton = void 0), this.cardSection) {
1721
2101
  const e = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
1722
2102
  e && this.cardExpiryFocusHandler && e.removeEventListener(
1723
2103
  "focus",
@@ -1731,14 +2111,14 @@ class lt {
1731
2111
  const s = this.cardSection.getElement().querySelector('input[name="cardCvv"]');
1732
2112
  s && this.cardCvvFocusHandler && s.removeEventListener("focus", this.cardCvvFocusHandler), this.cardSection.getElement().remove(), this.cardSection = void 0;
1733
2113
  }
1734
- if (this.cardholderSection) {
2114
+ if (this.cardholderSectionSkeleton && (this.cardholderSectionSkeleton.remove(), this.cardholderSectionSkeleton = void 0), this.cardholderSection) {
1735
2115
  const e = this.cardholderSection.getElement().querySelector('input[name="name"]');
1736
2116
  e && this.nameFocusHandler && e.removeEventListener("focus", this.nameFocusHandler), this.cardholderSection.getElement().remove(), this.cardholderSection = void 0;
1737
2117
  }
1738
2118
  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);
1739
2119
  }
1740
2120
  }
1741
- class dt {
2121
+ class Et {
1742
2122
  formManager;
1743
2123
  focusManager;
1744
2124
  onFormSubmit;
@@ -1748,18 +2128,18 @@ class dt {
1748
2128
  this.formManager = e.formManager, this.focusManager = e.focusManager, this.onFormSubmit = e.onFormSubmit, this.onUIUpdate = e.onUIUpdate;
1749
2129
  }
1750
2130
  handleChange = (e) => {
1751
- const t = e.target, { name: s, value: i } = t, a = s;
1752
- this.formManager.handleChange(a, i), this.localTouchedFields.has(a) || (this.localTouchedFields.add(a), this.formManager.handleBlur(a, i));
1753
- const { formData: r, errors: d, touched: l } = this.formManager.getFormState();
1754
- this.focusManager.handleStateUpdate(r, d, l);
2131
+ const t = e.target, { name: s, value: a } = t, n = s;
2132
+ this.formManager.handleChange(n, a), this.localTouchedFields.has(n) || (this.localTouchedFields.add(n), this.formManager.handleBlur(n, a));
2133
+ const { formData: r, errors: o, touched: d } = this.formManager.getFormState();
2134
+ this.focusManager.handleStateUpdate(r, o, d);
1755
2135
  };
1756
2136
  handleBlur = (e) => {
1757
- const t = e.target, { name: s, value: i } = t, a = s;
1758
- this.localTouchedFields.add(a), this.formManager.handleBlur(a, i), setTimeout(() => {
2137
+ const t = e.target, { name: s, value: a } = t, n = s;
2138
+ this.localTouchedFields.add(n), this.formManager.handleBlur(n, a), setTimeout(() => {
1759
2139
  this.onUIUpdate();
1760
2140
  }, 0);
1761
- const { formData: r, errors: d, touched: l } = this.formManager.getFormState();
1762
- l[a] || this.focusManager.handleStateUpdate(r, d, l);
2141
+ const { formData: r, errors: o, touched: d } = this.formManager.getFormState();
2142
+ d[n] || this.focusManager.handleStateUpdate(r, o, d);
1763
2143
  };
1764
2144
  handleSubmit = async (e) => {
1765
2145
  e.preventDefault(), await this.onFormSubmit(e);
@@ -1779,7 +2159,7 @@ class dt {
1779
2159
  this.localTouchedFields.clear();
1780
2160
  }
1781
2161
  }
1782
- class ct {
2162
+ class Ct {
1783
2163
  formManager;
1784
2164
  checkoutProfile;
1785
2165
  formElement;
@@ -1789,6 +2169,8 @@ class ct {
1789
2169
  onLoadingChange;
1790
2170
  fontCleanup;
1791
2171
  isSubmitting = !1;
2172
+ isVgsMode = !1;
2173
+ vgsFieldsState = {};
1792
2174
  constructor(e) {
1793
2175
  this.formManager = e.formManager, this.checkoutProfile = e.checkoutProfile, this.formElement = e.formElement, this.onUIUpdate = e.onUIUpdate, this.onProfileLoaded = e.onProfileLoaded, this.onError = e.onError, this.onLoadingChange = e.onLoadingChange;
1794
2176
  }
@@ -1801,7 +2183,7 @@ class ct {
1801
2183
  try {
1802
2184
  if (e.checkoutProfile.styles?.fontFamily)
1803
2185
  try {
1804
- const { cleanup: t } = be({
2186
+ const { cleanup: t } = Me({
1805
2187
  fontFamily: e.checkoutProfile.styles.fontFamily
1806
2188
  });
1807
2189
  this.fontCleanup = t, this.formElement.style.fontFamily = e.checkoutProfile.styles.fontFamily;
@@ -1818,17 +2200,37 @@ class ct {
1818
2200
  };
1819
2201
  isFormDisabled() {
1820
2202
  const e = this.formManager.getFormState(), t = this.checkoutProfile.getState(), s = Object.keys(e.errors).filter(
1821
- (c) => c !== "billingAddress" && c !== "shippingAddress"
1822
- ).length > 0, i = e.errors.billingAddress, a = i && typeof i == "object" ? Object.keys(i).length > 0 : !1, r = e.errors.shippingAddress, d = r && typeof r == "object" ? Object.keys(r).length > 0 : !1, l = s || a || d, E = $(
2203
+ (y) => y !== "billingAddress" && y !== "shippingAddress"
2204
+ ).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, p = W(
1823
2205
  t.checkoutProfile?.layout
1824
- ) ? !!(e.formData.billingAddress?.firstName || e.formData.billingAddress?.lastName || e.formData.shippingAddress?.firstName || e.formData.shippingAddress?.lastName) : !!e.formData.name, o = t.checkoutProfile?.layout.phoneNumber?.enabled ?? !1 ? !!e.formData.phoneNumber : !0, { billingFields: f, shippingFields: m } = t.checkoutProfile?.layout ?? {}, h = (c, b) => !c || Object.entries(c).every(
1825
- ([g, S]) => !S?.enabled || !!b?.[g]?.trim()
1826
- ), p = !!e.formData.email && o && E && !!e.formData.cardNumber && !!e.formData.cardCvv && !!e.formData.cardExpiry && h(f, e.formData.billingAddress) && h(m, e.formData.shippingAddress);
1827
- return l || !p || this.isSubmitting;
2206
+ ) ? !!(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: g, shippingFields: m } = t.checkoutProfile?.layout ?? {}, u = (y, v) => !y || Object.entries(y).every(
2207
+ ([S, M]) => !M?.enabled || !!v?.[S]?.trim()
2208
+ ), f = !this.isVgsMode || Object.values(this.vgsFieldsState).every(
2209
+ (y) => y?.isValid === !0
2210
+ ), h = this.isVgsMode ? !!e.formData.email && l && f && u(g, e.formData.billingAddress) && u(m, e.formData.shippingAddress) : !!e.formData.email && l && p && !!e.formData.cardNumber && !!e.formData.cardCvv && !!e.formData.cardExpiry && u(g, e.formData.billingAddress) && u(m, e.formData.shippingAddress);
2211
+ return d || !h || this.isSubmitting;
1828
2212
  }
1829
2213
  setSubmitting(e) {
1830
2214
  this.isSubmitting = e;
1831
2215
  }
2216
+ setVgsMode(e) {
2217
+ this.isVgsMode = e;
2218
+ }
2219
+ updateVgsState(e) {
2220
+ this.vgsFieldsState = e;
2221
+ }
2222
+ getVgsFieldErrors(e) {
2223
+ const t = {};
2224
+ for (const [s, a] of Object.entries(this.vgsFieldsState)) {
2225
+ if (!a?.isTouched || a.isFocused || a.isValid)
2226
+ continue;
2227
+ const n = a.errors?.[0];
2228
+ if (!n) continue;
2229
+ const r = Ne(s, n.code);
2230
+ r && (t[s] = e(r));
2231
+ }
2232
+ return t;
2233
+ }
1832
2234
  getSubmitting() {
1833
2235
  return this.isSubmitting;
1834
2236
  }
@@ -1836,18 +2238,18 @@ class ct {
1836
2238
  this.fontCleanup && (this.fontCleanup(), this.fontCleanup = void 0);
1837
2239
  }
1838
2240
  }
1839
- class ht extends A {
2241
+ class Ft extends P {
1840
2242
  titleElement;
1841
2243
  constructor(e = {}) {
1842
2244
  super("div", ["blur-bg"]);
1843
- const t = w.createDiv(["loader"]);
1844
- this.titleElement = new A("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
2245
+ const t = k.createDiv(["loader"]);
2246
+ this.titleElement = new P("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
1845
2247
  }
1846
2248
  setText(e) {
1847
2249
  return this.titleElement.setText(e), this;
1848
2250
  }
1849
2251
  }
1850
- const ne = {
2252
+ const oe = {
1851
2253
  street: "",
1852
2254
  firstName: "",
1853
2255
  lastName: "",
@@ -1855,16 +2257,16 @@ const ne = {
1855
2257
  city: "",
1856
2258
  zipCode: "",
1857
2259
  country: ""
1858
- }, ae = (n, e) => {
2260
+ }, le = (i, e) => {
1859
2261
  const t = {}, s = `${e}.`;
1860
- return Object.keys(n).forEach((i) => {
1861
- if (i.startsWith(s)) {
1862
- const a = i.slice(s.length);
1863
- t[a] = n[i];
2262
+ return Object.keys(i).forEach((a) => {
2263
+ if (a.startsWith(s)) {
2264
+ const n = a.slice(s.length);
2265
+ t[n] = i[a];
1864
2266
  }
1865
2267
  }), t;
1866
2268
  };
1867
- class ut {
2269
+ class Mt {
1868
2270
  formElement;
1869
2271
  componentManager;
1870
2272
  onLoadingStateChange;
@@ -1898,13 +2300,13 @@ class ut {
1898
2300
  !!(e.errors.name && e.touched.name),
1899
2301
  e.errors.name
1900
2302
  ), this.componentManager.updateBillingAddressSection(
1901
- e.formData.billingAddress ?? ne,
2303
+ e.formData.billingAddress ?? oe,
1902
2304
  e.errors.billingAddress ?? {},
1903
- ae(e.touched, "billingAddress")
2305
+ le(e.touched, "billingAddress")
1904
2306
  ), this.componentManager.updateShippingAddressSection(
1905
- e.formData.shippingAddress ?? ne,
2307
+ e.formData.shippingAddress ?? oe,
1906
2308
  e.errors.shippingAddress ?? {},
1907
- ae(e.touched, "shippingAddress")
2309
+ le(e.touched, "shippingAddress")
1908
2310
  ), this.componentManager.updateSubmitButton(t);
1909
2311
  }
1910
2312
  setLoadingState(e) {
@@ -1912,10 +2314,10 @@ class ut {
1912
2314
  this.onLoadingStateChange(e);
1913
2315
  return;
1914
2316
  }
1915
- e ? (this.hideSkeleton(), this.formSkeleton = new oe(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
2317
+ e ? (this.hideSkeleton(), this.formSkeleton = new he(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
1916
2318
  }
1917
2319
  showSpinner(e) {
1918
- this.hideSpinner(), this.spinner = new ht({ text: e }), this.formElement.appendChild(this.spinner.getElement());
2320
+ this.hideSpinner(), this.spinner = new Ft({ text: e }), this.formElement.appendChild(this.spinner.getElement());
1919
2321
  }
1920
2322
  hideSpinner() {
1921
2323
  this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
@@ -1924,7 +2326,7 @@ class ut {
1924
2326
  this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0);
1925
2327
  }
1926
2328
  setErrorMessage(e) {
1927
- this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new Ee({ message: e }), this.formElement.insertBefore(
2329
+ this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new we({ message: e }), this.formElement.insertBefore(
1928
2330
  this.alert.getElement(),
1929
2331
  this.formElement.firstChild
1930
2332
  );
@@ -1936,7 +2338,7 @@ class ut {
1936
2338
  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);
1937
2339
  }
1938
2340
  }
1939
- const I = (n) => ({
2341
+ const D = (i) => ({
1940
2342
  street: "",
1941
2343
  firstName: "",
1942
2344
  lastName: "",
@@ -1944,23 +2346,27 @@ const I = (n) => ({
1944
2346
  city: "",
1945
2347
  zipCode: "",
1946
2348
  country: "",
1947
- ...n
2349
+ ...i
1948
2350
  });
1949
- class mt extends A {
2351
+ class Nt extends P {
1950
2352
  options;
1951
- formManager = tt();
2353
+ formManager = lt();
1952
2354
  checkoutProfile;
1953
- translation = Se();
1954
- focusManager = new Fe();
2355
+ translation = Pe();
2356
+ focusManager = new ke();
1955
2357
  // Managers
1956
2358
  componentManager;
1957
2359
  eventHandler;
1958
2360
  stateCoordinator;
1959
2361
  uiManager;
2362
+ // VGS
2363
+ vgsService;
2364
+ vgsJwt;
2365
+ vgsCardResult;
1960
2366
  constructor(e) {
1961
- super("form", ["form-container"]), this.options = e, this.checkoutProfile = et({
2367
+ super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new I()), this.checkoutProfile = ot({
1962
2368
  appearance: e.appearance
1963
- }), e.locale && this.translation.setLocale(e.locale), this.componentManager = new lt({
2369
+ }), e.locale && this.translation.setLocale(e.locale), this.componentManager = new St({
1964
2370
  formElement: this.element,
1965
2371
  focusManager: this.focusManager,
1966
2372
  translationFunc: this.translation.t,
@@ -1974,12 +2380,14 @@ class mt extends A {
1974
2380
  paymentId: e.paymentId,
1975
2381
  checkoutKey: e.checkoutKey,
1976
2382
  checkoutDetails: e.checkoutDetails,
1977
- environment: e.environment
1978
- }), this.uiManager = new ut({
2383
+ environment: e.environment,
2384
+ vgsService: this.vgsService,
2385
+ onVgsStateChange: (t) => this.handleVgsStateChange(t)
2386
+ }), this.uiManager = new Mt({
1979
2387
  formElement: this.element,
1980
2388
  componentManager: this.componentManager,
1981
2389
  onLoadingStateChange: e.onLoadingStateChange
1982
- }), this.stateCoordinator = new ct({
2390
+ }), this.stateCoordinator = new Ct({
1983
2391
  formManager: this.formManager,
1984
2392
  checkoutProfile: this.checkoutProfile,
1985
2393
  componentManager: this.componentManager,
@@ -1989,7 +2397,7 @@ class mt extends A {
1989
2397
  onError: (t) => this.uiManager.setErrorMessage(t),
1990
2398
  onLoadingChange: (t) => this.uiManager.setLoadingState(t),
1991
2399
  getInitialFormData: () => this._getFormStateData().formData
1992
- }), this.eventHandler = new dt({
2400
+ }), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new Et({
1993
2401
  formManager: this.formManager,
1994
2402
  focusManager: this.focusManager,
1995
2403
  onFormSubmit: async () => this.handleSubmit(),
@@ -2014,12 +2422,12 @@ class mt extends A {
2014
2422
  },
2015
2423
  ...e.initialValues.name && { name: e.initialValues.name },
2016
2424
  ...e.initialValues.billingAddress && {
2017
- billingAddress: I(
2425
+ billingAddress: D(
2018
2426
  e.initialValues.billingAddress
2019
2427
  )
2020
2428
  },
2021
2429
  ...e.initialValues.shippingAddress && {
2022
- shippingAddress: I(
2430
+ shippingAddress: D(
2023
2431
  e.initialValues.shippingAddress
2024
2432
  )
2025
2433
  }
@@ -2036,10 +2444,10 @@ class mt extends A {
2036
2444
  cardNumber: "",
2037
2445
  cardCvv: "",
2038
2446
  ...t?.billingAddress && {
2039
- billingAddress: I(t.billingAddress)
2447
+ billingAddress: D(t.billingAddress)
2040
2448
  },
2041
2449
  ...t?.shippingAddress && {
2042
- shippingAddress: I(t.shippingAddress)
2450
+ shippingAddress: D(t.shippingAddress)
2043
2451
  }
2044
2452
  },
2045
2453
  errors: e.errors || {},
@@ -2047,7 +2455,14 @@ class mt extends A {
2047
2455
  };
2048
2456
  }
2049
2457
  initializeForm() {
2050
- this.uiManager.setLoadingState(!0), this.options.errorMsg && this.uiManager.setErrorMessage(this.options.errorMsg);
2458
+ this.uiManager.setLoadingState(!0), this.options.errorMsg && this.uiManager.setErrorMessage(this.options.errorMsg), this.vgsService && this.vgsService.init(this.options.environment).then((e) => {
2459
+ this.vgsService?.createForm(
2460
+ e,
2461
+ (t) => this.handleVgsStateChange(t)
2462
+ );
2463
+ }).catch(() => {
2464
+ this.vgsService = void 0, this.vgsJwt = void 0;
2465
+ });
2051
2466
  }
2052
2467
  renderFormComponents() {
2053
2468
  const e = this.checkoutProfile.getState();
@@ -2055,12 +2470,15 @@ class mt extends A {
2055
2470
  this.uiManager.setErrorMessage("Failed to load checkout configuration");
2056
2471
  return;
2057
2472
  }
2058
- this.componentManager.hasComponents() && this.componentManager.cleanup(), e.checkoutProfile.layout.phoneNumber?.enabled && this.formManager.getFormState().formData.phoneNumber === void 0 && this.formManager.setFormData({ phoneNumber: "" }), e.checkoutProfile.layout.billingFields && this.formManager.getFormState().formData.billingAddress === void 0 && this.formManager.setFormData({
2059
- billingAddress: I()
2473
+ this.componentManager.hasComponents() && this.componentManager.cleanup(), e.checkoutProfile.layout.phoneNumber?.enabled && this.formManager.getFormState().formData.phoneNumber === void 0 && this.formManager.setFormData({
2474
+ phoneNumber: "",
2475
+ phoneCountryCode: e.checkoutProfile.layout.phoneNumber.defaultCountry?.toUpperCase() || "US"
2476
+ }), e.checkoutProfile.layout.billingFields && this.formManager.getFormState().formData.billingAddress === void 0 && this.formManager.setFormData({
2477
+ billingAddress: D()
2060
2478
  }), e.checkoutProfile.layout.shippingFields && this.formManager.getFormState().formData.shippingAddress === void 0 && this.formManager.setFormData({
2061
- shippingAddress: I()
2479
+ shippingAddress: D()
2062
2480
  });
2063
- const { formData: t, errors: s, touched: i } = this._getFormStateData(), a = $(
2481
+ const { formData: t, errors: s, touched: a } = this._getFormStateData(), n = mt(
2064
2482
  e.checkoutProfile.layout
2065
2483
  );
2066
2484
  try {
@@ -2068,39 +2486,39 @@ class mt extends A {
2068
2486
  e.checkoutProfile,
2069
2487
  t
2070
2488
  );
2071
- } catch (r) {
2072
- console.error("Failed to create payment methods:", r);
2489
+ } catch (o) {
2490
+ console.error("Failed to create payment methods:", o);
2073
2491
  }
2074
2492
  try {
2075
2493
  this.componentManager.createEmailField(
2076
2494
  e.checkoutProfile,
2077
2495
  t,
2078
2496
  s,
2079
- i
2497
+ a
2080
2498
  );
2081
- } catch (r) {
2082
- console.error("Failed to create email field:", r);
2499
+ } catch (o) {
2500
+ console.error("Failed to create email field:", o);
2083
2501
  }
2084
- if (a) {
2502
+ if (n) {
2085
2503
  try {
2086
2504
  this.componentManager.createBillingAddressSection(
2087
2505
  e.checkoutProfile,
2088
2506
  t,
2089
2507
  s,
2090
- i
2508
+ a
2091
2509
  );
2092
- } catch (r) {
2093
- console.error("Failed to create billing address section:", r);
2510
+ } catch (o) {
2511
+ console.error("Failed to create billing address section:", o);
2094
2512
  }
2095
2513
  try {
2096
2514
  this.componentManager.createShippingAddressSection(
2097
2515
  e.checkoutProfile,
2098
2516
  t,
2099
2517
  s,
2100
- i
2518
+ a
2101
2519
  );
2102
- } catch (r) {
2103
- console.error("Failed to create shipping address section:", r);
2520
+ } catch (o) {
2521
+ console.error("Failed to create shipping address section:", o);
2104
2522
  }
2105
2523
  }
2106
2524
  if (e.checkoutProfile.layout.phoneNumber?.enabled)
@@ -2109,39 +2527,44 @@ class mt extends A {
2109
2527
  e.checkoutProfile,
2110
2528
  t,
2111
2529
  s,
2112
- i
2530
+ a
2113
2531
  );
2114
- } catch (r) {
2115
- console.error("Failed to create phone number field:", r);
2532
+ } catch (o) {
2533
+ console.error("Failed to create phone number field:", o);
2116
2534
  }
2117
2535
  try {
2118
2536
  this.componentManager.createCardSection(
2119
2537
  e.checkoutProfile,
2120
2538
  t,
2121
2539
  s,
2122
- i
2540
+ a
2123
2541
  );
2124
- } catch (r) {
2125
- console.error("Failed to create card section:", r);
2542
+ } catch (o) {
2543
+ console.error("Failed to create card section:", o);
2126
2544
  }
2127
- if (!a)
2545
+ if (!W(
2546
+ e.checkoutProfile.layout
2547
+ ))
2128
2548
  try {
2129
2549
  this.componentManager.createCardholderSection(
2130
2550
  e.checkoutProfile,
2131
2551
  t,
2132
2552
  s,
2133
- i
2553
+ a
2134
2554
  );
2135
- } catch (r) {
2136
- console.error("Failed to create cardholder section:", r);
2555
+ } catch (o) {
2556
+ console.error("Failed to create cardholder section:", o);
2137
2557
  }
2558
+ this.vgsService && this.componentManager.mountVgsFields(e.checkoutProfile).catch((o) => {
2559
+ console.error("Failed to mount VGS fields:", o);
2560
+ });
2138
2561
  try {
2139
2562
  this.componentManager.createSubmitButton(
2140
2563
  e.checkoutProfile,
2141
2564
  this.stateCoordinator.isFormDisabled()
2142
2565
  );
2143
- } catch (r) {
2144
- console.error("Failed to create submit button:", r);
2566
+ } catch (o) {
2567
+ console.error("Failed to create submit button:", o);
2145
2568
  }
2146
2569
  }
2147
2570
  updateFormUI() {
@@ -2157,13 +2580,13 @@ class mt extends A {
2157
2580
  */
2158
2581
  inferCardholderName() {
2159
2582
  const e = this.checkoutProfile.getState();
2160
- if (!e.checkoutProfile || !$(
2583
+ if (!e.checkoutProfile || !W(
2161
2584
  e.checkoutProfile.layout
2162
2585
  )) return;
2163
- const { formData: s } = this._getFormStateData(), i = s.billingAddress ?? s.shippingAddress;
2164
- if (!i) return;
2165
- const a = i.firstName?.trim() ?? "", r = i.lastName?.trim() ?? "", d = [a, r].filter(Boolean).join(" ");
2166
- d && this.formManager.setFormData({ name: d });
2586
+ const { formData: s } = this._getFormStateData(), a = s.billingAddress ?? s.shippingAddress;
2587
+ if (!a) return;
2588
+ const n = a.firstName?.trim() ?? "", r = a.lastName?.trim() ?? "", o = [n, r].filter(Boolean).join(" ");
2589
+ o && this.formManager.setFormData({ name: o });
2167
2590
  }
2168
2591
  /**
2169
2592
  * Infers address data based on field configuration.
@@ -2173,18 +2596,46 @@ class mt extends A {
2173
2596
  inferAddresses() {
2174
2597
  const e = this.checkoutProfile.getState();
2175
2598
  if (!e.checkoutProfile) return;
2176
- const { billingFields: t, shippingFields: s } = e.checkoutProfile.layout, i = t && Object.values(t).some((d) => d?.enabled), a = s && Object.values(s).some((d) => d?.enabled), { formData: r } = this._getFormStateData();
2177
- !i && a && r.shippingAddress ? this.formManager.setFormData({
2599
+ 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();
2600
+ !a && n && r.shippingAddress ? this.formManager.setFormData({
2178
2601
  billingAddress: { ...r.shippingAddress }
2179
- }) : !a && i && r.billingAddress && this.formManager.setFormData({
2602
+ }) : !n && a && r.billingAddress && this.formManager.setFormData({
2180
2603
  shippingAddress: { ...r.billingAddress }
2181
2604
  });
2182
2605
  }
2606
+ handleVgsStateChange(e) {
2607
+ this.stateCoordinator.updateVgsState(e);
2608
+ const t = this.stateCoordinator.getVgsFieldErrors(
2609
+ this.translation.t
2610
+ );
2611
+ this.componentManager.handleVgsStateChange(e, t), this.updateFormUI();
2612
+ }
2183
2613
  async handleSubmit() {
2184
2614
  if (!this.stateCoordinator.isFormDisabled())
2185
2615
  try {
2186
- this.stateCoordinator.setSubmitting(!0), this.updateFormUI(), this.options.onLoadingStateChange?.(!0), this.uiManager.showSpinner(this.translation.t("loading")), this.inferCardholderName(), this.inferAddresses(), await this.options.onSubmit({
2187
- formData: this.formManager.getFormState().formData
2616
+ if (this.stateCoordinator.setSubmitting(!0), this.updateFormUI(), this.options.onLoadingStateChange?.(!0), this.uiManager.showSpinner(this.translation.t("loading")), this.inferCardholderName(), this.inferAddresses(), this.vgsService && this.vgsJwt)
2617
+ try {
2618
+ this.vgsCardResult = await this.vgsService.createCard(this.vgsJwt);
2619
+ } catch (t) {
2620
+ console.error("VGS card creation failed:", t), this.handleSubmitError(
2621
+ "Card processing failed. Please check your card details and try again."
2622
+ );
2623
+ return;
2624
+ }
2625
+ const e = this.formManager.getFormState().formData;
2626
+ await this.options.onSubmit({
2627
+ formData: this.vgsCardResult ? {
2628
+ ...e,
2629
+ vgsCardData: {
2630
+ cardId: this.vgsCardResult.cardId,
2631
+ expMonth: this.vgsCardResult.expMonth,
2632
+ expYear: this.vgsCardResult.expYear,
2633
+ name: this.vgsCardResult.name,
2634
+ ...this.vgsCardResult.updatedValues && {
2635
+ updatedValues: this.vgsCardResult.updatedValues
2636
+ }
2637
+ }
2638
+ } : e
2188
2639
  }), this.uiManager.hideSpinner(), this.options.onLoadingStateChange?.(!1), this.stateCoordinator.setSubmitting(!1), this.updateFormUI();
2189
2640
  } catch {
2190
2641
  this.handleSubmitError("Payment processing failed. Please try again.");
@@ -2228,7 +2679,7 @@ class mt extends A {
2228
2679
  e.locale && this.translation.setLocale(e.locale), e.appearance && this.checkoutProfile.updateProfile(e.appearance), e.locale && (this.componentManager.cleanup(), this.renderFormComponents());
2229
2680
  }
2230
2681
  destroy() {
2231
- this.stateCoordinator.cleanup(), this.eventHandler.clearTouchedFields(), this.getElement().removeEventListener(
2682
+ this.vgsService?.destroy(), this.stateCoordinator.cleanup(), this.eventHandler.clearTouchedFields(), this.getElement().removeEventListener(
2232
2683
  "submit",
2233
2684
  this.eventHandler.handleSubmit
2234
2685
  ), this.getElement().removeEventListener(
@@ -2236,26 +2687,33 @@ class mt extends A {
2236
2687
  this.eventHandler.handleKeyDown
2237
2688
  ), this.componentManager.cleanup(), this.uiManager.cleanup(), this.getElement().remove();
2238
2689
  }
2239
- associatePayment(e, t, s, i) {
2240
- this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = i, this.componentManager.removePaymentMethods(), this.componentManager.updateSupportedPaymentMethods(
2690
+ associatePayment(e, t, s, a, n) {
2691
+ 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 I(), this.componentManager.setVgsService(this.vgsService), this.stateCoordinator.setVgsMode(!0), this.vgsService.init(this.options.environment).then((o) => {
2692
+ this.vgsService?.createForm(
2693
+ o,
2694
+ (d) => this.handleVgsStateChange(d)
2695
+ ), this.renderFormComponents();
2696
+ }).catch((o) => {
2697
+ console.error("Failed to load VGS Collect:", o), this.vgsService = void 0, this.vgsJwt = void 0, this.renderFormComponents();
2698
+ })), this.componentManager.removePaymentMethods(), this.componentManager.updateSupportedPaymentMethods(
2241
2699
  s
2242
2700
  ), this.componentManager.updatePaymentDetails(
2243
2701
  e,
2244
2702
  t,
2245
- i
2246
- );
2247
- const a = this.checkoutProfile.getState();
2248
- if (a.checkoutProfile) {
2249
- const { formData: r } = this._getFormStateData();
2703
+ a
2704
+ ), !n && this.checkoutProfile.getState().checkoutProfile && this.renderFormComponents();
2705
+ const r = this.checkoutProfile.getState();
2706
+ if (r.checkoutProfile) {
2707
+ const { formData: o } = this._getFormStateData();
2250
2708
  this.componentManager.createPaymentMethods(
2251
- a.checkoutProfile,
2252
- r,
2709
+ r.checkoutProfile,
2710
+ o,
2253
2711
  !0
2254
2712
  );
2255
2713
  }
2256
2714
  }
2257
2715
  }
2258
- class pt {
2716
+ class wt {
2259
2717
  container = null;
2260
2718
  options;
2261
2719
  onSubmit;
@@ -2279,7 +2737,7 @@ class pt {
2279
2737
  }
2280
2738
  }
2281
2739
  renderForm(e) {
2282
- this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new mt({
2740
+ this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new Nt({
2283
2741
  apiKey: this.options.apiKey,
2284
2742
  onSubmit: this.onSubmit,
2285
2743
  locale: this.options.locale,
@@ -2291,7 +2749,8 @@ class pt {
2291
2749
  paymentId: this.options.paymentId,
2292
2750
  checkoutKey: this.options.checkoutKey,
2293
2751
  checkoutDetails: this.options.checkoutDetails,
2294
- initialValues: this.options.initialValues
2752
+ initialValues: this.options.initialValues,
2753
+ vgsJwt: this.options.vgsJwt
2295
2754
  }));
2296
2755
  }
2297
2756
  unmount() {
@@ -2305,16 +2764,17 @@ class pt {
2305
2764
  clearError() {
2306
2765
  this.form && this.form.clearErrorMessage();
2307
2766
  }
2308
- async associatePayment(e, t, s, i) {
2309
- this.options.paymentId = e, this.options.checkoutKey = t, this.options.checkoutDetails = i, this.form && this.form.associatePayment(
2767
+ async associatePayment(e, t, s, a, n) {
2768
+ this.options.paymentId = e, this.options.checkoutKey = t, this.options.checkoutDetails = a, this.options.vgsJwt = n, this.form && this.form.associatePayment(
2310
2769
  e,
2311
2770
  t,
2312
2771
  s,
2313
- i
2772
+ a,
2773
+ n
2314
2774
  );
2315
2775
  }
2316
2776
  }
2317
- class ft {
2777
+ class Pt {
2318
2778
  state;
2319
2779
  listeners = /* @__PURE__ */ new Set();
2320
2780
  constructor(e) {
@@ -2336,8 +2796,8 @@ class ft {
2336
2796
  this.listeners.forEach((t) => t(e));
2337
2797
  }
2338
2798
  }
2339
- const gt = "en";
2340
- class yt {
2799
+ const kt = "en";
2800
+ class At {
2341
2801
  config;
2342
2802
  paymentState;
2343
2803
  apiService;
@@ -2345,18 +2805,18 @@ class yt {
2345
2805
  stateManager;
2346
2806
  sessionId;
2347
2807
  constructor(e) {
2348
- this.config = this.validateConfig(e), this.paymentState = {}, this.sessionId = crypto.randomUUID(), Qe({
2808
+ this.config = this.validateConfig(e), this.paymentState = {}, this.sessionId = crypto.randomUUID(), at({
2349
2809
  environment: this.config.environment,
2350
2810
  sessionId: this.sessionId
2351
- }), C(v.CHECKOUT_INITIALIZED, {
2811
+ }), F(C.CHECKOUT_INITIALIZED, {
2352
2812
  environment: this.config.environment
2353
- }), this.apiService = new ve(
2813
+ }), this.apiService = new Ae(
2354
2814
  this.config.apiKey,
2355
2815
  this.config.environment
2356
- ), this.stateManager = new ft({
2816
+ ), this.stateManager = new Pt({
2357
2817
  mounted: !1,
2358
2818
  form: null
2359
- }), this.formManager = new pt(
2819
+ }), this.formManager = new wt(
2360
2820
  {
2361
2821
  locale: this.config.locale,
2362
2822
  apiKey: this.config.apiKey,
@@ -2378,7 +2838,7 @@ class yt {
2378
2838
  apiKey: e.apiKey,
2379
2839
  returnUrl: e.returnUrl,
2380
2840
  environment: e.environment,
2381
- locale: e.locale || gt,
2841
+ locale: e.locale || kt,
2382
2842
  disableErrorMessages: e.disableErrorMessages ?? !1,
2383
2843
  manualActionHandling: e.manualActionHandling ?? !1,
2384
2844
  appearance: e.appearance,
@@ -2399,7 +2859,7 @@ class yt {
2399
2859
  return t.appendChild(s), this.stateManager.updateState({
2400
2860
  form: s,
2401
2861
  mounted: !0
2402
- }), this.formManager.mount(s), C(v.CHECKOUT_MOUNTED, {
2862
+ }), this.formManager.mount(s), F(C.CHECKOUT_MOUNTED, {
2403
2863
  container_id: e
2404
2864
  }), this;
2405
2865
  }
@@ -2411,7 +2871,7 @@ class yt {
2411
2871
  t && t.remove(), this.stateManager.updateState({
2412
2872
  form: null,
2413
2873
  mounted: !1
2414
- }), C(v.CHECKOUT_UNMOUNTED);
2874
+ }), F(C.CHECKOUT_UNMOUNTED);
2415
2875
  });
2416
2876
  }
2417
2877
  async handleSubmit({
@@ -2423,21 +2883,21 @@ class yt {
2423
2883
  "Payment must be associated before submitting. Call associatePayment() first."
2424
2884
  );
2425
2885
  const s = this.getPaymentMethod(e, t);
2426
- C(v.PAYMENT_SUBMIT_STARTED, {
2886
+ F(C.PAYMENT_SUBMIT_STARTED, {
2427
2887
  payment_id: this.paymentState.paymentId,
2428
2888
  payment_method: s
2429
2889
  });
2430
- const i = performance.now();
2890
+ const a = performance.now();
2431
2891
  try {
2432
- const a = await this.apiService.authorizePayment({
2892
+ const n = await this.apiService.authorizePayment({
2433
2893
  checkoutKey: this.paymentState.checkoutKey,
2434
2894
  formData: e || null,
2435
2895
  paymentId: this.paymentState.paymentId,
2436
2896
  returnUrl: this.config.returnUrl,
2437
2897
  applePayData: t
2438
- }), r = performance.now() - i;
2439
- te(
2440
- G.PAYMENT_AUTHORIZATION_TIME,
2898
+ }), r = performance.now() - a;
2899
+ ne(
2900
+ X.PAYMENT_AUTHORIZATION_TIME,
2441
2901
  r,
2442
2902
  "ms",
2443
2903
  {
@@ -2445,14 +2905,14 @@ class yt {
2445
2905
  payment_method: s,
2446
2906
  status: "success"
2447
2907
  }
2448
- ), C(v.PAYMENT_SUBMIT_SUCCESS, {
2908
+ ), F(C.PAYMENT_SUBMIT_SUCCESS, {
2449
2909
  payment_id: this.paymentState.paymentId,
2450
2910
  payment_method: s
2451
- }), this.handlePaymentResponse(a);
2452
- } catch (a) {
2453
- const r = performance.now() - i;
2454
- te(
2455
- G.PAYMENT_AUTHORIZATION_TIME,
2911
+ }), this.handlePaymentResponse(n);
2912
+ } catch (n) {
2913
+ const r = performance.now() - a;
2914
+ ne(
2915
+ X.PAYMENT_AUTHORIZATION_TIME,
2456
2916
  r,
2457
2917
  "ms",
2458
2918
  {
@@ -2460,25 +2920,25 @@ class yt {
2460
2920
  payment_method: s,
2461
2921
  status: "failed"
2462
2922
  }
2463
- ), C(v.PAYMENT_SUBMIT_FAILED, {
2923
+ ), F(C.PAYMENT_SUBMIT_FAILED, {
2464
2924
  payment_id: this.paymentState.paymentId,
2465
2925
  payment_method: s,
2466
- error_message: a.details?.message ?? "Unknown error"
2467
- }), this.handleAuthorizationError(a);
2926
+ error_message: n.details?.message ?? "Unknown error"
2927
+ }), this.handleAuthorizationError(n);
2468
2928
  }
2469
2929
  }
2470
2930
  handlePaymentResponse(e) {
2471
- if (e.latestTransaction.status === "authorized" && (C(v.PAYMENT_AUTHORIZED, {
2931
+ if (e.latestTransaction.status === "authorized" && (F(C.PAYMENT_AUTHORIZED, {
2472
2932
  payment_id: this.paymentState.paymentId ?? "",
2473
2933
  status: e.latestTransaction.status
2474
2934
  }), this.config.callbacks.onPaymentSucceeded?.(
2475
2935
  e.latestTransaction.status
2476
- )), e.latestTransaction.status === "failed" && (C(v.PAYMENT_FAILED, {
2936
+ )), e.latestTransaction.status === "failed" && (F(C.PAYMENT_FAILED, {
2477
2937
  payment_id: this.paymentState.paymentId ?? "",
2478
2938
  status: e.latestTransaction.status
2479
2939
  }), this.config.callbacks.onPaymentFailed?.(e.latestTransaction.status)), e.status === "requires_action") {
2480
2940
  const { redirectUrl: t } = e.action;
2481
- C(v.PAYMENT_ACTION_REQUIRED, {
2941
+ F(C.PAYMENT_ACTION_REQUIRED, {
2482
2942
  payment_id: this.paymentState.paymentId ?? "",
2483
2943
  status: e.status
2484
2944
  }), this.config.manualActionHandling ? this.config.callbacks.onActionRequired?.(t) : globalThis.location.href = t;
@@ -2518,7 +2978,7 @@ class yt {
2518
2978
  throw new Error("paymentId and checkoutKey are required");
2519
2979
  this.paymentState.paymentId = e, this.paymentState.checkoutKey = t;
2520
2980
  try {
2521
- const s = await Ce({
2981
+ const s = await De({
2522
2982
  id: e,
2523
2983
  checkoutKey: t,
2524
2984
  environment: this.config.environment
@@ -2528,7 +2988,7 @@ class yt {
2528
2988
  "Invalid response: supportedPaymentMethods must be an array"
2529
2989
  );
2530
2990
  if (!s.supportedPaymentMethods.every(
2531
- (a) => typeof a == "string"
2991
+ (n) => typeof n == "string"
2532
2992
  ))
2533
2993
  throw new Error(
2534
2994
  "Invalid response: all supportedPaymentMethods must be strings"
@@ -2538,44 +2998,45 @@ class yt {
2538
2998
  currency: s.currency,
2539
2999
  countryCode: s.countryCode
2540
3000
  };
2541
- const i = s.supportedPaymentMethods.reduce(
2542
- (a, r) => (a[r] = !0, a),
3001
+ const a = s.supportedPaymentMethods.reduce(
3002
+ (n, r) => (n[r] = !0, n),
2543
3003
  {}
2544
3004
  );
2545
3005
  await this.formManager.associatePayment(
2546
3006
  e,
2547
3007
  t,
2548
- i,
2549
- this.paymentState.checkoutDetails
2550
- ), C(v.PAYMENT_ASSOCIATED, {
3008
+ a,
3009
+ this.paymentState.checkoutDetails,
3010
+ s.vgsJwt
3011
+ ), F(C.PAYMENT_ASSOCIATED, {
2551
3012
  payment_id: e,
2552
3013
  currency: s.currency,
2553
3014
  country_code: s.countryCode
2554
3015
  });
2555
3016
  } catch (s) {
2556
- throw C(v.PAYMENT_ASSOCIATION_FAILED, {
3017
+ throw F(C.PAYMENT_ASSOCIATION_FAILED, {
2557
3018
  payment_id: e,
2558
3019
  error_message: s instanceof Error ? s.message : "Unknown error"
2559
- }), Je(
3020
+ }), rt(
2560
3021
  s instanceof Error ? s : new Error("Failed to associate payment"),
2561
3022
  { payment_id: e }
2562
3023
  ), s;
2563
3024
  }
2564
3025
  }
2565
3026
  }
2566
- typeof globalThis < "u" && (globalThis.OdusCheckout = yt);
3027
+ typeof globalThis < "u" && (globalThis.OdusCheckout = At);
2567
3028
  export {
2568
- yt as OdusCheckout,
2569
- vt as deLocale,
2570
- Ct as enLocale,
2571
- Mt as esLocale,
2572
- Nt as frLocale,
2573
- Pt as itLocale,
2574
- At as plLocale,
2575
- wt as ptLocale,
2576
- Je as pushError,
2577
- C as pushEvent,
2578
- Et as pushLog,
2579
- te as pushMeasurement,
2580
- kt as trLocale
3029
+ At as OdusCheckout,
3030
+ Tt as deLocale,
3031
+ Vt as enLocale,
3032
+ _t as esLocale,
3033
+ Bt as frLocale,
3034
+ Ot as itLocale,
3035
+ Rt as plLocale,
3036
+ Ut as ptLocale,
3037
+ rt as pushError,
3038
+ F as pushEvent,
3039
+ It as pushLog,
3040
+ ne as pushMeasurement,
3041
+ Ht as trLocale
2581
3042
  };