@getopenpay/openpay-js-react 0.0.11 → 0.0.12-alpha.417b378

package/README.md

@@ -33,12 +33,68 @@ The library provides separate card elements (Card number, expiry, CVV) and a com
 - `<CardCvcElement />`
 - `<CardElement />` (Combined)
 
+<br />
+
+### Callbacks
+
+`ElementsForm` component, which is responsible for managing the form elements involved in the payment checkout process. This provides optional callback functions and properties that help customize the behavior of the form.
+
+`onFocus?: (elementId: string) => void`  
+Triggered when a form element gains focus.  
+Parameters:  
+`elementId`: The ID of the element that gained focus.
+
+`onBlur?: (elementId: string) => void`  
+Triggered when a form element loses focus.  
+Parameters:  
+`elementId`: The ID of the element that lost focus.
+
+`onChange?: (elementId: string) => void`  
+Triggered when a form element's value changes.  
+Parameters:  
+`elementId`: The ID of the element whose value changed.
+
+`onLoad?: (totalAmountAtoms: number, currency?: string) => void`  
+Triggered when the form is successfully loaded.  
+Parameters:  
+`totalAmountAtoms`: The total amount to be processed in atomic units (usually the smallest denomination of the currency).  
+`currency`: (Optional) The currency code in which the transaction is being processed.
+
+`onLoadError?: (message: string) => void`  
+Triggered if there is an error loading the form.  
+Parameters:  
+`message`: A string describing the error that occurred during form loading.
+
+`onValidationError?: (field: FieldNames, errors: string[], elementId?: string) => void`  
+Triggered when there is a validation error in any of the form fields.  
+Parameters:  
+`field`: The name of the field that failed validation.  
+`errors:` An array of error messages describing the validation issues.  
+`elementId:` (Optional) The ID of the element where the validation error occurred.
+
+`onCheckoutStarted?: () => void`  
+Triggered when the checkout process begins.
+
+`onCheckoutSuccess?: (invoiceUrls: string[], subscriptionIds: string[], customerId: string) => void`  
+Triggered when the checkout process is successfully completed.  
+Parameters:  
+`invoiceUrls`: An array of URLs to the generated invoices.
+
+`onCheckoutError?: (message: string) => void`  
+Triggered when an error occurs during the checkout process.  
+Parameters:  
+`message`: A string describing the error that occurred during checkout.
+
+<br />
+
 ### Billing information
 
 Customer billing information is required to proceed checkout. You can implement the input fields for billing information in your own way. Since you're in control of these fields, you can perform custom validations, custom styling and auto-fill with user account information.  
-For OpenPay to access the input fields, please include `data-opid` attribute with predefined field names which can be accessed via `FieldName`.
+For OpenPay to access the input fields, please include `data-opid` attribute with predefined field names which can be accessed via `FieldName`. 
 
-Available field names:
+Fields must be rendered inside `<ElementsForm>`
+
+Available field names: 
 
 - `FieldName.FIRST_NAME`
 - `FieldName.LAST_NAME`
@@ -49,17 +105,48 @@ Available field names:
 - `FieldName.COUNTRY`
 - `FieldName.ADDRESS`
 - `FieldName.PHONE`
+- `FieldName.PROMOTION_CODE`
+
+<br />
 
 ### Styling
 
 By default, the elements provided are "Unstyled". They will have transparent background and text color adaptive to system's color scheme. You can wrap an element inside a container to which you can apply customized styling ([Examples](doc:examples)).
 
-If you want to customize the styling of the element itself you can apply via the optional `styles` prop. The following are supported properties. These support any valid CSS values.
+ If you want to customize the styling of the element itself you can apply via the optional `styles` prop. The following are supported properties. These support any valid CSS values.
 
-- `backgroundColor`
+- `backgroundColor` 
 - `color`
 - `fontFamily`
 - `fontSize`
 - `fontWeight`
 - `margin`
 - `padding`
+
+Optionally, placeholder can be configured via a property of `styles`.  
+
+- `placeholder` : `string | { cardNumber: string, expiry: string, cvc: string }`
+
+For individual card elements: placeholder accepts  a `string`  
+For the combined`<CardElement>`: placeholder accepts an object `{ cardNumber: string, expiry: string, cvc: string }`
+
+
+## Release | Publish
+
+### Alpha version 
+
+Default CDE environment for alpha version is `staging`
+
+A new alpha version is automatically released when a commit is pushed to main. 
+
+### Stable version
+
+Default CDE environment for stable version is `production`
+
+To release a new version:
+- the version in `package.json` need to be upgraded 
+- merge the commit containing the version update to main
+- create a new release in github 
+  - create new tag with updated version (e.g. if version in package.json is `0.0.10`, create a tag named `v0.0.10`)
+  - publish the release
+It will publish a new stable version to npm

package/dist/index.js

@@ -1,6 +1,6 @@
-import vr, { createContext as gr, useContext as _r, useState as I, useMemo as Oe, useCallback as Te, useRef as Pt, useEffect as He } from "react";
+import vr, { createContext as gr, useContext as _r, useState as I, useMemo as Oe, useCallback as Te, useRef as Zt, useEffect as He } from "react";
 import { jsx as oe } from "react/jsx-runtime";
