@odus/checkout 0.5.10 → 0.6.0

package/dist/checkout.es.js

@@ -234,7 +234,7 @@ function U({
     reload: a
   };
 }
-const P = {
+const N = {
   cardNumber: (o) => (o.replace(/\s/g, "").match(/.{1,4}/g) || []).join(" "),
   cardExpiry: (o) => {
     const t = o.replace(/\D/g, "").slice(0, 4);
@@ -465,28 +465,28 @@ const P = {
   }, r = (l, c) => {
     const d = e.getState();
     let u = c;
-    l in P && (u = P[l](c));
+    l in N && (u = N[l](c));
     const p = {
       ...d.formData,
       [l]: u
-    }, m = { ...d.errors };
+    }, g = { ...d.errors };
     if (d.touched[l]) {
-      const f = t(l, u);
-      f ? m[l] = f : delete m[l];
+      const m = t(l, u);
+      m ? g[l] = m : delete g[l];
     }
     e.setState({
       formData: p,
-      errors: m,
+      errors: g,
       isValid: a(p)
     });
   }, s = (l, c) => {
     const d = e.getState(), u = {
       ...d.touched,
       [l]: !0
-    }, p = t(l, c), m = { ...d.errors };
-    p ? m[l] = p : delete m[l], e.setState({
+    }, p = t(l, c), g = { ...d.errors };
+    p ? g[l] = p : delete g[l], e.setState({
       touched: u,
-      errors: m
+      errors: g
     });
   }, n = (l) => {
     const d = {
@@ -511,30 +511,27 @@ const P = {
   apiKey: e,
   environment: t
 }) => {
-  const i = I(t), a = await fetch(
-    `${i}/tokenization/generate-iframe-configuration`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${e}`
-      },
-      body: JSON.stringify(o)
-    }
-  );
+  const i = I(t), a = await fetch(`${i}/checkout/init`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${e}`
+    },
+    body: JSON.stringify(o)
+  });
   if (!a.ok)
     throw new Error(`HTTP error! Status: ${a.status}`);
   return await a.json();
 };
 function X({
   apiKey: o,
-  // scriptLoaded,
   checkoutProfile: e,
   inputStyles: t,
   setFormData: i,
-  environment: a
+  environment: a,
+  paymentId: r
 }) {
-  const r = L({
+  const s = L({
     iframeConfig: void 0,
     loadingIframe: !0,
     isCcValid: !1,
@@ -543,38 +540,38 @@ function X({
     isCvvFocused: !1,
     possibleCardType: "unknown"
   });
-  let s = null;
-  const n = async () => {
+  let n = null;
+  const l = async () => {
     try {
       console.log("[IframeConfig] Generating iframe configuration...");
       const m = await W({
         props: {
-          allowedOrigins: [globalThis.location.origin]
+          payment: r
         },
         apiKey: o,
         environment: a
       });
-      m && (console.log("[IframeConfig] Iframe config generated successfully."), r.setState({
+      m && (console.log("[IframeConfig] Iframe config generated successfully."), s.setState({
         iframeConfig: {
           ...m,
           origin: globalThis.location.origin
         }
-      }), c());
+      }), d());
     } catch (m) {
       console.error("Failed to generate iframe config:", m);
     }
-  }, l = () => {
-    const m = r.getState();
+  }, c = () => {
+    const m = s.getState();
     if (console.log("[IframeConfig] createTokenExIframe started."), !m.iframeConfig || !e) {
       console.error(
         "[IframeConfig] Missing iframe config or checkout profile."
       );
       return;
     }
-    const f = document.getElementById("card-element"), M = document.getElementById("card-cvv-element");
-    if (!f || !M)
+    const b = document.getElementById("card-element"), S = document.getElementById("card-cvv-element");
+    if (!b || !S)
       throw new Error("Card elements not found in DOM");
-    console.log("[IframeConfig] Creating TokenEx.Iframe instance."), s = new globalThis.TokenEx.Iframe("card-element", {
+    console.log("[IframeConfig] Creating TokenEx.Iframe instance."), n = new globalThis.TokenEx.Iframe("card-element", {
       ...m.iframeConfig,
       placeholder: "1234 1234 1234 1234",
       cvvPlaceholder: "CVC",
@@ -598,38 +595,38 @@ function X({
           base: `${t.base}; border-radius: 0px 0px ${e.styles.borderRadius}px 0px`
         }
       }
-    }), s.on("load", () => {
-      console.log("[IframeConfig] Iframe loaded event received."), r.setState({ loadingIframe: !1 });
-    }), s.on("autoCompleteValues", function(y) {
-      const { nameOnCard: b, cardExp: C } = y;
+    }), n.on("load", () => {
+      console.log("[IframeConfig] Iframe loaded event received."), s.setState({ loadingIframe: !1 });
+    }), n.on("autoCompleteValues", function(x) {
+      const { nameOnCard: C, cardExp: v } = x;
       i({
-        name: b,
-        cardExpiry: C
+        name: C,
+        cardExpiry: v
       });
-    }), s.on("validate", function(y) {
-      const { isValid: b, isCvvValid: C } = y;
+    }), n.on("validate", function(x) {
+      const { isValid: C, isCvvValid: v } = x;
       console.log(
-        `[IframeConfig] Validation event: isCardValid=${b}, isCvvValid=${C}`
-      ), r.setState({
-        isCcValid: b,
-        isCvvValid: C
+        `[IframeConfig] Validation event: isCardValid=${C}, isCvvValid=${v}`
+      ), s.setState({
+        isCcValid: C,
+        isCvvValid: v
       });
-    }), s.on("focus", function() {
-      r.setState({ isFocused: !0 });
-    }), s.on("blur", function() {
-      r.setState({ isFocused: !1 });
-    }), s.on("cvvFocus", function() {
-      r.setState({ isCvvFocused: !0 });
-    }), s.on("cvvBlur", function() {
-      r.setState({ isCvvFocused: !1 });
-    }), s.on(
+    }), n.on("focus", function() {
+      s.setState({ isFocused: !0 });
+    }), n.on("blur", function() {
+      s.setState({ isFocused: !1 });
+    }), n.on("cvvFocus", function() {
+      s.setState({ isCvvFocused: !0 });
+    }), n.on("cvvBlur", function() {
+      s.setState({ isCvvFocused: !1 });
+    }), n.on(
       "cardTypeChange",
-      function({ possibleCardType: y }) {
-        r.setState({ possibleCardType: y });
+      function({ possibleCardType: x }) {
+        s.setState({ possibleCardType: x });
       }
-    ), s.load();
-  }, c = () => {
-    const m = r.getState();
+    ), n.load();
+  }, d = () => {
+    const m = s.getState();
     if (console.log("[IframeConfig] initializeIframe started."), !m.iframeConfig || !e) {
       console.error(
         "[IframeConfig] Missing iframe config or checkout profile for initialization."
@@ -641,25 +638,25 @@ function X({
       return;
     }
     try {
-      console.log("[IframeConfig] Creating TokenEx iframe..."), l(), console.log("[IframeConfig] TokenEx iframe created successfully");
-    } catch (f) {
-      console.error("Failed to create TokenEx iframe:", f);
+      console.log("[IframeConfig] Creating TokenEx iframe..."), c(), console.log("[IframeConfig] TokenEx iframe created successfully");
+    } catch (b) {
+      console.error("Failed to create TokenEx iframe:", b);
     }
-  }, d = async () => {
-    o && (console.log("[IframeConfig] Manual initialization triggered."), await n());
-  }, u = () => {
-    s && (s.remove(), s = null);
-  }, p = async (m) => {
-    s && (s.on("tokenize", async function(f) {
-      await m(f);
-    }), s.tokenize());
+  }, u = async () => {
+    o && (console.log("[IframeConfig] Manual initialization triggered."), await l());
+  }, p = () => {
+    n && (n.remove(), n = null);
+  }, g = async (m) => {
+    n && (n.on("tokenize", async function(b) {
+      await m(b);
+    }), n.tokenize());
   };
   return {
-    getState: r.getState.bind(r),
-    subscribe: r.subscribe.bind(r),
-    tokenize: p,
-    cleanup: u,
-    initialize: d
+    getState: s.getState.bind(s),
+    subscribe: s.subscribe.bind(s),
+    tokenize: g,
+    cleanup: p,
+    initialize: u
   };
 }
 const Q = "E-Mail", ee = "Name des/der Karteninhaber/in", te = "Kartendaten", ie = "Vollständiger Name", ae = "MM / JJ", re = "Das Fenster nicht schließen", se = { pay: "ZAHLEN", submit: "ABSENDEN", getPlan: "MEINEN PLAN ERHALTEN", donate: "spenden", book: "jetzt buchen", order: "jetzt bestellen" }, oe = { emailSuggestion: "Meinten Sie {{email}}?", emailInvalid: "Ihre E-Mail-Adresse ist nicht korrekt", cardExpiryInvalid: "Das Ablaufdatum Ihrer Karte liegt in der Vergangenheit", cardExpiryFormat: "Das Ablaufdatum Ihrer Karte ist unvollständig", cardSecurityFormat: "Der Sicherheitscode Ihrer Karte ist unvollständig", nameRequired: "Gib deinen Namen genau so ein, wie er auf deiner Karte steht", cardNumberInvalid: "Die Kartennummer ist unvollständig" }, ne = {
@@ -689,15 +686,15 @@ const Q = "E-Mail", ee = "Name des/der Karteninhaber/in", te = "Kartendaten", ie
   loading: xe,
   buttonTexts: Se,
   validation: Fe
-}, Le = "E-mail", Me = "Nom du titulaire de la carte", ke = "Informations de la carte", Te = "Nom complet figurant sur la carte", Ie = "MM / AA", ze = "Veuillez ne pas fermer cette fenêtre", Ne = { pay: "PAYER", submit: "ENVOYER", getPlan: "OBTENIR MON PLAN", donate: "FAIRE UN DON", book: "RÉSERVER MAINTENANT", order: "COMMANDER MAINTENANT" }, Pe = { emailSuggestion: "Vouliez-vous dire {{email}}?", emailInvalid: "Votre adresse e-mail n’est pas valide", cardExpiryInvalid: "La date d'expiration de votre carte est dans le passé", cardExpiryFormat: "La date d’expiration de votre carte est incomplète", cardSecurityFormat: "Le code de sécurité de votre carte est incomplet", nameRequired: "Veuillez saisir le nom tel qu’il figure sur votre carte", cardNumberInvalid: "Votre numéro de carte est invalide" }, Ae = {
-  email: Le,
-  cardholderNameLabel: Me,
+}, Me = "E-mail", Le = "Nom du titulaire de la carte", ke = "Informations de la carte", Te = "Nom complet figurant sur la carte", Ie = "MM / AA", ze = "Veuillez ne pas fermer cette fenêtre", Pe = { pay: "PAYER", submit: "ENVOYER", getPlan: "OBTENIR MON PLAN", donate: "FAIRE UN DON", book: "RÉSERVER MAINTENANT", order: "COMMANDER MAINTENANT" }, Ne = { emailSuggestion: "Vouliez-vous dire {{email}}?", emailInvalid: "Votre adresse e-mail n’est pas valide", cardExpiryInvalid: "La date d'expiration de votre carte est dans le passé", cardExpiryFormat: "La date d’expiration de votre carte est incomplète", cardSecurityFormat: "Le code de sécurité de votre carte est incomplet", nameRequired: "Veuillez saisir le nom tel qu’il figure sur votre carte", cardNumberInvalid: "Votre numéro de carte est invalide" }, Ae = {
+  email: Me,
+  cardholderNameLabel: Le,
   cardInformation: ke,
   cardholderNamePlaceholder: Te,
   cardExpiry: Ie,
   loading: ze,
-  buttonTexts: Ne,
-  validation: Pe
+  buttonTexts: Pe,
+  validation: Ne
 }, De = "Email", Ve = "Nome del titolare della carta", $e = "Informazioni sulla carta", Re = "Nome completo sulla carta", Be = "MM / AA", Oe = "Non chiudere la finestra", He = { pay: "PAGA", submit: "INVIA", getPlan: "OTTIENI IL MIO PIANO", donate: "DONARE", book: "PRENOTA ORA", order: "ORDINA ORA" }, Ke = { emailSuggestion: "Intendevi {{email}}?", emailInvalid: "La tua email non è corretta", cardExpiryInvalid: "La data di scadenza della tua carta è nel passato", cardExpiryFormat: "La data di scadenza della tua carta è incompleta", cardSecurityFormat: "Il codice di sicurezza della tua carta è incompleto", nameRequired: "Inserisci il nome come appare sulla tua carta", cardNumberInvalid: "Il numero della tua carta non è valido" }, je = {
   email: De,
   cardholderNameLabel: Ve,
@@ -876,7 +873,7 @@ const Ct = Et(), z = () => {
     },
     isLoaded: a
   };
-}, w = (o) => Object.entries(o).map(([e, t]) => {
+}, M = (o) => Object.entries(o).map(([e, t]) => {
   const i = e.replace(/([A-Z])/g, "-$1").toLowerCase(), a = typeof t == "number" ? `${t}px` : t;
   return `${i}: ${a}`;
 }).join("; ");
@@ -919,10 +916,10 @@ function St(o) {
   }, r = {
     fontFamily: `${o.styles.fontFamily}, sans-serif`
   }, s = {
-    base: w(e),
-    error: w(i),
-    focus: w(a),
-    placeholder: w(t)
+    base: M(e),
+    error: M(i),
+    focus: M(a),
+    placeholder: M(t)
   };
   return {
     formContainerStyle: r,
@@ -1030,7 +1027,7 @@ class h {
     }), this.eventListeners = [], this.children.forEach((e) => e.destroy()), this.children = [], this.element.parentNode && this.element.parentNode.removeChild(this.element);
   }
 }
-class x {
+class F {
   /**
    * Create a div element
    */
@@ -1103,14 +1100,14 @@ class Ft extends h {
   messageComponent;
   constructor(e) {
     super("div", []);
-    const t = x.createDiv(["error-alert"], {
+    const t = F.createDiv(["error-alert"], {
       role: "alert",
       "aria-live": "polite"
-    }), i = x.createDiv(["error-alert-content"]), a = x.createDiv([
+    }), i = F.createDiv(["error-alert-content"]), a = F.createDiv([
       "error-alert-icon-container"
     ]);
     a.getElement().innerHTML = this.createAlertCircleSVG();
-    const r = x.createDiv([
+    const r = F.createDiv([
       "error-alert-text-container"
     ]), s = new h("h4", [
       "error-alert-title"
@@ -1146,7 +1143,7 @@ class V extends h {
   titleElement;
   constructor(e = {}) {
     super("div", ["blur-bg"]);
-    const t = x.createDiv(["loader"]);
+    const t = F.createDiv(["loader"]);
     this.titleElement = new h("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
   }
   setText(e) {
@@ -1180,7 +1177,7 @@ class wt extends h {
     t.style.fontFamily = "inherit", t.style.color = e.styles.color, t.style.fontSize = `${e.styles.fontSize}px`;
   }
 }
-class N extends h {
+class P extends h {
   inputElement;
   helperText = null;
   constructor(e) {
@@ -1200,7 +1197,7 @@ class N extends h {
       name: e.name,
       class: `form-input ${e.error ? "form-input-error" : ""}`
     };
-    if (e.placeholder && (t.placeholder = e.placeholder), e.value && (t.value = e.value), e.required && (t.required = String(e.required)), e.disabled && (t.disabled = String(e.disabled)), e.autocomplete && (t.autocomplete = e.autocomplete), this.inputElement = x.createInput(
+    if (e.placeholder && (t.placeholder = e.placeholder), e.value && (t.value = e.value), e.required && (t.required = String(e.required)), e.disabled && (t.disabled = String(e.disabled)), e.autocomplete && (t.autocomplete = e.autocomplete), this.inputElement = F.createInput(
       e.type || "text",
       [],
       t
@@ -1227,7 +1224,7 @@ class N extends h {
     return this.inputElement.getElement().addEventListener(e, t, i), this;
   }
 }
-class Lt {
+class Mt {
   input;
   constructor(e) {
     const {
@@ -1240,7 +1237,7 @@ class Lt {
       translationFunc: l,
       autocomplete: c = "cc-name"
     } = e;
-    this.input = new N({
+    this.input = new P({
       name: "name",
       label: l("cardholderNameLabel"),
       error: r,
@@ -1281,7 +1278,7 @@ class Lt {
     return this.input.appendTo(e), this;
   }
 }
-class Mt extends h {
+class Lt extends h {
   constructor(e) {
     super("div", []);
     const t = document.createElement("div");
@@ -1298,7 +1295,7 @@ class Mt extends h {
     return t && (e ? t.classList.add("loading") : t.classList.remove("loading")), this;
   }
 }
-const kt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23306FC5;'%20d='M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717%20c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.281V109.717%20c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.997,21.517,402.281z'/%3e%3cg%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='74.59,220.748%2089.888,220.748%2082.241,201.278%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='155.946,286.107%20155.946,295.148%20181.675,295.148%20181.675,304.885%20155.946,304.885%20155.946,315.318%20184.455,315.318%20197.666,300.712%20185.151,286.107%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='356.898,201.278%20348.553,220.748%20364.548,220.748%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='230.348,320.875%20230.348,281.241%20212.268,300.712%20'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299%20C261.637,298.624,264.42,296.539,264.42,292.368z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868%20c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502%20c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384%20l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444%20l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965%20h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123%20h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z%20M177.501,241.609h-6.955%20h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43%20H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306%20l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z%20M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738%20h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z%20M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042%20c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197%20c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565%20c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818%20v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829%20C270.676,218.662,272.996,219.129,275.076,221.294z%20M298.491,241.609h-11.822v-48.675h11.822V241.609z%20M434.083,241.609h-15.3%20l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211%20c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472%20c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783%20c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243%20h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609%20L434.083,241.609z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244%20c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367%20c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413%20l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0%20c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081%20c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431%20l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953%20v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394%20h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478%20c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039%20C475.087,312.043,475.105,311.598,475.105,311.144z%20M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299%20l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852%20c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z%20M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739%20c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084%20c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z%20M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z%20M402.791,325.05h-22.252%20v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475%20c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819%20h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473%20c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43%20C420.869,320.179,414.611,325.05,402.791,325.05z%20M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245%20c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475%20c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352%20c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696%20c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565%20c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495%20C466.761,313.925,465.37,317.401,462.59,320.179z'/%3e%3c/g%3e%3c/svg%3e", Tt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%2334495E;'%20d='M512,402.282c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.996,0,402.282V109.717%20c0-16.716,13.55-30.266,30.265-30.266h451.469c16.716,0,30.265,13.551,30.265,30.266L512,402.282L512,402.282z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.282V109.717%20c0-16.716,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.003,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.996,21.517,402.282z'/%3e%3cpath%20style='fill:%23F26E21;'%20d='M309.389,255.801c0.041-9.636-3.572-19.286-10.843-26.558c-7.287-7.287-16.961-10.897-26.617-10.839%20c-0.046,0-0.091-0.003-0.139-0.003c-20.968,0-37.6,16.628-37.6,37.602c0,20.767,16.837,37.599,37.6,37.599%20c20.974,0,37.604-16.631,37.604-37.599C309.394,255.934,309.389,255.869,309.389,255.801z'/%3e%3cg%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M227.198,271.909c-5.62,5.626-10.807,7.824-16.394,7.943c-13.611-0.122-23.618-10.202-23.618-24.573%20c0-7.234,2.739-13.163,7.078-18.228l0,0c4.069-3.863,9.311-6.359,15.339-6.359c6.507,0,11.571,2.169,17.352,7.954v-16.631%20c-5.78-2.891-10.846-4.338-17.352-4.338c-9.192,0.657-17.859,4.371-24.507,10.203l0,0c-1.916,1.724-3.752,3.627-5.309,5.805%20c-4.856,6.294-7.791,14.001-7.791,22.32c0,20.967,16.637,36.875,37.606,36.875c0.102,0,0.203-0.009,0.302-0.01%20c0.141,0.002,0.28,0.01,0.42,0.01c5.784,0,10.85-1.443,17.357-4.336L227.198,271.909c-0.244,0.244,0.242,0.471,0,0.702V271.909z'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='356.863,228.033%20356.863,228.033%20340.487,268.295%20321.685,220.566%20306.502,220.566%20336.148,293.601%20344.102,293.601%20375.196,220.566%20360.013,220.566%20'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='380.983,252.384%20380.983,291.435%20420.033,291.435%20420.753,291.435%20420.753,279.861%20408.461,279.861%20395.445,279.861%20395.445,266.848%20395.445,260.342%20420.033,260.342%20420.033,248.045%20395.445,248.045%20395.445,232.861%20420.753,232.861%20420.753,220.566%20380.983,220.566%20'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M54.135,220.566H33.884v70.869h20.25c10.845,0,18.798-2.895,25.306-7.957%20c7.953-6.508,13.017-16.629,13.017-27.474C92.458,235.028,77.27,220.566,54.135,220.566z%20M70.765,274.08%20c-4.339,3.614-10.124,5.781-18.802,5.781h-4.339V232.86h3.615c8.678,0,14.463,1.446,18.803,5.783%20c5.061,4.336,7.955,10.848,7.955,17.358C78.72,262.509,75.828,269.737,70.765,274.08z'/%3e%3crect%20x='98.97'%20y='220.56'%20style='fill:%23E7E8E3;'%20width='13.739'%20height='70.867'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M147.415,248.045c-8.676-2.892-10.848-5.063-10.848-8.677c0-4.339,4.339-7.954,10.124-7.954%20c4.339,0,7.954,1.447,11.57,5.786l7.233-9.4c-5.787-5.064-13.015-7.953-20.97-7.953c-12.296,0-22.42,8.678-22.42,20.244%20c0,10.126,4.343,14.464,17.357,19.526c5.785,2.166,7.955,2.892,9.404,4.338c2.887,1.444,4.336,4.339,4.336,7.228%20c0,5.786-4.336,10.126-10.848,10.126c-6.514,0-12.294-3.615-15.187-9.401l-8.678,8.678c6.511,9.4,14.465,13.738,24.589,13.738%20c14.461,0,24.58-9.4,24.58-23.141C167.659,258.893,163.324,253.831,147.415,248.045z'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M459.804,261.783c10.843-2.166,16.63-9.4,16.63-20.244c0-13.014-9.402-20.973-25.308-20.973h-20.972%20v70.869h13.739V263.23h2.172l19.519,28.205h16.634L459.804,261.783z%20M448.23,253.105h-4.336v-21.691h4.336%20c8.678,0,13.742,3.614,13.742,10.85C461.972,249.492,456.909,253.105,448.23,253.105z'/%3e%3c/g%3e%3c/svg%3e", It = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20291.791%20291.791'%20xml:space='preserve'%3e%3cg%3e%3cpath%20style='fill:%23E2574C;'%20d='M182.298,145.895c0,50.366-40.801,91.176-91.149,91.176S0,196.252,0,145.895%20s40.811-91.176,91.149-91.176S182.298,95.538,182.298,145.895z'/%3e%3cpath%20style='fill:%23F4B459;'%20d='M200.616,54.719c-20.442,0-39.261,6.811-54.469,18.181l0.073,0.009%20c2.991,2.89,6.291,4.924,8.835,8.251l-18.965,0.301c-2.972,3-5.68,6.264-8.233,9.656H161.3c2.544,3.054,4.896,5.708,7.03,9.081%20h-46.536c-1.705,2.936-3.282,5.954-4.659,9.09h56.493c1.477,3.127,2.799,5.489,3.921,8.799h-63.76%20c-1.012,3.146-1.878,6.364-2.535,9.646h68.966c0.675,3.155,1.194,6.072,1.55,9.045h-71.884c-0.301,3-0.456,6.045-0.456,9.118%20h72.859c0,3.228-0.228,6.218-0.556,9.118h-71.847c0.31,3.091,0.766,6.127,1.368,9.118h68.856c-0.711,2.954-1.532,5.926-2.562,9.008%20h-63.969c0.966,3.118,2.143,6.145,3.428,9.099h56.621c-1.568,3.319-3.346,5.972-5.306,9.081h-46.691%20c1.842,3.191,3.875,6.236,6.081,9.154l33.589,0.501c-2.863,3.437-6.537,5.507-9.884,8.516c0.182,0.146-5.352-0.018-16.248-0.191%20c16.576,17.105,39.744,27.772,65.446,27.772c50.357,0,91.176-40.82,91.176-91.176S250.981,54.719,200.616,54.719z'/%3e%3c/g%3e%3c/svg%3e", zt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%20-140%20780%20780'%20enable-background='new%200%200%20780%20500'%20version='1.1'%20xml:space='preserve'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40%20C0,17.909,17.909,0,40,0z'%20fill='%230E4595'/%3e%3cpath%20d='m293.2%20348.73l33.361-195.76h53.36l-33.385%20195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725%200-89.865%2026.55-90.18%2064.603-0.299%2028.13%2026.514%2043.822%2046.752%2053.186%2020.771%209.595%2027.752%2015.714%2027.654%2024.283-0.131%2013.121-16.586%2019.116-31.922%2019.116-21.357%200-32.703-2.967-50.227-10.276l-6.876-3.11-7.489%2043.823c12.463%205.464%2035.51%2010.198%2059.438%2010.443%2056.09%200%2092.5-26.246%2092.916-66.882%200.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268%200-8.137%209.668-16.839%2030.557-16.839%2017.449-0.27%2030.09%203.535%2039.938%207.5l4.781%202.26%207.232-42.429m137.31-4.223h-41.232c-12.773%200-22.332%203.487-27.941%2016.234l-79.244%20179.4h56.031s9.16-24.123%2011.232-29.418c6.125%200%2060.555%200.084%2068.338%200.084%201.596%206.853%206.49%2029.334%206.49%2029.334h49.514l-43.188-195.64zm-65.418%20126.41c4.412-11.279%2021.26-54.723%2021.26-54.723-0.316%200.522%204.379-11.334%207.074-18.684l3.605%2016.879s10.219%2046.729%2012.354%2056.528h-44.293zm-363.3-126.41l-52.24%20133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766%20171.2%2056.456-0.064%2084.004-195.39h-56.521'%20fill='%23ffffff'/%3e%3cpath%20d='m146.92%20152.96h-86.041l-0.681%204.073c66.938%2016.204%20111.23%2055.363%20129.62%20102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527'%20fill='%23F2AE14'/%3e%3c/svg%3e", S = [
+const kt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23306FC5;'%20d='M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717%20c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.281V109.717%20c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.997,21.517,402.281z'/%3e%3cg%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='74.59,220.748%2089.888,220.748%2082.241,201.278%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='155.946,286.107%20155.946,295.148%20181.675,295.148%20181.675,304.885%20155.946,304.885%20155.946,315.318%20184.455,315.318%20197.666,300.712%20185.151,286.107%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='356.898,201.278%20348.553,220.748%20364.548,220.748%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='230.348,320.875%20230.348,281.241%20212.268,300.712%20'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299%20C261.637,298.624,264.42,296.539,264.42,292.368z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868%20c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502%20c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384%20l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444%20l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965%20h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123%20h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z%20M177.501,241.609h-6.955%20h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43%20H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306%20l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z%20M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738%20h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z%20M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042%20c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197%20c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565%20c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818%20v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829%20C270.676,218.662,272.996,219.129,275.076,221.294z%20M298.491,241.609h-11.822v-48.675h11.822V241.609z%20M434.083,241.609h-15.3%20l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211%20c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472%20c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783%20c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243%20h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609%20L434.083,241.609z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244%20c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367%20c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413%20l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0%20c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081%20c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431%20l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953%20v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394%20h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478%20c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039%20C475.087,312.043,475.105,311.598,475.105,311.144z%20M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299%20l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852%20c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z%20M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739%20c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084%20c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z%20M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z%20M402.791,325.05h-22.252%20v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475%20c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819%20h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473%20c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43%20C420.869,320.179,414.611,325.05,402.791,325.05z%20M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245%20c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475%20c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352%20c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696%20c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565%20c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495%20C466.761,313.925,465.37,317.401,462.59,320.179z'/%3e%3c/g%3e%3c/svg%3e", Tt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%2334495E;'%20d='M512,402.282c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.996,0,402.282V109.717%20c0-16.716,13.55-30.266,30.265-30.266h451.469c16.716,0,30.265,13.551,30.265,30.266L512,402.282L512,402.282z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.282V109.717%20c0-16.716,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.003,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.996,21.517,402.282z'/%3e%3cpath%20style='fill:%23F26E21;'%20d='M309.389,255.801c0.041-9.636-3.572-19.286-10.843-26.558c-7.287-7.287-16.961-10.897-26.617-10.839%20c-0.046,0-0.091-0.003-0.139-0.003c-20.968,0-37.6,16.628-37.6,37.602c0,20.767,16.837,37.599,37.6,37.599%20c20.974,0,37.604-16.631,37.604-37.599C309.394,255.934,309.389,255.869,309.389,255.801z'/%3e%3cg%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M227.198,271.909c-5.62,5.626-10.807,7.824-16.394,7.943c-13.611-0.122-23.618-10.202-23.618-24.573%20c0-7.234,2.739-13.163,7.078-18.228l0,0c4.069-3.863,9.311-6.359,15.339-6.359c6.507,0,11.571,2.169,17.352,7.954v-16.631%20c-5.78-2.891-10.846-4.338-17.352-4.338c-9.192,0.657-17.859,4.371-24.507,10.203l0,0c-1.916,1.724-3.752,3.627-5.309,5.805%20c-4.856,6.294-7.791,14.001-7.791,22.32c0,20.967,16.637,36.875,37.606,36.875c0.102,0,0.203-0.009,0.302-0.01%20c0.141,0.002,0.28,0.01,0.42,0.01c5.784,0,10.85-1.443,17.357-4.336L227.198,271.909c-0.244,0.244,0.242,0.471,0,0.702V271.909z'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='356.863,228.033%20356.863,228.033%20340.487,268.295%20321.685,220.566%20306.502,220.566%20336.148,293.601%20344.102,293.601%20375.196,220.566%20360.013,220.566%20'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='380.983,252.384%20380.983,291.435%20420.033,291.435%20420.753,291.435%20420.753,279.861%20408.461,279.861%20395.445,279.861%20395.445,266.848%20395.445,260.342%20420.033,260.342%20420.033,248.045%20395.445,248.045%20395.445,232.861%20420.753,232.861%20420.753,220.566%20380.983,220.566%20'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M54.135,220.566H33.884v70.869h20.25c10.845,0,18.798-2.895,25.306-7.957%20c7.953-6.508,13.017-16.629,13.017-27.474C92.458,235.028,77.27,220.566,54.135,220.566z%20M70.765,274.08%20c-4.339,3.614-10.124,5.781-18.802,5.781h-4.339V232.86h3.615c8.678,0,14.463,1.446,18.803,5.783%20c5.061,4.336,7.955,10.848,7.955,17.358C78.72,262.509,75.828,269.737,70.765,274.08z'/%3e%3crect%20x='98.97'%20y='220.56'%20style='fill:%23E7E8E3;'%20width='13.739'%20height='70.867'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M147.415,248.045c-8.676-2.892-10.848-5.063-10.848-8.677c0-4.339,4.339-7.954,10.124-7.954%20c4.339,0,7.954,1.447,11.57,5.786l7.233-9.4c-5.787-5.064-13.015-7.953-20.97-7.953c-12.296,0-22.42,8.678-22.42,20.244%20c0,10.126,4.343,14.464,17.357,19.526c5.785,2.166,7.955,2.892,9.404,4.338c2.887,1.444,4.336,4.339,4.336,7.228%20c0,5.786-4.336,10.126-10.848,10.126c-6.514,0-12.294-3.615-15.187-9.401l-8.678,8.678c6.511,9.4,14.465,13.738,24.589,13.738%20c14.461,0,24.58-9.4,24.58-23.141C167.659,258.893,163.324,253.831,147.415,248.045z'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M459.804,261.783c10.843-2.166,16.63-9.4,16.63-20.244c0-13.014-9.402-20.973-25.308-20.973h-20.972%20v70.869h13.739V263.23h2.172l19.519,28.205h16.634L459.804,261.783z%20M448.23,253.105h-4.336v-21.691h4.336%20c8.678,0,13.742,3.614,13.742,10.85C461.972,249.492,456.909,253.105,448.23,253.105z'/%3e%3c/g%3e%3c/svg%3e", It = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20291.791%20291.791'%20xml:space='preserve'%3e%3cg%3e%3cpath%20style='fill:%23E2574C;'%20d='M182.298,145.895c0,50.366-40.801,91.176-91.149,91.176S0,196.252,0,145.895%20s40.811-91.176,91.149-91.176S182.298,95.538,182.298,145.895z'/%3e%3cpath%20style='fill:%23F4B459;'%20d='M200.616,54.719c-20.442,0-39.261,6.811-54.469,18.181l0.073,0.009%20c2.991,2.89,6.291,4.924,8.835,8.251l-18.965,0.301c-2.972,3-5.68,6.264-8.233,9.656H161.3c2.544,3.054,4.896,5.708,7.03,9.081%20h-46.536c-1.705,2.936-3.282,5.954-4.659,9.09h56.493c1.477,3.127,2.799,5.489,3.921,8.799h-63.76%20c-1.012,3.146-1.878,6.364-2.535,9.646h68.966c0.675,3.155,1.194,6.072,1.55,9.045h-71.884c-0.301,3-0.456,6.045-0.456,9.118%20h72.859c0,3.228-0.228,6.218-0.556,9.118h-71.847c0.31,3.091,0.766,6.127,1.368,9.118h68.856c-0.711,2.954-1.532,5.926-2.562,9.008%20h-63.969c0.966,3.118,2.143,6.145,3.428,9.099h56.621c-1.568,3.319-3.346,5.972-5.306,9.081h-46.691%20c1.842,3.191,3.875,6.236,6.081,9.154l33.589,0.501c-2.863,3.437-6.537,5.507-9.884,8.516c0.182,0.146-5.352-0.018-16.248-0.191%20c16.576,17.105,39.744,27.772,65.446,27.772c50.357,0,91.176-40.82,91.176-91.176S250.981,54.719,200.616,54.719z'/%3e%3c/g%3e%3c/svg%3e", zt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%20-140%20780%20780'%20enable-background='new%200%200%20780%20500'%20version='1.1'%20xml:space='preserve'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40%20C0,17.909,17.909,0,40,0z'%20fill='%230E4595'/%3e%3cpath%20d='m293.2%20348.73l33.361-195.76h53.36l-33.385%20195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725%200-89.865%2026.55-90.18%2064.603-0.299%2028.13%2026.514%2043.822%2046.752%2053.186%2020.771%209.595%2027.752%2015.714%2027.654%2024.283-0.131%2013.121-16.586%2019.116-31.922%2019.116-21.357%200-32.703-2.967-50.227-10.276l-6.876-3.11-7.489%2043.823c12.463%205.464%2035.51%2010.198%2059.438%2010.443%2056.09%200%2092.5-26.246%2092.916-66.882%200.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268%200-8.137%209.668-16.839%2030.557-16.839%2017.449-0.27%2030.09%203.535%2039.938%207.5l4.781%202.26%207.232-42.429m137.31-4.223h-41.232c-12.773%200-22.332%203.487-27.941%2016.234l-79.244%20179.4h56.031s9.16-24.123%2011.232-29.418c6.125%200%2060.555%200.084%2068.338%200.084%201.596%206.853%206.49%2029.334%206.49%2029.334h49.514l-43.188-195.64zm-65.418%20126.41c4.412-11.279%2021.26-54.723%2021.26-54.723-0.316%200.522%204.379-11.334%207.074-18.684l3.605%2016.879s10.219%2046.729%2012.354%2056.528h-44.293zm-363.3-126.41l-52.24%20133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766%20171.2%2056.456-0.064%2084.004-195.39h-56.521'%20fill='%23ffffff'/%3e%3cpath%20d='m146.92%20152.96h-86.041l-0.681%204.073c66.938%2016.204%20111.23%2055.363%20129.62%20102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527'%20fill='%23F2AE14'/%3e%3c/svg%3e", w = [
   {
     type: "visa",
     imgSrc: zt
@@ -1316,7 +1313,7 @@ const kt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%
     imgSrc: Tt
   }
 ];
-class Nt extends h {
+class Pt extends h {
   cardType;
   constructor(e) {
     super("div", []), this.cardType = e.cardType;
@@ -1328,11 +1325,11 @@ class Nt extends h {
     a.id = "card-element", a.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, a.style.zIndex = e.isFocused ? "2" : "0";
     const r = document.createElement("div");
     if (r.className = "cards-position", e.cardType === "unknown")
-      S.forEach((s) => {
+      w.forEach((s) => {
         r.appendChild(this.createCardIcon(s));
       });
     else {
-      const s = S.find((n) => n.type === e.cardType);
+      const s = w.find((n) => n.type === e.cardType);
       s && r.appendChild(this.createCardIcon(s));
     }
     a.appendChild(r), i.appendChild(a), this.getElement().appendChild(i);
@@ -1363,19 +1360,19 @@ class Nt extends h {
     const i = this.getElement().querySelector(".cards-position");
     if (i)
       if (i.innerHTML = "", this.cardType === "unknown")
-        S.forEach((a) => {
+        w.forEach((a) => {
           i.appendChild(this.createCardIcon(a));
         });
       else {
-        const a = S.find((r) => r.type === this.cardType);
-        a ? i.appendChild(this.createCardIcon(a)) : S.forEach((r) => {
+        const a = w.find((r) => r.type === this.cardType);
+        a ? i.appendChild(this.createCardIcon(a)) : w.forEach((r) => {
           i.appendChild(this.createCardIcon(r));
         });
       }
     return this;
   }
 }
-class Pt extends h {
+class Nt extends h {
   cardNumber;
   cardExpiry;
   cardCvv;
@@ -1394,34 +1391,34 @@ class Pt extends h {
       cardType: d,
       cardExpiry: u,
       cardExpiryError: p,
-      cardExpiryTouched: m,
-      onChange: f,
-      onBlur: M,
-      translationFunc: y,
-      cardExpiryAutocomplete: b = "cc-exp"
+      cardExpiryTouched: g,
+      onChange: m,
+      onBlur: b,
+      translationFunc: S,
+      cardExpiryAutocomplete: x = "cc-exp"
     } = e, C = document.createElement("div");
-    this.cardNumber = new Nt({
+    this.cardNumber = new Pt({
       styles: {
         color: t.styles.textColor,
         fontSize: t.styles.fontSize,
         borderRadius: t.styles.borderRadius
       },
-      label: y("cardInformation"),
+      label: S("cardInformation"),
       isLoading: i,
       isFocused: a,
       cardType: d
     }), C.appendChild(this.cardNumber.getElement());
-    const F = document.createElement("div");
-    F.className = "card-details", this.cardExpiry = new N({
+    const v = document.createElement("div");
+    v.className = "card-details", this.cardExpiry = new P({
       name: "cardExpiry",
       type: "tel",
-      placeholder: y("cardExpiry"),
-      error: !!(p && m),
+      placeholder: S("cardExpiry"),
+      error: !!(p && g),
       errorMsg: p,
       value: u,
-      autocomplete: b,
-      onChange: (g) => {
-        this.trimCardExpiry(), f(g);
+      autocomplete: x,
+      onChange: (f) => {
+        this.trimCardExpiry(), m(f);
       },
       styles: {
         color: t.styles.textColor,
@@ -1429,8 +1426,8 @@ class Pt extends h {
         fontSize: t.styles.fontSize,
         fontFamily: t.styles.fontFamily
       }
-    }), this.cardExpiry.addEventListener("blur", M), this.cardExpiry.addEventListener("keydown", (g) => {
-      const T = g;
+    }), this.cardExpiry.addEventListener("blur", b), this.cardExpiry.addEventListener("keydown", (f) => {
+      const T = f;
       ![
         "Backspace",
         "Delete",
@@ -1442,31 +1439,31 @@ class Pt extends h {
     const R = this.cardExpiry.getElement();
     R.style.height = "38.5px";
     const k = document.createElement("div");
-    k.className = "input-wrapper", this.cardCvv = new Mt({
+    k.className = "input-wrapper", this.cardCvv = new Lt({
       styles: {
         borderRadius: typeof t.styles.borderRadius == "number" ? t.styles.borderRadius : 0
       },
       isLoading: i,
       isFocused: r
-    }), k.appendChild(this.cardCvv.getElement()), F.appendChild(this.cardExpiry.getElement()), F.appendChild(k), C.appendChild(F);
-    const v = document.createElement("div");
-    if (v.className = "error-messages-container", v.style.width = "100%", v.style.transition = "height 0.3s ease-in-out, opacity 0.3s ease-in-out", v.style.overflow = "hidden", v.style.height = "0px", v.style.opacity = "0", this.getElement().appendChild(C), this.getElement().appendChild(v), (a || l) && !s) {
-      const g = new E({
-        text: y("validation.cardNumberInvalid")
+    }), k.appendChild(this.cardCvv.getElement()), v.appendChild(this.cardExpiry.getElement()), v.appendChild(k), C.appendChild(v);
+    const y = document.createElement("div");
+    if (y.className = "error-messages-container", y.style.width = "100%", y.style.transition = "height 0.3s ease-in-out, opacity 0.3s ease-in-out", y.style.overflow = "hidden", y.style.height = "0px", y.style.opacity = "0", this.getElement().appendChild(C), this.getElement().appendChild(y), (a || l) && !s) {
+      const f = new E({
+        text: S("validation.cardNumberInvalid")
       });
-      this.validationMessages.set("cardNumber", g), v.appendChild(g.getElement());
+      this.validationMessages.set("cardNumber", f), y.appendChild(f.getElement());
     }
     if ((r || c) && !n) {
-      const g = new E({
-        text: y("validation.cardSecurityFormat")
+      const f = new E({
+        text: S("validation.cardSecurityFormat")
       });
-      this.validationMessages.set("cardCvv", g), v.appendChild(g.getElement());
+      this.validationMessages.set("cardCvv", f), y.appendChild(f.getElement());
     }
-    if (p && m) {
-      const g = new E({
+    if (p && g) {
+      const f = new E({
         text: p
       });
-      this.validationMessages.set("cardExpiry", g), v.appendChild(g.getElement());
+      this.validationMessages.set("cardExpiry", f), y.appendChild(f.getElement());
     }
     setTimeout(() => this.updateErrorContainerHeight(), 0);
   }
@@ -1572,7 +1569,7 @@ class At {
       translationFunc: l,
       autocomplete: c = "email"
     } = e;
-    this.input = new N({
+    this.input = new P({
       name: "email",
       label: l("email"),
       error: r,
@@ -1649,31 +1646,61 @@ class Vt extends h {
 class $t extends h {
   paymentMethods;
   constructor(e) {
-    const { checkoutProfile: t, formData: i, onPaypalSubmit: a } = e;
+    const {
+      checkoutProfile: t,
+      formData: i,
+      onPaypalSubmit: a,
+      supportedPaymentMethods: r
+    } = e;
     if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
       this.getElement().style.display = "none";
       return;
     }
-    const r = Object.entries(
+    if (r === void 0) {
+      console.log(
+        "[PaymentMethods] No supportedPaymentMethods provided, hiding payment methods"
+      ), this.getElement().style.display = "none";
+      return;
+    }
+    const s = Object.entries(
       t.additionalPaymentMethods
-    ).filter(([, s]) => s.enabled).sort((s, n) => s[1].order - n[1].order);
-    if (r.length === 0) {
+    ).filter(([n, l]) => {
+      const c = l.enabled, d = r ? r[n] === !0 : !0;
+      return c && d;
+    }).sort((n, l) => n[1].order - l[1].order);
+    if (s.length === 0) {
       this.getElement().style.display = "none";
       return;
     }
-    for (const [s] of r)
-      switch (s) {
+    for (const [n] of s)
+      switch (n) {
         case "paypal": {
           if (a) {
-            const n = new Vt({
+            const l = new Vt({
               checkoutProfile: t,
               formData: i,
               onSubmit: a
             });
-            this.paymentMethods.set("paypal", n), n.appendTo(this.getElement());
+            this.paymentMethods.set("paypal", l), l.appendTo(this.getElement());
           }
           break;
         }
+        // Add cases for other payment methods when they become available
+        // case 'googlepay':
+        //   const googlePayButton = new GooglePayButton({ checkoutProfile });
+        //   this.paymentMethods.set('googlepay', googlePayButton);
+        //   googlePayButton.appendTo(this.getElement());
+        //   break;
+        // case 'applepay':
+        //   const applePayButton = new ApplePayButton({ checkoutProfile });
+        //   this.paymentMethods.set('applepay', applePayButton);
+        //   applePayButton.appendTo(this.getElement());
+        //   break;
+        default:
+          console.warn(
+            `[PaymentMethods] Unsupported payment method: ${n}`
+          );
+          break;
       }
   }
   updateFormData(e) {
@@ -1842,7 +1869,8 @@ class jt extends h {
           setFormData: (s) => {
             this.formManager.setFormData(s);
           },
-          environment: this.options.environment
+          environment: this.options.environment,
+          paymentId: this.options.paymentId || ""
         }), this.iframeHook?.subscribe(this.handleIframeStateChange), console.log("[Form] Calling iframeHook.initialize()."), await this.iframeHook?.initialize(), console.log("[Form] iframeHook.initialize() finished.");
       } catch (t) {
         throw console.error("Failed to initialize payment form:", t), t;
@@ -1852,6 +1880,10 @@ class jt extends h {
   isCcTouched = !1;
   isCvvTouched = !1;
   handleIframeStateChange = (e) => {
+    if (e.iframeConfig?.supportedPaymentMethods && this.paymentMethods) {
+      const t = this.checkoutProfile.getState();
+      t.checkoutProfile && (this.element.removeChild(this.paymentMethods.getElement()), this.createPaymentMethods(t.checkoutProfile, !0));
+    }
     this.cardSection && (e.isFocused && (this.isCcTouched = !0), e.isCvvFocused && (this.isCvvTouched = !0), this.cardSection.updateCardNumberValidation(
       e.isFocused,
       e.isCcValid,
@@ -1876,7 +1908,7 @@ class jt extends h {
           isCvvValid: !1,
           possibleCardType: "unknown"
         };
-        this.iframeHook && (r = this.iframeHook.getState()), this.cardSection = new Pt({
+        this.iframeHook && (r = this.iframeHook.getState()), this.cardSection = new Nt({
           checkoutProfile: e,
           isLoading: r.loadingIframe,
           isFocused: r.isFocused,
@@ -1950,22 +1982,24 @@ class jt extends h {
       console.error("Failed to create submit button:", t);
     }
   }
-  createPaymentMethods(e) {
+  createPaymentMethods(e, t = !1) {
     try {
-      if (!e?.additionalPaymentMethods || Object.entries(
-        e.additionalPaymentMethods
-      ).filter(([, a]) => a.enabled).length === 0)
+      if (!e?.additionalPaymentMethods)
         return;
-      const { formData: i } = this._getFormStateData();
+      const i = this.iframeHook?.getState().iframeConfig?.supportedPaymentMethods, { formData: a } = this._getFormStateData();
       this.paymentMethods = new $t({
         checkoutProfile: e,
-        formData: i,
+        formData: a,
+        supportedPaymentMethods: i,
         onPaypalSubmit: async () => {
           await this.handlePaypalSubmit();
         }
-      }), this.element.appendChild(this.paymentMethods.getElement());
-    } catch (t) {
-      throw console.error("Error creating payment methods:", t), t;
+      }), t ? this.element.insertBefore(
+        this.paymentMethods.getElement(),
+        this.element.firstChild
+      ) : this.element.appendChild(this.paymentMethods.getElement());
+    } catch (i) {
+      throw console.error("Error creating payment methods:", i), i;
     }
   }
   createEmailField(e) {
@@ -1987,7 +2021,7 @@ class jt extends h {
   createCardholderSection(e) {
     try {
       const { formData: t, errors: i, touched: a } = this._getFormStateData();
-      this.cardholderSection = new Lt({
+      this.cardholderSection = new Mt({
         value: t.name,
         onChange: this.handleChange,
         onBlur: this.handleBlur,
@@ -2138,7 +2172,8 @@ class Ut {
       profileId: this.options.profileId,
       container: this.container,
       environment: this.options.environment,
-      onLoadingStateChange: this.options.onLoadingStateChange
+      onLoadingStateChange: this.options.onLoadingStateChange,
+      paymentId: this.options.paymentId
     }));
   }
   unmount() {
@@ -2186,7 +2221,8 @@ class Gt {
         profileId: this.config.profileId,
         disableErrorMessages: this.config.disableErrorMessages,
         environment: this.config.environment,
-        onLoadingStateChange: this.config.callbacks.onLoadingStateChange
+        onLoadingStateChange: this.config.callbacks.onLoadingStateChange,
+        paymentId: this.config.paymentId
       },
       this.handleSubmit.bind(this)
     );

package/dist/index.css

@@ -1 +1 @@
-.form-container{display:grid;gap:24px;padding:4px;position:relative;min-height:340px;max-width:100%;text-align:left}.form-container>*{font-family:inherit}.card-details{display:flex}.error-messages-container>*{display:none}.error-messages-container>*:first-child{display:block}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border:6px solid transparent;border-top:6px solid #4f81ff;border-right:6px solid #36d1dc;border-radius:50%;animation:spin 1s ease-in-out infinite,glow 1.5s ease-in-out infinite alternate;box-shadow:0 0 #4f81ff00}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow{0%{box-shadow:0 0 #4f81ff00}to{box-shadow:0 0 20px #4f81ff99}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;flex-grow:1;flex-basis:0;box-sizing:border-box}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box}.form-input-error{color:#dc2727}.form-input::placeholder{color:#717173;opacity:.3}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.form-helper-text{color:#dc2727;font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}.input-label{margin-bottom:6px}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:16px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:20px;top:8px;display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;background-color:#fff;border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;height:min-content;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}
+.form-container{display:flex;flex-direction:column;gap:24px;padding:4px;position:relative;min-height:340px;max-width:100%;text-align:left}.form-container>*{font-family:inherit}.card-details{display:flex}.error-messages-container>*{display:none}.error-messages-container>*:first-child{display:block}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border:6px solid transparent;border-top:6px solid #4f81ff;border-right:6px solid #36d1dc;border-radius:50%;animation:spin 1s ease-in-out infinite,glow 1.5s ease-in-out infinite alternate;box-shadow:0 0 #4f81ff00}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow{0%{box-shadow:0 0 #4f81ff00}to{box-shadow:0 0 20px #4f81ff99}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;flex-grow:1;flex-basis:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box;min-height:0;flex:1}.form-input-error{color:#dc2727}.form-input::placeholder{color:#717173;opacity:.3}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.form-helper-text{color:#dc2727;font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}.input-label{margin-bottom:6px}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:16px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:20px;top:8px;display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;background-color:#fff;border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;height:min-content;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "0.5.10",
+  "version": "0.6.0",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "0.5.10",
+  "version": "0.6.0",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",