UNPKG

@exerp/odin-dropin

Version:
1,077 lines 60.3 kB
var me = Object.defineProperty; var ye = (e, n, i) => n in e ? me(e, n, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[n] = i; var p = (e, n, i) => ye(e, typeof n != "symbol" ? n + "" : n, i); const $e = "exerp-odin-dropin-core", T = ( /* exerp-odin-dropin-core */ { hydratedSelectorName: "hydrated", lazyLoad: !1, updatable: !0 } ); var Ce = Object.defineProperty, be = (e, n) => { for (var i in n) Ce(e, i, { get: n[i], enumerable: !0 }); }, Ee = (e, n) => { var i; const t = n.$cmpMeta$; Object.entries((i = t.$members$) != null ? i : {}).map(([r, [a]]) => { if (a & 31 || a & 32) { const s = e[r], c = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e), r); Object.defineProperty(e, r, { get() { return c.get.call(this); }, set(l) { c.set.call(this, l); }, configurable: !0, enumerable: !0 }), e[r] = n.$instanceValues$.has(r) ? n.$instanceValues$.get(r) : s; } }); }, b = (e) => { if (e.__stencil__getHostRef) return e.__stencil__getHostRef(); }, Oe = (e, n) => { const i = { $flags$: 0, $hostElement$: e, $cmpMeta$: n, $instanceValues$: /* @__PURE__ */ new Map() }; i.$onReadyPromise$ = new Promise((o) => i.$onReadyResolve$ = o), e["s-p"] = [], e["s-rc"] = []; const t = i; return e.__stencil__getHostRef = () => t, Ee(e, i), t; }, H = (e, n) => n in e, k = (e, n) => (0, console.error)(e, n), L = /* @__PURE__ */ new Map(), ve = "sty-id", Pe = "slot-fb{display:contents}slot-fb[hidden]{display:none}", $ = typeof window < "u" ? window : {}, Fe = $.HTMLElement || class { }, E = { $flags$: 0, $resourcesUrl$: "", jmp: (e) => e(), raf: (e) => requestAnimationFrame(e), ael: (e, n, i, t) => e.addEventListener(n, i, t), rel: (e, n, i, t) => e.removeEventListener(n, i, t), ce: (e, n) => new CustomEvent(e, n) }, Ie = (e) => Promise.resolve(e), ie = /* @__PURE__ */ (() => { try { return new CSSStyleSheet(), typeof new CSSStyleSheet().replaceSync == "function"; } catch { } return !1; })(), B = !1, W = [], ne = [], Re = (e, n) => (i) => { e.push(i), B || (B = !0, E.raf(oe)); }, Y = (e) => { for (let n = 0; n < e.length; n++) try { e[n](performance.now()); } catch (i) { k(i); } e.length = 0; }, oe = () => { Y(W), Y(ne), (B = W.length > 0) && E.raf(oe); }, M = (e) => Ie().then(e), Ae = /* @__PURE__ */ Re(ne), z = (e) => (e = typeof e, e === "object" || e === "function"); function Le(e) { var n, i, t; return (t = (i = (n = e.head) == null ? void 0 : n.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : i.getAttribute("content")) != null ? t : void 0; } var _e = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), Se = {}; be(Se, { err: () => re, map: () => Te, ok: () => U, unwrap: () => ke, unwrapErr: () => Ne }); var U = (e) => ({ isOk: !0, isErr: !1, value: e }), re = (e) => ({ isOk: !1, isErr: !0, value: e }); function Te(e, n) { if (e.isOk) { const i = n(e.value); return i instanceof Promise ? i.then((t) => U(t)) : U(i); } if (e.isErr) { const i = e.value; return re(i); } throw "should never get here"; } var ke = (e) => { if (e.isOk) return e.value; throw e.value; }, Ne = (e) => { if (e.isErr) return e.value; throw e.value; }, O = (e, n = "") => () => { }, f = (e, n, ...i) => { let t = null, o = null, r = !1, a = !1; const s = [], c = (d) => { for (let h = 0; h < d.length; h++) t = d[h], Array.isArray(t) ? c(t) : t != null && typeof t != "boolean" && ((r = typeof e != "function" && !z(t)) && (t = String(t)), r && a ? s[s.length - 1].$text$ += t : s.push(r ? x(null, t) : t), a = r); }; if (c(i), n) { n.key && (o = n.key); { const d = n.className || n.class; d && (n.class = typeof d != "object" ? d : Object.keys(d).filter((h) => d[h]).join(" ")); } } const l = x(e, null); return l.$attrs$ = n, s.length > 0 && (l.$children$ = s), l.$key$ = o, l; }, x = (e, n) => { const i = { $flags$: 0, $tag$: e, $text$: n, $elm$: null, $children$: null }; return i.$attrs$ = null, i.$key$ = null, i; }, De = {}, Be = (e) => e && e.$tag$ === De, w = (e) => { const n = _e(e); return new RegExp( // First capture group: match any context before the selector that's not inside @supports selector() // Using negative lookahead to avoid matching inside @supports selector(...) condition `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${n}))(${n}\\b)`, "g" ); }; w("::slotted"); w(":host"); w(":host-context"); var se = (e, n) => e != null && !z(e) && n & 1 ? String(e) : e, Ue = (e) => e, J = (e, n, i) => { const t = Ue(e); return { emit: (o) => ae(t, n, { bubbles: !0, composed: !0, cancelable: !0, detail: o }) }; }, ae = (e, n, i) => { const t = E.ce(n, i); return e.dispatchEvent(t), t; }, P = /* @__PURE__ */ new WeakMap(), xe = (e, n, i) => { let t = L.get(e); ie && i ? (t = t || new CSSStyleSheet(), typeof t == "string" ? t = n : t.replaceSync(n)) : t = n, L.set(e, t); }, Me = (e, n, i) => { var t; const o = le(n), r = L.get(o); if (!$.document) return o; if (e = e.nodeType === 11 ? e : $.document, r) if (typeof r == "string") { e = e.head || e; let a = P.get(e), s; if (a || P.set(e, a = /* @__PURE__ */ new Set()), !a.has(o)) { { s = document.querySelector(`[${ve}="${o}"]`) || $.document.createElement("style"), s.innerHTML = r; const c = (t = E.$nonce$) != null ? t : Le($.document); if (c != null && s.setAttribute("nonce", c), !(n.$flags$ & 1)) if (e.nodeName === "HEAD") { const l = e.querySelectorAll("link[rel=preconnect]"), d = l.length > 0 ? l[l.length - 1].nextSibling : e.querySelector("style"); e.insertBefore( s, (d == null ? void 0 : d.parentNode) === e ? d : null ); } else if ("host" in e) if (ie) { const l = new CSSStyleSheet(); l.replaceSync(r), e.adoptedStyleSheets = [l, ...e.adoptedStyleSheets]; } else { const l = e.querySelector("style"); l ? l.innerHTML = r + l.innerHTML : e.prepend(s); } else e.append(s); n.$flags$ & 1 && e.insertBefore(s, null); } n.$flags$ & 4 && (s.innerHTML += Pe), a && a.add(o); } } else e.adoptedStyleSheets.includes(r) || (e.adoptedStyleSheets = [...e.adoptedStyleSheets, r]); return o; }, ze = (e) => { const n = e.$cmpMeta$, i = e.$hostElement$, t = O("attachStyles", n.$tagName$); Me( i.getRootNode(), n ), t(); }, le = (e, n) => "sc-" + e.$tagName$, q = (e, n, i, t, o, r, a) => { if (i === t) return; let s = H(e, n), c = n.toLowerCase(); if (n === "class") { const l = e.classList, d = X(i); let h = X(t); l.remove(...d.filter((u) => u && !h.includes(u))), l.add(...h.filter((u) => u && !d.includes(u))); } else if (n === "style") { for (const l in i) (!t || t[l] == null) && (l.includes("-") ? e.style.removeProperty(l) : e.style[l] = ""); for (const l in t) (!i || t[l] !== i[l]) && (l.includes("-") ? e.style.setProperty(l, t[l]) : e.style[l] = t[l]); } else if (n !== "key") if (!e.__lookupSetter__(n) && n[0] === "o" && n[1] === "n") { if (n[2] === "-" ? n = n.slice(3) : H($, c) ? n = c.slice(2) : n = c[2] + n.slice(3), i || t) { const l = n.endsWith(de); n = n.replace(Ge, ""), i && E.rel(e, n, i, l), t && E.ael(e, n, t, l); } } else { const l = z(t); if (s || l && t !== null) try { if (e.tagName.includes("-")) e[n] !== t && (e[n] = t); else { const d = t ?? ""; n === "list" ? s = !1 : (i == null || e[n] != d) && (typeof e.__lookupSetter__(n) == "function" ? e[n] = d : e.setAttribute(n, d)); } } catch { } t == null || t === !1 ? (t !== !1 || e.getAttribute(n) === "") && e.removeAttribute(n) : (!s || r & 4 || o) && !l && e.nodeType === 1 && (t = t === !0 ? "" : t, e.setAttribute(n, t)); } }, we = /\s/, X = (e) => (typeof e == "object" && e && "baseVal" in e && (e = e.baseVal), !e || typeof e != "string" ? [] : e.split(we)), de = "Capture", Ge = new RegExp(de + "$"), ce = (e, n, i, t) => { const o = n.$elm$.nodeType === 11 && n.$elm$.host ? n.$elm$.host : n.$elm$, r = e && e.$attrs$ || {}, a = n.$attrs$ || {}; for (const s of Z(Object.keys(r))) s in a || q( o, s, r[s], void 0, i, n.$flags$ ); for (const s of Z(Object.keys(a))) q( o, s, r[s], a[s], i, n.$flags$ ); }; function Z(e) { return e.includes("ref") ? ( // we need to sort these to ensure that `'ref'` is the last attr [...e.filter((n) => n !== "ref"), "ref"] ) : ( // no need to sort, return the original array e ); } var he, ue = !1, _ = (e, n, i) => { const t = n.$children$[i]; let o = 0, r, a; if (t.$text$ !== null) r = t.$elm$ = $.document.createTextNode(t.$text$); else { if (!$.document) throw new Error( "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component." ); if (r = t.$elm$ = $.document.createElement( t.$tag$ ), ce(null, t, ue), t.$children$) for (o = 0; o < t.$children$.length; ++o) a = _(e, t, o), a && r.appendChild(a); } return r["s-hn"] = he, r; }, fe = (e, n, i, t, o, r) => { let a = e, s; for (; o <= r; ++o) t[o] && (s = _(null, i, o), s && (t[o].$elm$ = s, A(a, s, n))); }, pe = (e, n, i) => { for (let t = n; t <= i; ++t) { const o = e[t]; if (o) { const r = o.$elm$; r && r.remove(); } } }, Ke = (e, n, i, t, o = !1) => { let r = 0, a = 0, s = 0, c = 0, l = n.length - 1, d = n[0], h = n[l], u = t.length - 1, g = t[0], y = t[u], C, I; for (; r <= l && a <= u; ) if (d == null) d = n[++r]; else if (h == null) h = n[--l]; else if (g == null) g = t[++a]; else if (y == null) y = t[--u]; else if (R(d, g, o)) v(d, g, o), d = n[++r], g = t[++a]; else if (R(h, y, o)) v(h, y, o), h = n[--l], y = t[--u]; else if (R(d, y, o)) v(d, y, o), A(e, d.$elm$, h.$elm$.nextSibling), d = n[++r], y = t[--u]; else if (R(h, g, o)) v(h, g, o), A(e, h.$elm$, d.$elm$), h = n[--l], g = t[++a]; else { for (s = -1, c = r; c <= l; ++c) if (n[c] && n[c].$key$ !== null && n[c].$key$ === g.$key$) { s = c; break; } s >= 0 ? (I = n[s], I.$tag$ !== g.$tag$ ? C = _(n && n[a], i, s) : (v(I, g, o), n[s] = void 0, C = I.$elm$), g = t[++a]) : (C = _(n && n[a], i, a), g = t[++a]), C && A(d.$elm$.parentNode, C, d.$elm$); } r > l ? fe( e, t[u + 1] == null ? null : t[u + 1].$elm$, i, t, a, u ) : a > u && pe(n, r, l); }, R = (e, n, i = !1) => e.$tag$ === n.$tag$ ? i ? (i && !e.$key$ && n.$key$ && (e.$key$ = n.$key$), !0) : e.$key$ === n.$key$ : !1, v = (e, n, i = !1) => { const t = n.$elm$ = e.$elm$, o = e.$children$, r = n.$children$, a = n.$text$; a === null ? (ce(e, n, ue), o !== null && r !== null ? Ke(t, o, n, r, i) : r !== null ? (e.$text$ !== null && (t.textContent = ""), fe(t, null, n, r, 0, r.length - 1)) : ( // don't do this on initial render as it can cause non-hydrated content to be removed !i && T.updatable && o !== null && pe(o, 0, o.length - 1) )) : e.$text$ !== a && (t.data = a); }, A = (e, n, i) => e == null ? void 0 : e.insertBefore(n, i), je = (e, n, i = !1) => { const t = e.$hostElement$, o = e.$vnode$ || x(null, null), a = Be(n) ? n : f(null, null, n); if (he = t.tagName, i && a.$attrs$) for (const s of Object.keys(a.$attrs$)) t.hasAttribute(s) && !["key", "ref", "style", "class"].includes(s) && (a.$attrs$[s] = t[s]); a.$tag$ = null, a.$flags$ |= 4, e.$vnode$ = a, a.$elm$ = o.$elm$ = t, v(o, a, i); }, ge = (e, n) => { if (n && !e.$onRenderResolve$ && n["s-p"]) { const i = n["s-p"].push( new Promise( (t) => e.$onRenderResolve$ = () => { n["s-p"].splice(i - 1, 1), t(); } ) ); } }, G = (e, n) => { if (e.$flags$ |= 16, e.$flags$ & 4) { e.$flags$ |= 512; return; } return ge(e, e.$ancestorComponent$), Ae(() => He(e, n)); }, He = (e, n) => { const i = e.$hostElement$, t = O("scheduleUpdate", e.$cmpMeta$.$tagName$), o = i; if (!o) throw new Error( `Can't render component <${i.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime` ); let r; return n ? r = F(o, "componentWillLoad", void 0, i) : r = F(o, "componentWillUpdate", void 0, i), r = Q(r, () => F(o, "componentWillRender", void 0, i)), t(), Q(r, () => Ye(e, o, n)); }, Q = (e, n) => We(e) ? e.then(n).catch((i) => { console.error(i), n(); }) : n(), We = (e) => e instanceof Promise || e && e.then && typeof e.then == "function", Ye = async (e, n, i) => { var t; const o = e.$hostElement$, r = O("update", e.$cmpMeta$.$tagName$), a = o["s-rc"]; i && ze(e); const s = O("render", e.$cmpMeta$.$tagName$); Je(e, n, o, i), a && (a.map((c) => c()), o["s-rc"] = void 0), s(), r(); { const c = (t = o["s-p"]) != null ? t : [], l = () => qe(e); c.length === 0 ? l() : (Promise.all(c).then(l), e.$flags$ |= 4, c.length = 0); } }, Je = (e, n, i, t) => { try { n = n.render(), e.$flags$ &= -17, e.$flags$ |= 2, je(e, n, t); } catch (o) { k(o, e.$hostElement$); } return null; }, qe = (e) => { const n = e.$cmpMeta$.$tagName$, i = e.$hostElement$, t = O("postUpdate", n), o = i, r = e.$ancestorComponent$; F(o, "componentDidRender", void 0, i), e.$flags$ & 64 ? (F(o, "componentDidUpdate", void 0, i), t()) : (e.$flags$ |= 64, Ze(i), F(o, "componentDidLoad", void 0, i), t(), e.$onReadyResolve$(i), r || Xe()), e.$onRenderResolve$ && (e.$onRenderResolve$(), e.$onRenderResolve$ = void 0), e.$flags$ & 512 && M(() => G(e, !1)), e.$flags$ &= -517; }, Xe = (e) => { M(() => ae($, "appload", { detail: { namespace: $e } })); }, F = (e, n, i, t) => { if (e && e[n]) try { return e[n](i); } catch (o) { k(o, t); } }, Ze = (e) => { var n; return e.classList.add((n = T.hydratedSelectorName) != null ? n : "hydrated"); }, Qe = (e, n) => b(e).$instanceValues$.get(n), V = (e, n, i, t) => { const o = b(e), r = e, a = o.$instanceValues$.get(n), s = o.$flags$, c = r; i = se(i, t.$members$[n][0]); const l = Number.isNaN(a) && Number.isNaN(i); if (i !== a && !l) { o.$instanceValues$.set(n, i); { if (t.$watchers$ && s & 128) { const h = t.$watchers$[n]; h && h.map((u) => { try { c[u](i, a, n); } catch (g) { k(g, r); } }); } if ((s & 18) === 2) { if (c.componentShouldUpdate && c.componentShouldUpdate(i, a, n) === !1) return; G(o, !1); } } } }, Ve = (e, n, i) => { var t, o; const r = e.prototype; if (n.$members$ || n.$watchers$ || e.watchers) { e.watchers && !n.$watchers$ && (n.$watchers$ = e.watchers); const a = Object.entries((t = n.$members$) != null ? t : {}); a.map(([s, [c]]) => { if (c & 31 || c & 32) { const { get: l, set: d } = Object.getOwnPropertyDescriptor(r, s) || {}; l && (n.$members$[s][0] |= 2048), d && (n.$members$[s][0] |= 4096), Object.defineProperty(r, s, { get() { return l ? l.apply(this) : Qe(this, s); }, configurable: !0, enumerable: !0 }), Object.defineProperty(r, s, { set(h) { const u = b(this); if (d) { const g = c & 32 ? this[s] : u.$hostElement$[s]; typeof g > "u" && u.$instanceValues$.get(s) ? h = u.$instanceValues$.get(s) : !u.$instanceValues$.get(s) && g && u.$instanceValues$.set(s, g), d.apply(this, [se(h, c)]), h = c & 32 ? this[s] : u.$hostElement$[s], V(this, s, h, n); return; } { V(this, s, h, n); return; } } }); } }); { const s = /* @__PURE__ */ new Map(); r.attributeChangedCallback = function(c, l, d) { E.jmp(() => { var h; const u = s.get(c); if (!(this.hasOwnProperty(u) && T.lazyLoad)) { if (r.hasOwnProperty(u) && typeof this[u] == "number" && // cast type to number to avoid TS compiler issues this[u] == d) return; if (u == null) { const y = b(this), C = y == null ? void 0 : y.$flags$; if (C && !(C & 8) && C & 128 && d !== l) { const N = this, K = (h = n.$watchers$) == null ? void 0 : h[c]; K == null || K.forEach((j) => { N[j] != null && N[j].call(N, d, l, c); }); } return; } } const g = Object.getOwnPropertyDescriptor(r, u); d = d === null && typeof this[u] == "boolean" ? !1 : d, d !== this[u] && (!g.get || g.set) && (this[u] = d); }); }, e.observedAttributes = Array.from( /* @__PURE__ */ new Set([ ...Object.keys((o = n.$watchers$) != null ? o : {}), ...a.filter( ([c, l]) => l[0] & 15 /* HasAttribute */ ).map(([c, l]) => { const d = l[1] || c; return s.set(d, c), d; }) ]) ); } } return e; }, ee = async (e, n, i, t) => { let o; if ((n.$flags$ & 32) === 0) { n.$flags$ |= 32; { o = e.constructor; const s = e.localName; customElements.whenDefined(s).then( () => n.$flags$ |= 128 /* isWatchReady */ ); } if (o && o.style) { let s; typeof o.style == "string" && (s = o.style); const c = le(i); if (!L.has(c)) { const l = O("registerStyles", i.$tagName$); xe(c, s, !!(i.$flags$ & 1)), l(); } } } const r = n.$ancestorComponent$, a = () => G(n, !0); r && r["s-rc"] ? r["s-rc"].push(a) : a(); }, et = (e, n) => { }, tt = (e) => { { const n = b(e), i = n.$cmpMeta$, t = O("connectedCallback", i.$tagName$); if (n.$flags$ & 1) n != null && n.$lazyInstance$ || n != null && n.$onReadyPromise$ && n.$onReadyPromise$.then(() => et()); else { n.$flags$ |= 1; { let o = e; for (; o = o.parentNode || o.host; ) if (o["s-p"]) { ge(n, n.$ancestorComponent$ = o); break; } } i.$members$ && Object.entries(i.$members$).map(([o, [r]]) => { if (r & 31 && e.hasOwnProperty(o)) { const a = e[o]; delete e[o], e[o] = a; } }), T.initializeNextTick ? M(() => ee(e, n, i)) : ee(e, n, i); } t(); } }, it = async (e) => { b(e), P.has(e) && P.delete(e), e.shadowRoot && P.has(e.shadowRoot) && P.delete(e.shadowRoot); }, nt = (e, n) => { const i = { $flags$: n[0], $tagName$: n[1] }; i.$members$ = n[2], i.$watchers$ = e.$watchers$; const t = e.prototype.connectedCallback, o = e.prototype.disconnectedCallback; return Object.assign(e.prototype, { __hasHostListenerAttached: !1, __registerHost() { Oe(this, i); }, connectedCallback() { this.__hasHostListenerAttached || (b(this), this.__hasHostListenerAttached = !0), tt(this), t && t.call(this); }, disconnectedCallback() { it(this), o && o.call(this); }, __attachShadow() { this.shadowRoot = this; } }), e.is = i.$tagName$, Ve(e, i); }; const ot = ":host{display:block;}.exerp-odin-dropin-container{}.odin-field-container{margin-bottom:15px;}.odin-field-container label{display:block;margin-bottom:5px;font-size:0.9em;color:#555}.odin-input{min-height:40px;}.odin-submit-container{margin-top:20px;text-align:right;}.odin-submit-button{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:1em;transition:background-color 0.2s}.odin-submit-button:hover{}.odin-submit-button:disabled{cursor:not-allowed;opacity:0.6;}.odin-error-message-container{color:red;border:1px solid red;padding:10px;margin-top:15px;font-size:0.9em;border-radius:4px}.odin-form-footer{font-size:0.8em;color:#6c757d;text-align:center;margin-top:20px;padding-top:10px;border-top:1px solid #e9ecef;}", rt = "WARN", D = { cardInformation: { label: "Card Information", placeholder: void 0 }, name: { label: "Name on Card", placeholder: "Full Name" }, postalCode: { label: "Postal Code", placeholder: "Postal Code" }, // Placeholder might vary by country in OdinPay.js itself addressLine1: { label: "Address Line 1", placeholder: "Street Address" }, addressLine2: { label: "Address Line 2 (Optional)", placeholder: "Apartment, suite, etc." }, city: { label: "City", placeholder: "City" }, state: { label: "State / Province", placeholder: "State / Province" }, // Label accommodates US/CA country: { label: "Country", placeholder: "Country" }, // Placeholder might be less useful if OdinPay renders a dropdown emailAddress: { label: "Email Address", placeholder: "you@example.com" }, phoneNumber: { label: "Phone Number", placeholder: "(123) 456-7890" }, // BANK_ACCOUNT Specific Defaults accountNumber: { label: "Account Number", placeholder: "Account Number" }, bankAccountType: { label: "Account Type", placeholder: "Select Account Type" }, // Placeholder for the select prompt routingNumber: { label: "Routing Number", placeholder: "Routing Number" }, // US transitNumber: { label: "Transit Number", placeholder: "Transit Number" }, // CA institutionNumber: { label: "Institution Number", placeholder: "Institution Number" } // CA }, st = /* @__PURE__ */ nt(class extends Fe { constructor() { super(); /** * The short-lived public token obtained from the ODIN backend, * required to initialize the OdinPay.js library. * Passed down from the facade. */ p(this, "odinPublicToken"); /** * Specifies the type of payment method the form should handle. * 'CARD' will render the credit card form. * 'BANK_ACCOUNT' will render the bank account form. * @defaultValue 'CARD' */ p(this, "paymentMethodType", "CARD"); /** * The country code ('US' or 'CA') for which the payment form should be configured. * This is mandatory and passed to OdinPay.js. */ p(this, "countryCode"); // Making it mandatory and specific /** * Optional configuration to enable and customize billing fields. * This object determines which optional billing fields are rendered and allows * overriding their default labels and placeholders. * * - For optional fields (e.g., `name`, `addressLine1`): * - `true`: Enables the field with default label and placeholder. * - `FieldCustomization` object (e.g., `{ label?: 'Custom Label', placeholder?: 'Custom Hint' }`): * Enables the field and applies the specified customizations. * - If a field key is omitted, the field is not rendered. * * - For fields that are always structurally part of the form but can be customized * (e.g., `postalCode` label/placeholder, `cardInformation` label): * - Provide a `FieldCustomization` object to override default texts. * * Example: * `{ * name: true, // Enable 'Name on Card' with defaults * addressLine1: { label: 'Street Address Line 1' }, // Custom label for address * city: { placeholder: 'Enter your city here' }, // Custom placeholder for city * postalCode: { label: 'Zip/Postal' } // Custom label for postal code * }` * * Refer to the `BillingFieldsConfig` and `FieldCustomization` type definitions * within this file for the exact structure and available field names. */ p(this, "billingFieldsConfig"); /** * Controls the level of logging output to the browser console. * Passed down from the facade. * Defaults to 'WARN'. * @defaultValue 'WARN' * @since x.y.z - Add version when released */ p(this, "logLevel", rt); /** * Optional theme configuration object passed from the facade. * This object should conform to OdinPay.js v2's flat theme structure. * @internal */ p(this, "themeConfigProp"); // For now, 'any'. Facade ensures correct structure. /** * Fired when OdinPay.js successfully returns a payment method token * after the user submits the form. The event detail contains the * `paymentMethodId` and, if applicable, the `billingInformation` * collected from the form. */ p(this, "odinSubmitInternal"); /** * Fired when OdinPay.js returns an error during submission * or if an internal setup error occurs. Contains the error message. */ p(this, "odinErrorInternal"); /** * Optional callback function passed from the facade, to be invoked by OdinPay.js v2 * during real-time field validation. * The event payload should be compatible with OdinFieldValidationEvent defined in the facade. * @internal */ p(this, "onChangeValidation"); // Using 'any' for now, facade ensures correct type p(this, "odinPayInstance", null); p(this, "scriptLoaded", !1); p(this, "initializationError", null); p(this, "isLoading", !1); p(this, "odinFormRenderedBySDK", !1); p(this, "odinPayInstanceReady", !1); p(this, "odinFormCreationAttempted", !1); p(this, "LogLevelSeverity", { NONE: 0, ERROR: 1, WARN: 2, INFO: 3, DEBUG: 4 }); p(this, "componentId", `exerp-odin-cc-form-${Math.random().toString(36).substring(2, 9)}`); p(this, "handleVisibleSubmitClick", () => { if (this.log("DEBUG", "Visible submit button clicked."), this.isLoading || !this.odinPayInstance || !this.odinFormRenderedBySDK || this.initializationError) { this.log("WARN", "[Core Component] Submission prevented. isLoading:", this.isLoading, "hasInstance:", !!this.odinPayInstance, "formRendered:", this.odinFormRenderedBySDK, "initError:", this.initializationError), this.initializationError ? this.odinErrorInternal.emit({ message: `Cannot submit: ${this.initializationError}`, code: "SUBMIT_WHILE_INIT_ERROR" }) : (!this.odinPayInstance || !this.odinFormRenderedBySDK) && this.odinErrorInternal.emit({ message: "Cannot submit: Form not ready.", code: "FORM_NOT_READY" }); return; } this.isLoading = !0; const i = document.getElementById(this.getFieldId("odinSubmitButton")); i ? (this.log("DEBUG", "Programmatically clicking hidden Odin button."), i.click()) : (this.log("ERROR", "Hidden Odin submit button not found!"), this.odinErrorInternal.emit({ message: "Internal error: Submit button not found.", code: "INTERNAL_ERROR" }), this.isLoading = !1); }); this.__registerHost(), this.odinSubmitInternal = J(this, "odinSubmitInternal"), this.odinErrorInternal = J(this, "odinErrorInternal"); } isLogLevelEnabled(i) { return this.LogLevelSeverity[i] <= this.LogLevelSeverity[this.logLevel]; } log(i, ...t) { if (this.isLogLevelEnabled(i)) { const o = `[Core][${i}]`; switch (i) { case "ERROR": console.error(o, ...t); break; case "WARN": console.warn(o, ...t); break; case "INFO": console.info(o, ...t); break; case "DEBUG": console.debug(o, ...t); break; } } } /** Helper to check if a field should be rendered */ isFieldEnabled(i) { var t; return !!((t = this.billingFieldsConfig) != null && t[i]); } /** Helper to get the customization object for a field */ getFieldCustomization(i) { var o; const t = (o = this.billingFieldsConfig) == null ? void 0 : o[i]; return typeof t == "object" ? t : void 0; } /** Helper to get the label for a field */ getLabel(i) { var o, r; const t = (o = this.getFieldCustomization(i)) == null ? void 0 : o.label; return i === "name" && !t ? this.paymentMethodType === "BANK_ACCOUNT" ? "Account Holder Name" : D.name.label : t ?? ((r = D[i]) == null ? void 0 : r.label) ?? i; } /** Helper to get the placeholder for a field */ getPlaceholder(i) { var o, r; return ((o = this.getFieldCustomization(i)) == null ? void 0 : o.placeholder) ?? ((r = D[i]) == null ? void 0 : r.placeholder) ?? void 0; } loadScript(i, t) { return new Promise((o, r) => { if (document.getElementById(t)) { o(); return; } const a = document.createElement("script"); a.src = i, a.id = t, a.async = !0, a.onload = () => o(), a.onerror = () => r(new Error(`Failed to load script: ${i}`)), document.head.appendChild(a); }); } async componentDidLoad() { if (this.log("INFO", "componentDidLoad - Props:", { // Log object for readability odinPublicTokenProvided: !!this.odinPublicToken, countryCode: this.countryCode, logLevel: this.logLevel }), this.odinPublicToken && this.countryCode) await this.initializeOdinPayInstance(); else if (!this.countryCode) { const i = "countryCode prop is missing. Cannot initialize OdinPay."; this.log("ERROR", i), this.initializationError = i, this.odinErrorInternal.emit({ message: i, code: "INIT_NO_COUNTRY_CODE" }), this.isLoading = !1; } } componentDidUpdate() { this.log("DEBUG", "[Core] componentDidUpdate triggered. odinPayInstanceReady:", this.odinPayInstanceReady, "odinFormCreationAttempted:", this.odinFormCreationAttempted, "has odinPayInstance:", !!this.odinPayInstance), this.odinPayInstanceReady && this.odinPayInstance && !this.odinFormCreationAttempted && (this.log("DEBUG", "[Core] Conditions met in componentDidUpdate to create OdinPay form."), this.isLoading = !0, this.odinFormCreationAttempted = !0, setTimeout(() => { this._createOdinPayForm(); }, 0)); } async watchOdinPublicToken(i, t) { if (i && i !== t) if (this.log("DEBUG", "odinPublicToken changed, re-initializing OdinPay. Current countryCode:", this.countryCode), this.countryCode) await this.reinitializeOdinPay(); else { const o = "countryCode prop is missing on token change. Cannot re-initialize OdinPay."; this.log("ERROR", o), this.initializationError = o, this.odinErrorInternal.emit({ message: o, code: "INIT_NO_COUNTRY_CODE_ON_UPDATE" }), this.isLoading = !1; } } async watchCountryCode(i, t) { if (i && i !== t && this.odinPublicToken) this.log("DEBUG", "countryCode changed, re-initializing OdinPay. New value:", i), await this.reinitializeOdinPay(); else if (!i && this.odinPublicToken) { const o = "countryCode prop was unset. Cannot re-initialize OdinPay."; this.log("ERROR", o), this.initializationError = o, this.odinErrorInternal.emit({ message: o, code: "INIT_NO_COUNTRY_CODE_ON_UPDATE" }), this.isLoading = !1; } } watchPaymentMethodType(i, t) { i !== t && this.odinPayInstanceReady && this.odinPayInstance && (this.log("DEBUG", `paymentMethodType changed from ${t} to ${i}. Re-creating form.`), this.odinFormCreationAttempted = !1, this.odinFormRenderedBySDK = !1, this.odinPayInstanceReady = !1, setTimeout(() => { this.odinPayInstanceReady = !0; }, 0)); } async reinitializeOdinPay() { this.odinPayInstanceReady = !1, this.odinFormCreationAttempted = !1, this.odinFormRenderedBySDK = !1, this.odinPayInstance = null, this.initializationError = null, await this.initializeOdinPayInstance(); } async _ensureOdinPayScriptLoaded() { if (!this.scriptLoaded) try { await this.loadScript("https://js.odin-dev.com", "odin-pay-sdk"), this.scriptLoaded = !0, this.log("INFO", "OdinPay.js script loaded."); } catch (i) { throw this.log("ERROR", "Failed to load OdinPay.js script:", i), this.initializationError = "Failed to load OdinPay.js SDK.", new Error(this.initializationError); } } // private method to handle OdinPay instantiation _instantiateOdinPay() { if (typeof OdinPay > "u") throw this.initializationError = "OdinPay SDK is not available even after script load.", this.log("ERROR", this.initializationError), new Error(this.initializationError); let i; this.themeConfigProp && Object.keys(this.themeConfigProp).length > 0 ? (this.log("DEBUG", "[Core] Using theme provided via themeConfigProp:", JSON.stringify(this.themeConfigProp)), i = this.themeConfigProp) : (this.log("DEBUG", "[Core] No themeConfigProp provided or empty. Passing empty theme object {} to OdinPay.js to use its defaults."), i = {}); const t = { country: this.countryCode, theme: i }; this.log("DEBUG", `About to call OdinPay(). Token provided: ${!!this.odinPublicToken}`, "Options:", JSON.stringify(t)); try { this.odinPayInstance = OdinPay(this.odinPublicToken, t), this.log("INFO", "OdinPay initialized with instance:", this.odinPayInstance), this.initializationError = null; } catch (o) { throw this.log("ERROR", "Error DIRECTLY from OdinPay() constructor:", o), this.odinPayInstance = null, o; } } async initializeOdinPayInstance() { if (this.isLoading = !0, this.initializationError = null, this.odinPayInstanceReady = !1, this.odinFormCreationAttempted = !1, this.odinFormRenderedBySDK = !1, !this.countryCode) { const i = "Internal Error: countryCode is missing in initializeOdinPayInstance."; this.log("ERROR", i), this.initializationError = i, this.odinErrorInternal.emit({ message: i, code: "INIT_NO_COUNTRY_CODE_INTERNAL" }), this.isLoading = !1; return; } try { await this._ensureOdinPayScriptLoaded(), this._instantiateOdinPay(), this.odinPayInstanceReady = !0; } catch (i) { this.log("ERROR", "RAW Error object during OdinPay initialization or script loading:", i); const t = (i == null ? void 0 : i.message) || "Failed to initialize OdinPay."; this.log("ERROR", "Error message during OdinPay initialization:", t), this.initializationError = t; let o = "INITIALIZATION_ERROR"; t === "Failed to load OdinPay.js SDK." ? o = "SDK_LOAD_ERROR" : t === "OdinPay SDK is not available even after script load." ? o = "SDK_NOT_DEFINED_ERROR" : t === "No key provided" ? o = "INIT_NO_KEY_PROVIDED" : t === "Badly formatted key" ? o = "INIT_BADLY_FORMATTED_KEY" : t === "Invalid Key" ? o = "INIT_INVALID_KEY_STRUCTURE" : t.startsWith("Unsupported country") ? o = "INIT_UNSUPPORTED_COUNTRY" : (t.includes("BasisTheoryElements") || t.includes("Elements script") || t.includes("API key is required")) && (o = "INIT_BT_SDK_FAILURE"); const r = { code: o, message: t, rawError: i }; this.odinErrorInternal.emit(r), this.odinPayInstance = null, this.isLoading = !1; } } // private method to build fields configuration for card form _buildCardFormFieldsConfig() { const i = { cardInformation: { selector: this.getFieldId("cardInformation") }, postalCode: { selector: this.getFieldId("postalCode"), placeholder: this.getPlaceholder("postalCode") } }, t = { name: this.getFieldId("name"), postalCode: this.getFieldId("postalCode"), addressLine1: this.getFieldId("addressLine1"), addressLine2: this.getFieldId("addressLine2"), city: this.getFieldId("city"), state: this.getFieldId("state"), country: this.getFieldId("country"), emailAddress: this.getFieldId("emailAddress"), phoneNumber: this.getFieldId("phoneNumber") }; for (const o in t) { const r = o; r !== "postalCode" && this.isFieldEnabled(r) && (i[r] = { selector: t[r], placeholder: this.getPlaceholder(r) }); } return this.log("DEBUG", "Final fields object for createCardForm:", JSON.stringify(i, null, 2)), i; } // Method to create the card form using OdinPay.js _createOdinPayForm() { if (!this.odinPayInstance) { this.log("WARN", "OdinPay instance not available to create form."), this.initializationError || (this.initializationError = "OdinPay instance is null, cannot render form.", this.odinErrorInternal.emit({ message: this.initializationError, code: "INSTANCE_NULL" })), this.odinFormRenderedBySDK = !1, this.isLoading = !1; return; } this.log("DEBUG", `Attempting to create form for paymentMethodType: ${this.paymentMethodType}.`), this.isLoading = !0, this.paymentMethodType === "BANK_ACCOUNT" ? (this.log("INFO", "BANK_ACCOUNT form creation selected. Calling _createOdinPayBankAccountForm()"), this._createOdinPayBankAccountForm()) : (this.log("INFO", "CARD form creation selected. Calling _createOdinPayCardForm()"), this._createOdinPayCardForm()); } _createOdinPayCardForm() { this.log("DEBUG", "[Core] Creating CARD form."); const i = this._buildCardFormFieldsConfig(); try { this.odinPayInstance.createCardForm({ submitButton: { selector: this.getFieldId("odinSubmitButton"), callback: (t) => { this.log("DEBUG", "OdinPay CARD submit callback RAW result:", JSON.stringify(t, null, 2)), t && t.success === !0 && t.paymentMethod && t.paymentMethod.id ? this._handleOdinPaySuccessCallback(t) : t && t.success === !1 ? this._handleOdinPayErrorCallback(t) : (this.log("ERROR", "OdinPay CARD callback with unexpected result structure:", t), this.odinErrorInternal.emit({ message: "Received an unexpected result structure from OdinPay (Card).", code: "UNEXPECTED_CALLBACK_STRUCTURE" })), this.isLoading = !1; } }, fields: i, onChangeValidation: this._handleOdinPayOnChangeValidation.bind(this) }), this.log("INFO", "OdinPay createCardForm called successfully."), this.initializationError = null, this.odinFormRenderedBySDK = !0, this.isLoading = !1; } catch (t) { this.log("ERROR", "Error calling createCardForm:", t), this.initializationError = (t == null ? void 0 : t.message) || "Failed to create OdinPay card form.", this.odinErrorInternal.emit({ message: this.initializationError, code: "CREATE_FORM_ERROR_CARD" }), this.odinFormRenderedBySDK = !1, this.isLoading = !1; } } _createOdinPayBankAccountForm() { if (!this.odinPayInstance) { this.log("WARN", "OdinPay instance not available to create bank account form."), this.initializationError || (this.initializationError = "OdinPay instance is null, cannot render bank account form.", this.odinErrorInternal.emit({ message: this.initializationError, code: "INSTANCE_NULL" })), this.odinFormRenderedBySDK = !1, this.isLoading = !1; return; } this.log("DEBUG", "[Core] Creating BANK_ACCOUNT form."); const i = this._buildBankAccountFormFieldsConfig(); try { this.odinPayInstance.createBankAccountForm({ submitButton: { selector: this.getFieldId("odinSubmitButton"), callback: (t) => { this.log("DEBUG", "[Core] OdinPay BANK_ACCOUNT submit callback RAW result:", JSON.stringify(t, null, 2)), t && t.success === !0 && t.paymentMethod && t.paymentMethod.id ? this._handleOdinPaySuccessCallback(t) : t && t.success === !1 ? this._handleOdinPayErrorCallback(t) : (this.log("ERROR", "[Core] OdinPay BANK_ACCOUNT callback with unexpected result structure:", t), this.odinErrorInternal.emit({ message: "Received an unexpected result structure from OdinPay (BANK_ACCOUNT).", code: "UNEXPECTED_CALLBACK_STRUCTURE" })), this.isLoading = !1; } }, fields: i, onChangeValidation: this._handleOdinPayOnChangeValidation.bind(this) }), this.log("INFO", "[Core] OdinPay createBankAccountForm called successfully."), this.initializationError = null, this.odinFormRenderedBySDK = !0, this.isLoading = !1; } catch (t) { this.log("ERROR", "[Core] Error calling createBankAccountForm:", t), this.initializationError = (t == null ? void 0 : t.message) || "Failed to create OdinPay bank account form.", this.odinErrorInternal.emit({ message: this.initializationError, code: "CREATE_FORM_ERROR_BANK_ACCOUNT", rawError: t }), this.odinFormRenderedBySDK = !1, this.isLoading = !1; } } _buildBankAccountFormFieldsConfig() { this.log("DEBUG", "[Core] Building BANK_ACCOUNT form fields config for country:", this.countryCode); const i = { accountNumber: { selector: this.getFieldId("accountNumber"), placeholder: this.getPlaceholder("accountNumber") // Use our helper }, bankAccountType: { // This selector is for the container where OdinPay.js will create the <select> selector: this.getFieldId("bankAccountTypeContainer"), // placeholder for bankAccountType (if used by OdinPay.js for a prompt option) can be set via getPlaceholder placeholder: this.getPlaceholder("bankAccountType") // initialValue could also be supported if desired: this.billingFieldsConfig?.bankAccountType?.initialValue }, name: { // This is 'Account Holder Name' selector: this.getFieldId("accountHolderName"), placeholder: this.getPlaceholder("name") // Assumes 'name' key in DEFAULT_FIELD_TEXT is "Account Holder Name" when paymentMethodType is BANK_ACCOUNT, or user customizes // initialValue: this.billingFieldsConfig?.name?.initialValue // if supporting initial values } }; return this.countryCode === "US" ? i.routingNumber = { selector: this.getFieldId("routingNumber"), placeholder: this.getPlaceholder("routingNumber") } : this.countryCode === "CA" && (i.transitNumber = { selector: this.getFieldId("transitNumber"), placeholder: this.getPlaceholder("transitNumber") }, i.institutionNumber = { selector: this.getFieldId("institutionNumber"), placeholder: this.getPlaceholder("institutionNumber") }), ["addressLine1", "addressLine2", "city", "state", "postalCode", "country", "emailAddress", "phoneNumber"].forEach((o) => { this.isFieldEnabled(o) && (i[o] = { selector: this.getFieldId(o), // Ensure your renderAchFields creates these IDs placeholder: this.getPlaceholder(o) // initialValue: this.billingFieldsConfig?.[fieldKey]?.initialValue // if supporting initial values }); }), this.log("DEBUG", "[Core] Final Bank account fields config:", JSON.stringify(i)), i; } _handleOdinPayOnChangeValidation(i) { if (typeof this.log != "function") { console.error("[Core Error] Critical: `this.log` is not a function inside _handleOdinPayOnChangeValidation. `this` is:", this); return; } if (this.onChangeValidation) { this.log("DEBUG", "[Core] Forwarding onChangeValidation event to facade:", i); try { this.onChangeValidation(i); } catch (t) { this.log("ERROR", "[Core] Error calling user-provided onChangeValidation callback from facade:", t); } } else this.log("DEBUG", "[Core] OdinPay.js onChangeValidation triggered (no user callback provided):", i); } // private method to handle successful OdinPay callback _handleOdinPaySuccessCallback(i) { var l; const t = i.paymentMethod, o = (l = t == null ? void 0 : t.type) == null ? void 0 : l.toUpperCase(); this.log("DEBUG", `[Core] Success callback. OdinPay type: ${o}, PM_ID:`, t.id), this.log("DEBUG", "[Core] Full paymentMethod object from OdinPay.js:", JSON.stringify(t, null, 2)); let r; t.billingInformation ? (r = t.billingInformation, this.log("DEBUG", "[Core] Extracted billingInformation:", JSON.stringify(r, null, 2))) : this.log("DEBUG", "[Core] No billingInformation found in OdinPay result.paymentMethod."); let a, s; if (o === "CREDIT_CARD" || o === "DEBIT_CARD") { s = "CARD"; const d = {}; t.cardBrand && (d.cardBrand = t.cardBrand), t.accountNumber && (d.maskedAccountNumber = String(t.accountNumber), d.maskedAccountNumber.length >= 4 ? d.last4 = d.maskedAccountNumber.slice(-4) : d.last4 = d.maskedAccountNumber), t.expirationDate && (d.expirationDate = t.expirationDate), t.binDetails && (d.binDetails = t.binDetails), a = d, this.log("DEBUG", `[Core] Extracted ${o} details (as CARD) for submit payload:`, JSON.stringify(a, null, 2)); } else if (o === "BANK_ACCOUNT") { s = "BANK_ACCOUNT"; const d = {}; if (t.bankAccountType && (d.bankAccountType = t.bankAccountType), t.accountNumber) { const h = String(t.accountNumber); h.length >= 4 ? d.accountNumberLast4 = h.slice(-4) : d.accountNumberLast4 = h; } t.routingNumber && (d.routingNumber = t.routingNumber), t.transitNumber && (d.transitNumber = t.transitNumber), t.institutionNumber && (d.institutionNumber = t.institutionNumber), t.country && (d.country = t.country), a = d, this.log("DEBUG", "[Core] Extracted BANK_ACCOUNT details for submit payload:", JSON.stringify(a, null, 2)); } else { this.log("ERROR", `[Core] Unknown payment method type from OdinPay.js callback: ${o}. Emitting error.`), this.odinErrorInternal.emit({ code: "UNKNOWN_PAYMENT_METHOD_TYPE", message: `Received an unknown payment method type '${o}' from OdinPay.`, rawError: t }); return; } const c = { paymentMethodId: t.id, paymentMethodType: s, billingInformation: r, details: a }; this.log("INFO", "[Core] Emitting odinSubmitInternal with payload:", JSON.stringify(c, null, 2)), this.odinSubmitInternal.emit(c); } _handleOdinPayErrorCallback(i) { i && i.errors && Array.isArray(i.errors) ? this.log("DEBUG", "[Core] OdinPay v2 `result.errors` detected. Will be processed by _parseOdinPayError.") : i && i.success === !1 && this.log("DEBUG", "[Core] `result.errors` not found or not an array, but result.success is false. _parseOdinPayError will process `result.message`."); const t = this._parseOdinPayError(i); this.odinErrorInternal.emit(t); } _parseOdinPayError(i) { let t = "UNKNOWN_ERROR", o = "An unknown error occurred during payment processing."; const r = []; let a; if (i && i.errors && Array.isArray(i.errors) && i.errors.length > 0) this.log("DEBUG", "[Core] Parsing errors from `result.errors` (OdinPay.js v2)."), t = "VALIDATION_ERROR_FIELDS", o = "Validation failed. Please check the fields highlighted.", i.errors.forEach((c) => { let l = c.fieldName || c.selector || "unknownField", d = c.errorCode || "Unknown validation error"; r.push({ field: l, message: d }), c.type === "BACKEND" && (t = "API_ERROR", o = `A backend error occurred: ${d}`); }), r.length === 1 && t === "VALIDATION_ERROR_FIELDS" && (o = `Validation failed for field '${r[0].field}': ${r[0].message}`); else if (i && i.message) { if (this.log("DEBUG", "[Core] `result.errors` not found or empty, parsing from `result.message` (OdinPay.js v1 style or unexpected v2)."), typeof i.message == "string") { o = i.message; const c = i.message.match(/Error: HTTP error. Status: (\d+)/); c && c[1] ? (a = parseInt(c[1], 10), t = a >= 500 ? "API_SERVER_ERROR" : "API_CLIENT_ERROR", a === 401 && (t = "API_AUTH_ERROR")) : t = "ODIN_CALLBACK_ERROR"; } else if (Array.isArray(i.message)) o = "Validation errors occurred.", t = "VALIDATION_ERROR_GENERAL", i.message.forEach((c, l) => { r.push({ field: `general[${l}]`, message: c }); }); else if (typeof i.message == "object" && i.message !== null) { o = "Validation failed. Please check the fields below.", t = "VALIDATION_ERROR_FIELDS"; for (const c in i.message) Object.prototype.hasOwnProperty.call(i.message, c) && r.push({ field: c, message: i.message[c] }); r.length === 1 && r[0].field.match(/^\d+$/) && (o = r[0].message); } } else i && i.success === !1 && (this.log("WARN", "[Core] OdinPay callback indicated failure (success:false) but provided no `errors` array or `message` string."), t = "UNEXPECTED_CALLBACK_STRUCTURE", o = "Payment failed due to an unspecified error from the payment gateway."); const s = { code: t, message: o }; return r.length > 0 && (s.fieldErrors = r), a && (s.httpStatusCode = a), s.rawError = i.message, s; } getFieldId(i) { const t = i.replace(/([A-Z])/g, "-$1").toLowerCase(); return `${this.componentId}-${t}`; } renderBillingField(i, t = !1) { if (!t && !this.isFieldEnabled(i)) return null; const o = this.getFieldId(i), r = this.getLabel(i); return f("div", { class: "odin-field-container", key: i }, f("label", { htmlFor: o }, r), f("div", { id: o, class: "odin-input" })); } renderSubmitArea() { const i = this.isLoading || !this.odinFormRenderedBySDK || !!this.initializationError, t = this.getFieldId("visibleSubmitButton"), o = this.getFieldId("odinSubmitButton"); return f("div", { class: "odin-submit-container" }, f("button", { id: t, class: "odin-submit-button", type: "button", disabled: i, onClick: this.handleVisibleSubmitClick }, this.isLoading ? "Loading..." : "Pay"), f("button", { id: o, type: "button", style: { display: "none" }, "aria-hidden": "true" }), f("div", { class: "odin