-const Zt = gr({
+const jt = gr({
   formId: "",
   formHeight: "",
   referer: void 0,
@@ -9,14 +9,14 @@ const Zt = gr({
   },
   baseUrl: ""
 }), xr = () => {
-  const r = _r(Zt);
+  const r = _r(jt);
   if (!r)
     throw new Error("useOpenPayElements must be used within an OpenPayElementsProvider");
   return r;
 };
 var R = [];
-for (var dt = 0; dt < 256; ++dt)
-  R.push((dt + 256).toString(16).slice(1));
+for (var ut = 0; ut < 256; ++ut)
+  R.push((ut + 256).toString(16).slice(1));
 function br(r, e = 0) {
   return (R[r[e + 0]] + R[r[e + 1]] + R[r[e + 2]] + R[r[e + 3]] + "-" + R[r[e + 4]] + R[r[e + 5]] + "-" + R[r[e + 6]] + R[r[e + 7]] + "-" + R[r[e + 8]] + R[r[e + 9]] + "-" + R[r[e + 10]] + R[r[e + 11]] + R[r[e + 12]] + R[r[e + 13]] + R[r[e + 14]] + R[r[e + 15]]).toLowerCase();
 }
@@ -27,12 +27,12 @@ function wr() {
   return We(kr);
 }
 var Er = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-const Ct = {
+const Ot = {
   randomUUID: Er
 };
-function jt(r, e, t) {
-  if (Ct.randomUUID && !e && !r)
-    return Ct.randomUUID();
+function Mt(r, e, t) {
+  if (Ot.randomUUID && !e && !r)
+    return Ot.randomUUID();
   r = r || {};
   var n = r.random || (r.rng || wr)();
   return n[6] = n[6] & 15 | 64, n[8] = n[8] & 63 | 128, br(n);
@@ -73,14 +73,14 @@ var x;
   }
   r.joinValues = n, r.jsonStringifyReplacer = (s, a) => typeof a == "bigint" ? a.toString() : a;
 })(x || (x = {}));
-var lt;
+var ft;
 (function(r) {
   r.mergeShapes = (e, t) => ({
     ...e,
     ...t
     // second overwrites first
   });
-})(lt || (lt = {}));
+})(ft || (ft = {}));
 const h = x.arrayToEnum([
   "string",
   "nan",
@@ -257,12 +257,12 @@ const _e = (r, e) => {
   }
   return { message: t };
 };
-let Mt = _e;
-function Sr(r) {
-  Mt = r;
+let Dt = _e;
+function Cr(r) {
+  Dt = r;
 }
 function Ke() {
-  return Mt;
+  return Dt;
 }
 const Ye = (r) => {
   const { data: e, path: t, errorMaps: n, issueData: s } = r, a = [...t, ...s.path || []], i = {
@@ -284,7 +284,7 @@ const Ye = (r) => {
     path: a,
     message: o
   };
-}, Cr = [];
+}, Sr = [];
 function l(r, e) {
   const t = Ke(), n = Ye({
     issueData: e,
@@ -343,12 +343,12 @@ class N {
 }
 const v = Object.freeze({
   status: "aborted"
-}), ve = (r) => ({ status: "dirty", value: r }), P = (r) => ({ status: "valid", value: r }), ft = (r) => r.status === "aborted", ht = (r) => r.status === "dirty", Re = (r) => r.status === "valid", Ie = (r) => typeof Promise < "u" && r instanceof Promise;
+}), ve = (r) => ({ status: "dirty", value: r }), P = (r) => ({ status: "valid", value: r }), ht = (r) => r.status === "aborted", pt = (r) => r.status === "dirty", Re = (r) => r.status === "valid", Ie = (r) => typeof Promise < "u" && r instanceof Promise;
 function Je(r, e, t, n) {
   if (typeof e == "function" ? r !== e || !n : !e.has(r)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
   return e.get(r);
 }
-function Dt(r, e, t, n, s) {
+function Lt(r, e, t, n, s) {
   if (typeof e == "function" ? r !== e || !s : !e.has(r)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return e.set(r, t), t;
 }
@@ -356,7 +356,7 @@ var m;
 (function(r) {
   r.errToObj = (e) => typeof e == "string" ? { message: e } : e || {}, r.toString = (e) => typeof e == "string" ? e : e == null ? void 0 : e.message;
 })(m || (m = {}));
-var Se, Ce;
+var Ce, Se;
 class Y {
   constructor(e, t, n, s) {
     this._cachedPath = [], this.parent = e, this.data = t, this._path = n, this._key = s;
@@ -365,7 +365,7 @@ class Y {
     return this._cachedPath.length || (this._key instanceof Array ? this._cachedPath.push(...this._path, ...this._key) : this._cachedPath.push(...this._path, this._key)), this._cachedPath;
   }
 }
-const Ot = (r, e) => {
+const Rt = (r, e) => {
   if (Re(e))
     return { success: !0, data: e.value };
   if (!r.common.issues.length)
@@ -455,7 +455,7 @@ class _ {
       data: e,
       parsedType: ie(e)
     }, a = this._parseSync({ data: e, path: s.path, parent: s });
-    return Ot(s, a);
+    return Rt(s, a);
   }
   async parseAsync(e, t) {
     const n = await this.safeParseAsync(e, t);
@@ -476,7 +476,7 @@ class _ {
       data: e,
       parsedType: ie(e)
     }, s = this._parse({ data: e, path: n.path, parent: n }), a = await (Ie(s) ? s : Promise.resolve(s));
-    return Ot(n, a);
+    return Rt(n, a);
   }
   refine(e, t) {
     const n = (s) => typeof t == "string" || typeof t > "u" ? { message: t } : typeof t == "function" ? t(s) : t;
@@ -540,7 +540,7 @@ class _ {
     });
   }
   brand() {
-    return new yt({
+    return new vt({
       typeName: y.ZodBranded,
       type: this,
       ...g(this._def)
@@ -576,17 +576,17 @@ class _ {
   }
 }
 const Or = /^c[^\s-]{8,}$/i, Rr = /^[0-9a-z]+$/, Ir = /^[0-9A-HJKMNP-TV-Z]{26}$/, Nr = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/i, Ar = /^[a-z0-9_-]{21}$/i, Pr = /^[-+]?P(?!$)(?:(?:[-+]?\d+Y)|(?:[-+]?\d+[.,]\d+Y$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:(?:[-+]?\d+W)|(?:[-+]?\d+[.,]\d+W$))?(?:(?:[-+]?\d+D)|(?:[-+]?\d+[.,]\d+D$))?(?:T(?=[\d+-])(?:(?:[-+]?\d+H)|(?:[-+]?\d+[.,]\d+H$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:[-+]?\d+(?:[.,]\d+)?S)?)??$/, Zr = /^(?!\.)(?!.*\.\.)([A-Z0-9_'+\-\.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9\-]*\.)+[A-Z]{2,}$/i, jr = "^(\\p{Extended_Pictographic}|\\p{Emoji_Component})+$";
-let ut;
-const Mr = /^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/, Dr = /^(([a-f0-9]{1,4}:){7}|::([a-f0-9]{1,4}:){0,6}|([a-f0-9]{1,4}:){1}:([a-f0-9]{1,4}:){0,5}|([a-f0-9]{1,4}:){2}:([a-f0-9]{1,4}:){0,4}|([a-f0-9]{1,4}:){3}:([a-f0-9]{1,4}:){0,3}|([a-f0-9]{1,4}:){4}:([a-f0-9]{1,4}:){0,2}|([a-f0-9]{1,4}:){5}:([a-f0-9]{1,4}:){0,1})([a-f0-9]{1,4}|(((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2}))\.){3}((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2})))$/, Lr = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/, Lt = "((\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-((0[13578]|1[02])-(0[1-9]|[12]\\d|3[01])|(0[469]|11)-(0[1-9]|[12]\\d|30)|(02)-(0[1-9]|1\\d|2[0-8])))", Ur = new RegExp(`^${Lt}$`);
-function Ut(r) {
+let lt;
+const Mr = /^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/, Dr = /^(([a-f0-9]{1,4}:){7}|::([a-f0-9]{1,4}:){0,6}|([a-f0-9]{1,4}:){1}:([a-f0-9]{1,4}:){0,5}|([a-f0-9]{1,4}:){2}:([a-f0-9]{1,4}:){0,4}|([a-f0-9]{1,4}:){3}:([a-f0-9]{1,4}:){0,3}|([a-f0-9]{1,4}:){4}:([a-f0-9]{1,4}:){0,2}|([a-f0-9]{1,4}:){5}:([a-f0-9]{1,4}:){0,1})([a-f0-9]{1,4}|(((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2}))\.){3}((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2})))$/, Lr = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/, Ut = "((\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-((0[13578]|1[02])-(0[1-9]|[12]\\d|3[01])|(0[469]|11)-(0[1-9]|[12]\\d|30)|(02)-(0[1-9]|1\\d|2[0-8])))", Ur = new RegExp(`^${Ut}$`);
+function $t(r) {
   let e = "([01]\\d|2[0-3]):[0-5]\\d:[0-5]\\d";
   return r.precision ? e = `${e}\\.\\d{${r.precision}}` : r.precision == null && (e = `${e}(\\.\\d+)?`), e;
 }
 function $r(r) {
-  return new RegExp(`^${Ut(r)}$`);
+  return new RegExp(`^${$t(r)}$`);
 }
-function $t(r) {
-  let e = `${Lt}T${Ut(r)}`;
+function Vt(r) {
+  let e = `${Ut}T${$t(r)}`;
   const t = [];
   return t.push(r.local ? "Z?" : "Z"), r.offset && t.push("([+-]\\d{2}:?\\d{2})"), e = `${e}(${t.join("|")})`, new RegExp(`^${e}$`);
 }
@@ -648,7 +648,7 @@ class z extends _ {
           message: a.message
         }), n.dirty());
       else if (a.kind === "emoji")
-        ut || (ut = new RegExp(jr, "u")), ut.test(e.data) || (s = this._getOrReturnCtx(e, s), l(s, {
+        lt || (lt = new RegExp(jr, "u")), lt.test(e.data) || (s = this._getOrReturnCtx(e, s), l(s, {
           validation: "emoji",
           code: d.invalid_string,
           message: a.message
@@ -709,7 +709,7 @@ class z extends _ {
         code: d.invalid_string,
         validation: { endsWith: a.value },
         message: a.message
-      }), n.dirty()) : a.kind === "datetime" ? $t(a).test(e.data) || (s = this._getOrReturnCtx(e, s), l(s, {
+      }), n.dirty()) : a.kind === "datetime" ? Vt(a).test(e.data) || (s = this._getOrReturnCtx(e, s), l(s, {
         code: d.invalid_string,
         validation: "datetime",
         message: a.message
@@ -1809,7 +1809,7 @@ class E extends _ {
     });
   }
   keyof() {
-    return Vt(x.objectKeys(this.shape));
+    return zt(x.objectKeys(this.shape));
   }
 }
 E.create = (r, e) => new E({
@@ -1906,8 +1906,8 @@ Ze.create = (r, e) => new Ze({
   typeName: y.ZodUnion,
   ...g(e)
 });
-const re = (r) => r instanceof De ? re(r.schema) : r instanceof B ? re(r.innerType()) : r instanceof Le ? [r.value] : r instanceof ue ? r.options : r instanceof Ue ? x.objectValues(r.enum) : r instanceof $e ? re(r._def.innerType) : r instanceof Ae ? [void 0] : r instanceof Pe ? [null] : r instanceof K ? [void 0, ...re(r.unwrap())] : r instanceof le ? [null, ...re(r.unwrap())] : r instanceof yt || r instanceof ze ? re(r.unwrap()) : r instanceof Ve ? re(r._def.innerType) : [];
-class tt extends _ {
+const re = (r) => r instanceof De ? re(r.schema) : r instanceof B ? re(r.innerType()) : r instanceof Le ? [r.value] : r instanceof ue ? r.options : r instanceof Ue ? x.objectValues(r.enum) : r instanceof $e ? re(r._def.innerType) : r instanceof Ae ? [void 0] : r instanceof Pe ? [null] : r instanceof K ? [void 0, ...re(r.unwrap())] : r instanceof le ? [null, ...re(r.unwrap())] : r instanceof vt || r instanceof ze ? re(r.unwrap()) : r instanceof Ve ? re(r._def.innerType) : [];
+class rt extends _ {
   _parse(e) {
     const { ctx: t } = this._processInputParams(e);
     if (t.parsedType !== h.object)
@@ -1960,7 +1960,7 @@ class tt extends _ {
         s.set(o, a);
       }
     }
-    return new tt({
+    return new rt({
       typeName: y.ZodDiscriminatedUnion,
       discriminator: e,
       options: t,
@@ -1969,14 +1969,14 @@ class tt extends _ {
     });
   }
 }
-function pt(r, e) {
+function mt(r, e) {
   const t = ie(r), n = ie(e);
   if (r === e)
     return { valid: !0, data: r };
   if (t === h.object && n === h.object) {
     const s = x.objectKeys(e), a = x.objectKeys(r).filter((o) => s.indexOf(o) !== -1), i = { ...r, ...e };
     for (const o of a) {
-      const u = pt(r[o], e[o]);
+      const u = mt(r[o], e[o]);
       if (!u.valid)
         return { valid: !1 };
       i[o] = u.data;
@@ -1987,7 +1987,7 @@ function pt(r, e) {
       return { valid: !1 };
     const s = [];
     for (let a = 0; a < r.length; a++) {
-      const i = r[a], o = e[a], u = pt(i, o);
+      const i = r[a], o = e[a], u = mt(i, o);
       if (!u.valid)
         return { valid: !1 };
       s.push(u.data);
@@ -1998,10 +1998,10 @@ function pt(r, e) {
 class je extends _ {
   _parse(e) {
     const { status: t, ctx: n } = this._processInputParams(e), s = (a, i) => {
-      if (ft(a) || ft(i))
+      if (ht(a) || ht(i))
         return v;
-      const o = pt(a.value, i.value);
-      return o.valid ? ((ht(a) || ht(i)) && t.dirty(), { status: t.value, value: o.data }) : (l(n, {
+      const o = mt(a.value, i.value);
+      return o.valid ? ((pt(a) || pt(i)) && t.dirty(), { status: t.value, value: o.data }) : (l(n, {
         code: d.invalid_intersection_types
       }), v);
     };
@@ -2372,7 +2372,7 @@ Le.create = (r, e) => new Le({
   typeName: y.ZodLiteral,
   ...g(e)
 });
-function Vt(r, e) {
+function zt(r, e) {
   return new ue({
     values: r,
     typeName: y.ZodEnum,
@@ -2381,7 +2381,7 @@ function Vt(r, e) {
 }
 class ue extends _ {
   constructor() {
-    super(...arguments), Se.set(this, void 0);
+    super(...arguments), Ce.set(this, void 0);
   }
   _parse(e) {
     if (typeof e.data != "string") {
@@ -2392,7 +2392,7 @@ class ue extends _ {
         code: d.invalid_type
       }), v;
     }
-    if (Je(this, Se) || Dt(this, Se, new Set(this._def.values)), !Je(this, Se).has(e.data)) {
+    if (Je(this, Ce) || Lt(this, Ce, new Set(this._def.values)), !Je(this, Ce).has(e.data)) {
       const t = this._getOrReturnCtx(e), n = this._def.values;
       return l(t, {
         received: t.data,
@@ -2436,11 +2436,11 @@ class ue extends _ {
     });
   }
 }
-Se = /* @__PURE__ */ new WeakMap();
-ue.create = Vt;
+Ce = /* @__PURE__ */ new WeakMap();
+ue.create = zt;
 class Ue extends _ {
   constructor() {
-    super(...arguments), Ce.set(this, void 0);
+    super(...arguments), Se.set(this, void 0);
   }
   _parse(e) {
     const t = x.getValidEnumValues(this._def.values), n = this._getOrReturnCtx(e);
@@ -2452,7 +2452,7 @@ class Ue extends _ {
         code: d.invalid_type
       }), v;
     }
-    if (Je(this, Ce) || Dt(this, Ce, new Set(x.getValidEnumValues(this._def.values))), !Je(this, Ce).has(e.data)) {
+    if (Je(this, Se) || Lt(this, Se, new Set(x.getValidEnumValues(this._def.values))), !Je(this, Se).has(e.data)) {
       const s = x.objectValues(t);
       return l(n, {
         received: n.data,
@@ -2466,7 +2466,7 @@ class Ue extends _ {
     return this._def.values;
   }
 }
-Ce = /* @__PURE__ */ new WeakMap();
+Se = /* @__PURE__ */ new WeakMap();
 Ue.create = (r, e) => new Ue({
   values: r,
   typeName: y.ZodNativeEnum,
@@ -2692,7 +2692,7 @@ et.create = (r) => new et({
   ...g(r)
 });
 const Fr = Symbol("zod_brand");
-class yt extends _ {
+class vt extends _ {
   _parse(e) {
     const { ctx: t } = this._processInputParams(e), n = t.data;
     return this._def.type._parse({
@@ -2759,7 +2759,7 @@ ze.create = (r, e) => new ze({
   typeName: y.ZodReadonly,
   ...g(e)
 });
-function zt(r, e = {}, t) {
+function Ft(r, e = {}, t) {
   return r ? xe.create().superRefine((n, s) => {
     var a, i;
     if (!r(n)) {
@@ -2777,7 +2777,7 @@ var y;
 })(y || (y = {}));
 const Wr = (r, e = {
   message: `Input not instance of ${r.name}`
-}) => zt((t) => t instanceof r, e), Ft = z.create, Bt = ce.create, qr = et.create, Hr = de.create, Wt = Ne.create, Kr = he.create, Yr = Ge.create, Jr = Ae.create, Gr = Pe.create, Xr = xe.create, Qr = fe.create, en = ne.create, tn = Xe.create, rn = F.create, nn = E.create, sn = E.strictCreate, an = Ze.create, on = tt.create, cn = je.create, dn = J.create, un = Me.create, ln = Qe.create, fn = pe.create, hn = ge.create, pn = De.create, mn = Le.create, yn = ue.create, vn = Ue.create, gn = be.create, Rt = B.create, _n = K.create, xn = le.create, bn = B.createWithPreprocess, kn = Fe.create, wn = () => Ft().optional(), En = () => Bt().optional(), Tn = () => Wt().optional(), Sn = {
+}) => Ft((t) => t instanceof r, e), Bt = z.create, Wt = ce.create, qr = et.create, Hr = de.create, qt = Ne.create, Kr = he.create, Yr = Ge.create, Jr = Ae.create, Gr = Pe.create, Xr = xe.create, Qr = fe.create, en = ne.create, tn = Xe.create, rn = F.create, nn = E.create, sn = E.strictCreate, an = Ze.create, on = rt.create, cn = je.create, dn = J.create, un = Me.create, ln = Qe.create, fn = pe.create, hn = ge.create, pn = De.create, mn = Le.create, yn = ue.create, vn = Ue.create, gn = be.create, It = B.create, _n = K.create, xn = le.create, bn = B.createWithPreprocess, kn = Fe.create, wn = () => Bt().optional(), En = () => Wt().optional(), Tn = () => qt().optional(), Cn = {
   string: (r) => z.create({ ...r, coerce: !0 }),
   number: (r) => ce.create({ ...r, coerce: !0 }),
   boolean: (r) => Ne.create({
@@ -2786,33 +2786,33 @@ const Wr = (r, e = {
   }),
   bigint: (r) => de.create({ ...r, coerce: !0 }),
   date: (r) => he.create({ ...r, coerce: !0 })
-}, Cn = v;
+}, Sn = v;
 var f = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   defaultErrorMap: _e,
-  setErrorMap: Sr,
+  setErrorMap: Cr,
   getErrorMap: Ke,
   makeIssue: Ye,
-  EMPTY_PATH: Cr,
+  EMPTY_PATH: Sr,
   addIssueToContext: l,
   ParseStatus: N,
   INVALID: v,
   DIRTY: ve,
   OK: P,
-  isAborted: ft,
-  isDirty: ht,
+  isAborted: ht,
+  isDirty: pt,
   isValid: Re,
   isAsync: Ie,
   get util() {
     return x;
   },
   get objectUtil() {
-    return lt;
+    return ft;
   },
   ZodParsedType: h,
   getParsedType: ie,
   ZodType: _,
-  datetimeRegex: $t,
+  datetimeRegex: Vt,
   ZodString: z,
   ZodNumber: ce,
   ZodBigInt: de,
@@ -2828,7 +2828,7 @@ var f = /* @__PURE__ */ Object.freeze({
   ZodArray: F,
   ZodObject: E,
   ZodUnion: Ze,
-  ZodDiscriminatedUnion: tt,
+  ZodDiscriminatedUnion: rt,
   ZodIntersection: je,
   ZodTuple: J,
   ZodRecord: Me,
@@ -2848,24 +2848,24 @@ var f = /* @__PURE__ */ Object.freeze({
   ZodCatch: Ve,
   ZodNaN: et,
   BRAND: Fr,
-  ZodBranded: yt,
+  ZodBranded: vt,
   ZodPipeline: Fe,
   ZodReadonly: ze,
-  custom: zt,
+  custom: Ft,
   Schema: _,
   ZodSchema: _,
   late: Br,
   get ZodFirstPartyTypeKind() {
     return y;
   },
-  coerce: Sn,
+  coerce: Cn,
   any: Xr,
   array: rn,
   bigint: Hr,
-  boolean: Wt,
+  boolean: qt,
   date: Kr,
   discriminatedUnion: on,
-  effect: Rt,
+  effect: It,
   enum: yn,
   function: hn,
   instanceof: Wr,
@@ -2878,7 +2878,7 @@ var f = /* @__PURE__ */ Object.freeze({
   never: en,
   null: Gr,
   nullable: xn,
-  number: Bt,
+  number: Wt,
   object: nn,
   oboolean: Tn,
   onumber: En,
@@ -2890,27 +2890,27 @@ var f = /* @__PURE__ */ Object.freeze({
   record: un,
   set: fn,
   strictObject: sn,
-  string: Ft,
+  string: Bt,
   symbol: Yr,
-  transformer: Rt,
+  transformer: It,
   tuple: dn,
   undefined: Jr,
   union: an,
   unknown: Qr,
   void: tn,
-  NEVER: Cn,
+  NEVER: Sn,
   ZodIssueCode: d,
   quotelessJson: Tr,
   ZodError: M
 });
-const U = f.string().trim().min(1, { message: "Cannot be blank" }), j = f.string().trim().optional(), It = (r) => f.nullable(r.optional());
-var qt = /* @__PURE__ */ ((r) => (r.FIRST_NAME = "firstName", r.LAST_NAME = "lastName", r.EMAIL = "email", r.ZIP_CODE = "zipCode", r.CITY = "city", r.STATE = "state", r.COUNTRY = "country", r.ADDRESS = "address", r.PHONE = "phone", r.PROMOTION_CODE = "promotionCode", r))(qt || {});
-const Ht = f.nativeEnum(qt);
+const U = f.string().trim().min(1, { message: "Cannot be blank" }), j = f.string().trim().optional(), Nt = (r) => f.nullable(r.optional());
+var tt = /* @__PURE__ */ ((r) => (r.FIRST_NAME = "firstName", r.LAST_NAME = "lastName", r.EMAIL = "email", r.ZIP_CODE = "zipCode", r.CITY = "city", r.STATE = "state", r.COUNTRY = "country", r.ADDRESS = "address", r.PHONE = "phone", r.PROMOTION_CODE = "promotionCode", r))(tt || {});
+const Ht = f.nativeEnum(tt);
 var Kt = /* @__PURE__ */ ((r) => (r.CARD_NUMBER = "cardNumber", r.CARD_EXPIRY = "cardExpiry", r.CARD_CVC = "cardCvc", r))(Kt || {});
 const Yt = f.nativeEnum(Kt), On = f.union([Ht, Yt]), Jt = f.object({
   provider: f.string(),
-  processor_name: It(f.string()),
-  metadata: It(f.record(f.string(), f.any()))
+  processor_name: Nt(f.string()),
+  metadata: Nt(f.record(f.string(), f.any()))
 });
 f.object({
   cardNumber: j,
@@ -3030,7 +3030,9 @@ const Wn = (r) => {
     checkoutPaymentMethod: s,
     paymentFlowMetadata: i,
     doNotUseLegacyCCFlow: a
-  }), u = Gt.safeParse(o);
+  });
+  (s.provider === "apple_pay" || s.provider === "google_pay") && (o[tt.ZIP_CODE] || (o[tt.ZIP_CODE] = "00000"));
+  const u = Gt.safeParse(o);
   if (u.success)
     return u.data;
   {
@@ -3048,22 +3050,22 @@ const Wn = (r) => {
 }, Ee = (r, e, t, n, s) => {
   const a = {
     payload: n,
-    nonce: jt(),
+    nonce: Mt(),
     formId: e,
     elementId: t
   };
   r.postMessage(JSON.stringify(a), s);
-}, Hn = "https://cde.getopenpay.com", Kn = {
+}, Hn = "https://cde.openpaystaging.com", Kn = {
   usd: "usd",
   brl: "brl"
-}, vt = (r) => {
+}, gt = async (r) => {
   for (let t = 0; t < 10; t++)
-    Nt() || Jn(200);
-  if (!Nt())
+    At() || await Jn(500);
+  if (!At())
     throw new Error("Stripe JS not found.");
   return new Stripe(r);
 }, Yn = async (r, e, t) => {
-  const n = vt(r), s = Kn[t];
+  const n = await gt(r), s = Kn[t];
   return n.paymentRequest({
     // TODO: replace this with stripe account country as soon as we support it
     country: "US",
@@ -3077,7 +3079,7 @@ const Wn = (r) => {
   });
 }, Jn = (r) => new Promise((e) => {
   setTimeout(e, r);
-}), Nt = () => "Stripe" in window, Gn = async (r) => new Promise((e, t) => {
+}), At = () => "Stripe" in window, Gn = async (r) => new Promise((e, t) => {
   try {
     r.on("paymentmethod", async (n) => {
       e(n);
@@ -3100,7 +3102,7 @@ const Wn = (r) => {
     throw new Error(`Invalid next action metadata format: ${JSON.stringify(t)}`);
   if (e.paymentMethod.id !== r.paymentFlowMetadata.stripePmId)
     throw new Error(`PM ID mismatch: ${e.paymentMethod.id} != ${r.paymentFlowMetadata.stripePmId}`);
-  const s = await vt(t.stripe_pk).confirmCardSetup(t.client_secret, {
+  const s = await (await gt(t.stripe_pk)).confirmCardSetup(t.client_secret, {
     payment_method: r.paymentFlowMetadata.stripePmId
   });
   if (s.error)
@@ -3108,7 +3110,7 @@ const Wn = (r) => {
   e.complete("success");
 }, es = async (r) => {
   var a, i, o, u;
-  const e = r.nextActionMetadata, n = await vt(e.stripe_pk).confirmCardSetup(e.client_secret, {
+  const e = r.nextActionMetadata, n = await (await gt(e.stripe_pk)).confirmCardSetup(e.client_secret, {
     payment_method: e.stripe_pm_id
   }), s = (a = n.setupIntent) == null ? void 0 : a.status;
   if (s !== "succeeded") throw s === "canceled" ? new Error("Payment cancelled, please click Submit again to pay") : new Error(
@@ -3145,7 +3147,7 @@ const Wn = (r) => {
 function rs(r) {
   return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
 }
-var gt = { exports: {} }, ns = vr;
+var _t = { exports: {} }, ns = vr;
 function Qt(r, e, t) {
   var n = typeof e == "function";
   ns.useEffect(function() {
@@ -3159,9 +3161,9 @@ function Qt(r, e, t) {
     };
   }, n ? t : e);
 }
-gt.exports = Qt;
-gt.exports.useAsyncEffect = Qt;
-var ss = gt.exports;
+_t.exports = Qt;
+_t.exports.useAsyncEffect = Qt;
+var ss = _t.exports;
 const as = /* @__PURE__ */ rs(ss), is = f.object({
   type: f.string(),
   loc: f.array(f.string()),
@@ -3173,7 +3175,7 @@ const as = /* @__PURE__ */ rs(ss), is = f.object({
   path: f.array(f.string())
 }), ds = f.array(cs), us = {
   "failed to fetch": "Connection error: please double check if you are connected to the internet, then try again"
-}, mt = (r) => {
+}, yt = (r) => {
   const e = r.toLowerCase().trim();
   return us[e] ?? r;
 }, ls = (r) => {
@@ -3182,8 +3184,8 @@ const as = /* @__PURE__ */ rs(ss), is = f.object({
   } catch {
     return !1;
   }
-}, fs = (r) => r.length === 1 ? mt(r[0].msg) : `Please fix the following errors:
-${r.map((t) => `• ${mt(t.msg)}`).join(`
+}, fs = (r) => r.length === 1 ? yt(r[0].msg) : `Please fix the following errors:
+${r.map((t) => `• ${yt(t.msg)}`).join(`
 `)}`, hs = (r) => `Encountered the following errors:
 ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
 `)}`, er = (r) => {
@@ -3192,7 +3194,7 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
       const e = JSON.parse(r.message);
       return os.safeParse(e).success ? fs(e) : ds.safeParse(e).success ? hs(e) : r.message;
     } else
-      return mt(r.message);
+      return yt(r.message);
   if (typeof r == "object")
     try {
       return JSON.stringify(r);
@@ -3204,7 +3206,7 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
 }, ps = f.enum(["apple_pay", "google_pay"]), ms = {
   apple_pay: "applePay",
   google_pay: "googlePay"
-}, At = {
+}, Pt = {
   isLoading: !0,
   isAvailable: !1,
   startFlow: () => {
@@ -3216,8 +3218,8 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
   }
 }, vs = (r, e, t, n, s, a, i) => {
   const [o, u] = ts({
-    apple_pay: At,
-    google_pay: At
+    apple_pay: Pt,
+    google_pay: Pt
   }), c = r === void 0 || e === void 0 || t === void 0 || !n;
   return as(async () => {
     if (!c)
@@ -3230,7 +3232,7 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
           const G = Xn(T.metadata), A = await Yn(G, r, e), W = await A.canMakePayment();
           if (!W)
             throw new Error(`Cannot make payment with ${b} for this session`);
-          const nt = async () => {
+          const st = async () => {
             try {
               if (Xt(n, {}), a && !qe(
                 k.enum.START_PAYMENT_FLOW,
@@ -3252,7 +3254,7 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
           u.set(p, {
             isLoading: !1,
             isAvailable: W[ms[p]],
-            startFlow: nt
+            startFlow: st
           });
         } catch {
           u.set(p, ys);
@@ -3274,63 +3276,63 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
     onCheckoutSuccess: b,
     onCheckoutError: T,
     baseUrl: G
-  } = r, A = G ?? Hn, [W, nt] = I(void 0), [X, _t] = I([]), [tr, rr] = I("1px"), [xt, nr] = I(!1), [Q, ke] = I(void 0), [bt, we] = I(!1), [me, sr] = I([]), [se, ar] = I({}), [kt, wt] = I(0), [Et, ae] = I(!1), [q, ir] = I(void 0), [st, or] = I(void 0), [Be, cr] = I(void 0), [ee, dr] = I(void 0), [at, ur] = I(void 0), te = Oe(() => `opjs-form-${jt()}`, []), H = Pt(null), it = Te(
+  } = r, A = G ?? Hn, [W, st] = I(void 0), [X, xt] = I([]), [tr, rr] = I("1px"), [bt, nr] = I(!1), [Q, ke] = I(void 0), [kt, we] = I(!1), [me, sr] = I([]), [se, ar] = I({}), [wt, Et] = I(0), [Tt, ae] = I(!1), [q, ir] = I(void 0), [at, or] = I(void 0), [Be, cr] = I(void 0), [ee, dr] = I(void 0), [it, ur] = I(void 0), te = Oe(() => `opjs-form-${Mt()}`, []), H = Zt(null), ot = Te(
     (O) => {
       if (O.origin !== A || !O.source) return;
-      const D = O.source, S = qn(JSON.parse(O.data)), $ = S.elementId;
-      if (S.formId !== te || !$ || S.nonce in X)
+      const D = O.source, C = qn(JSON.parse(O.data)), $ = C.elementId;
+      if (C.formId !== te || !$ || C.nonce in X)
         return;
-      _t((Z) => [...Z, S.nonce]);
-      const w = S.payload, L = w.type;
+      xt((Z) => [...Z, C.nonce]);
+      const w = C.payload, L = w.type;
       if (L === k.enum.FOCUS && s)
-        s(S.elementId);
+        s(C.elementId);
       else if (L === k.enum.BLUR && a)
-        a(S.elementId);
+        a(C.elementId);
       else if (L === k.enum.CHANGE && i)
-        i(S.elementId);
+        i(C.elementId);
       else if (L === k.enum.LOADED) {
         const Z = me.find((V) => V.contentWindow === D);
         if (we(!1), !Z)
           return;
         ar((V) => ({ ...V, [$]: D }));
-        const C = w.height ? `${w.height}px` : "100%";
-        rr(C), cr(w.totalAmountAtoms), or(w.currency), dr(w.checkoutPaymentMethods), q || ir(w.sessionId);
+        const S = w.height ? `${w.height}px` : "100%";
+        rr(S), cr(w.totalAmountAtoms), or(w.currency), dr(w.checkoutPaymentMethods), q || ir(w.sessionId);
       } else if (L === k.enum.TOKENIZE_STARTED)
         we(!0), p && p();
       else if (L === k.enum.PAYMENT_FLOW_STARTED) {
         if (!Q)
           throw new Error("extraData not populated");
         (async () => {
-          const C = w.nextActionMetadata.type;
-          if (C !== void 0) if (C === "stripe_3ds")
+          const S = w.nextActionMetadata.type;
+          if (S !== void 0) if (S === "stripe_3ds")
             await es(w);
-          else if (C === "stripe_payment_request") {
-            if (!at)
+          else if (S === "stripe_payment_request") {
+            if (!it)
               throw new Error("Stripe PM not set");
-            await Qn(w, at);
+            await Qn(w, it);
           } else
-            throw new Error(`Unknown next action type: ${C}`);
+            throw new Error(`Unknown next action type: ${S}`);
         })().then(() => {
           var V;
-          let C;
-          if (Q.checkoutPaymentMethod.provider === "credit_card" && (C = (V = w.startPFMetadata) == null ? void 0 : V.cc_pm_id, !C))
+          let S;
+          if (Q.checkoutPaymentMethod.provider === "credit_card" && (S = (V = w.startPFMetadata) == null ? void 0 : V.cc_pm_id, !S))
             throw new Error("CC PM ID not found");
           Ee(
             D,
             te,
             $,
-            { ...Q, type: "CHECKOUT", doNotUseLegacyCCFlow: !0, existingCCPMId: C },
+            { ...Q, type: "CHECKOUT", doNotUseLegacyCCFlow: !0, existingCCPMId: S },
             A
           ), ae(!0), ke(void 0), p && p();
-        }).catch((C) => {
-          const V = er(C);
+        }).catch((S) => {
+          const V = er(S);
           we(!1), ae(!1), T && T(V);
         });
       } else if (L === k.enum.TOKENIZE_SUCCESS && Q) {
-        const Z = kt + 1, C = Z === Object.keys(se).length;
-        !Et && (C || w.isReadyForCheckout) ? (Ee(D, te, $, Q, A), ae(!0), ke(void 0)) : wt(Z);
+        const Z = wt + 1, S = Z === Object.keys(se).length;
+        !Tt && (S || w.isReadyForCheckout) ? (Ee(D, te, $, Q, A), ae(!0), ke(void 0)) : Et(Z);
       } else if (L === k.enum.CHECKOUT_SUCCESS)
-        we(!1), wt(0), ae(!1), b && b(w.invoiceUrls, w.subscriptionIds, w.customerId);
+        we(!1), Et(0), ae(!1), b && b(w.invoiceUrls, w.subscriptionIds, w.customerId);
       else if (L === k.enum.LOAD_ERROR)
         u && u(w.message);
       else if (L === k.enum.VALIDATION_ERROR) {
@@ -3338,11 +3340,11 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
         (Z === "credit_card" || Z === void 0) && c && c(w.elementType, w.errors, $);
       } else if (L === k.enum.TOKENIZE_ERROR || L === k.enum.CHECKOUT_ERROR)
         if (w.message === "3DS_REQUIRED") {
-          const Z = ee == null ? void 0 : ee.find((C) => C.provider === "credit_card");
+          const Z = ee == null ? void 0 : ee.find((S) => S.provider === "credit_card");
           if (!q || !H.current || !c || !Z) return;
-          for (const [C, V] of Object.entries(se)) {
+          for (const [S, V] of Object.entries(se)) {
             if (!V) continue;
-            const ct = qe(
+            const dt = qe(
               k.enum.START_PAYMENT_FLOW,
               q,
               H.current,
@@ -3352,8 +3354,8 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
               { ...Z, processor_name: "stripe" },
               !1
             );
-            if (ct) {
-              ae(!0), ke(ct), Ee(V, te, C, ct, A);
+            if (dt) {
+              ae(!0), ke(dt), Ee(V, te, S, dt, A);
               break;
             }
           }
@@ -3367,8 +3369,8 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
       Q,
       me,
       se,
-      kt,
-      Et,
+      wt,
+      Tt,
       a,
       i,
       s,
@@ -3378,12 +3380,12 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
       T,
       c,
       A,
-      at,
+      it,
       ee
     ]
   ), lr = Te(() => {
     if (!H.current || !c || !q || !ee) return;
-    const O = ee.find((S) => S.provider === "credit_card");
+    const O = ee.find((C) => C.provider === "credit_card");
     if (!O)
       throw new Error("Card not available as a payment method in checkout");
     const D = qe(
@@ -3395,29 +3397,29 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
       !1
     );
     if (D) {
-      for (const [S, $] of Object.entries(se))
-        $ && Ee($, te, S, D, A);
+      for (const [C, $] of Object.entries(se))
+        $ && Ee($, te, C, D, A);
       D.type = k.enum.CHECKOUT, ke(D);
     }
-  }, [H, se, te, c, q, A, ee]), ot = Te(
+  }, [H, se, te, c, q, A, ee]), ct = Te(
     (O) => {
-      bt && O.preventDefault();
+      kt && O.preventDefault();
     },
-    [bt]
+    [kt]
   );
   He(() => {
-    xt || !H.current || !Be || me.length === Object.keys(se).length && (nr(!0), o && o(Be, st));
-  }, [me, se, xt, o, Be, st]), He(() => (nt(window.location.origin), window.addEventListener("message", it), window.addEventListener("beforeunload", ot), () => {
-    window.removeEventListener("beforeunload", ot), window.removeEventListener("message", it);
-  }), [q, it, ot]);
+    bt || !H.current || !Be || me.length === Object.keys(se).length && (nr(!0), o && o(Be, at));
+  }, [me, se, bt, o, Be, at]), He(() => (st(window.location.origin), window.addEventListener("message", ot), window.addEventListener("beforeunload", ct), () => {
+    window.removeEventListener("beforeunload", ct), window.removeEventListener("message", ot);
+  }), [q, ot, ct]);
   const fr = Te(
     (O) => {
-      me.find((S) => S.contentWindow === O.contentWindow) || sr((S) => [...S, O]);
+      me.find((C) => C.contentWindow === O.contentWindow) || sr((C) => [...C, O]);
     },
     [me]
   ), hr = async (O, D) => {
     if (!(!H.current || !c || !q || !ee))
-      for (const [S, $] of Object.entries(se)) {
+      for (const [C, $] of Object.entries(se)) {
         if (!$) continue;
         const St = {
           stripePmId: O.paymentMethod.id
@@ -3431,7 +3433,7 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
           St
         );
         if (w) {
-          ur(O), ae(!0), ke(w), Ee($, te, S, w, A);
+          ur(O), ae(!0), ke(w), Ee($, te, C, w, A);
           break;
         }
       }
@@ -3444,9 +3446,9 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
     checkoutSecureToken: t,
     registerIframe: fr,
     baseUrl: A
-  }, Tt = vs(
+  }, Ct = vs(
     Be,
-    st,
+    at,
     ee,
     H.current,
     hr,
@@ -3454,12 +3456,12 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
     pr
   ), yr = {
     submit: lr,
-    applePay: Tt.apple_pay,
-    googlePay: Tt.google_pay
+    applePay: Ct.apple_pay,
+    googlePay: Ct.google_pay
   };
-  return /* @__PURE__ */ oe(Zt.Provider, { value: mr, children: /* @__PURE__ */ oe("div", { className: n, ref: H, children: e(yr) }) });
-}, gs = (r) => JSON.stringify(r), rt = (r) => {
-  const { subPath: e, styles: t } = r, { formId: n, referer: s, formHeight: a, checkoutSecureToken: i, registerIframe: o, baseUrl: u } = xr(), [c, p] = I(!1), b = Pt(null), T = Oe(() => t ? gs(t) : "", [t]), G = Oe(() => ({
+  return /* @__PURE__ */ oe(jt.Provider, { value: mr, children: /* @__PURE__ */ oe("div", { className: n, ref: H, children: e(yr) }) });
+}, gs = (r) => JSON.stringify(r), nt = (r) => {
+  const { subPath: e, styles: t } = r, { formId: n, referer: s, formHeight: a, checkoutSecureToken: i, registerIframe: o, baseUrl: u } = xr(), [c, p] = I(!1), b = Zt(null), T = Oe(() => t ? gs(t) : "", [t]), G = Oe(() => ({
     border: "none",
     width: "100%",
     height: a
@@ -3479,13 +3481,13 @@ ${r.map((t) => `- ${t.path.join("/")}: ${t.message}`).join(`
       ref: b
     }
   ) : /* @__PURE__ */ oe("div", {});
-}, ks = ({ styles: r }) => /* @__PURE__ */ oe(rt, { styles: r, subPath: "card-cvc" }), ws = ({ styles: r }) => /* @__PURE__ */ oe(rt, { styles: r, subPath: "card" }), Es = ({ styles: r }) => /* @__PURE__ */ oe(rt, { styles: r, subPath: "card-expiry" }), Ts = ({ styles: r }) => /* @__PURE__ */ oe(rt, { styles: r, subPath: "card-number" });
+}, ks = ({ styles: r }) => /* @__PURE__ */ oe(nt, { styles: r, subPath: "card-cvc" }), ws = ({ styles: r }) => /* @__PURE__ */ oe(nt, { styles: r, subPath: "card" }), Es = ({ styles: r }) => /* @__PURE__ */ oe(nt, { styles: r, subPath: "card-expiry" }), Ts = ({ styles: r }) => /* @__PURE__ */ oe(nt, { styles: r, subPath: "card-number" });
 export {
   ks as CardCvcElement,
   ws as CardElement,
   Es as CardExpiryElement,
   Ts as CardNumberElement,
   bs as ElementsForm,
-  qt as FieldName,
+  tt as FieldName,
   xr as useOpenPayElements
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getopenpay/openpay-js-react",
-  "version": "0.0.11",
+  "version": "0.0.12-alpha.417b378",
   "description": "Accept payments through OpenPay, right on your site",
   "author": "OpenPay <info@getopenpay.com> (https://getopenpay.com)",
   "type": "module",