@odus/checkout 0.6.1 → 0.6.2

package/README.md

@@ -82,6 +82,29 @@ function CheckoutPage() {
 
 > **Important**: Always import the styles using `import '@odus/checkout/styles'` to ensure the checkout UI renders correctly. Without the styles, the checkout component will not display properly.
 
+### TypeScript Support
+
+For TypeScript users, we export type definitions to enhance your development experience with proper type checking and autocompletion:
+
+```typescript
+// Import the main class and TypeScript types
+import { OdusCheckout, CheckoutConfig, CheckoutInstance, Locale } from '@odus/checkout';
+
+// Now you can use these types in your code
+const config: CheckoutConfig = {
+  apiKey: 'your_api_key',
+  profileId: 'your_profile_id',
+  paymentId: 'your_payment_id',
+  checkoutKey: 'your_unique_checkout_key',
+  returnUrl: 'https://your-website.com/payment-complete',
+  environment: 'test',
+  locale: 'en', // Type-safe locale values
+};
+
+// The checkout instance is properly typed
+const checkout: CheckoutInstance = new OdusCheckout(config);
+```
+
 ## Getting Started
 
 ### Basic Implementation
@@ -138,18 +161,18 @@ Make sure you have a container element in your HTML:
 
 When initializing the Odus Checkout, you can configure various options:
 
-| Option                 | Type    | Required | Description                                                                                              |
-| ---------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------- |
-| `apiKey`               | string  | ✅       | Your Odus API key obtained from the dashboard                                                            |
-| `profileId`            | string  | ✅       | Your Odus checkout profile ID                                                                            |
-| `checkoutKey`          | string  | ✅       | Unique checkout key for this payment session                                                             |
-| `paymentId`            | string  | ✅       | The ID of the payment being processed                                                                    |
-| `environment`          | string  | ✅       | API environment to use - either 'test' or 'live'                                                         |
-| `returnUrl`            | string  | ✅       | The URL where the customer will be redirected after 3DS authentication or other redirect flows           |
-| `locale`               | string  |          | Language code for checkout localization (defaults to browser language if supported)                      |
-| `disableErrorMessages` | boolean |          | Set to `true` to disable built-in error messages (defaults to `false`)                                   |
-| `manualActionHandling` | boolean |          | Set to `true` to manually handle 3DS redirects via the `onActionRequired` callback (defaults to `false`) |
-| `callbacks`            | object  |          | Event callback functions (see [Callbacks](#callbacks-and-event-handling))                                |
+| Option                 | Type    | Required | Description                                                                                                                                                                                 |
+| ---------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `apiKey`               | string  | ✅       | Your Odus API key obtained from the dashboard's API Keys page                                                                                                                               |
+| `profileId`            | string  | ✅       | Your Odus checkout profile ID obtained from the dashboard's Checkout Builder page                                                                                                           |
+| `checkoutKey`          | string  | ✅       | Unique checkout key for this payment session                                                                                                                                                |
+| `paymentId`            | string  | ✅       | The ID of the payment being processed                                                                                                                                                       |
+| `environment`          | string  | ✅       | API environment to use - either 'test' or 'live'                                                                                                                                            |
+| `returnUrl`            | string  | ✅       | The URL where the customer will be redirected after 3DS authentication or other redirect flows                                                                                              |
+| `locale`               | Locale  |          | Language code for checkout localization. If not set, automatically defaults to the customer's browser language when supported. If browser language is not supported, falls back to English. |
+| `disableErrorMessages` | boolean |          | Set to `true` to disable built-in error messages (defaults to `false`)                                                                                                                      |
+| `manualActionHandling` | boolean |          | Set to `true` to manually handle 3DS redirects via the `onActionRequired` callback (defaults to `false`)                                                                                    |
+| `callbacks`            | object  |          | Event callback functions (see [Callbacks](#callbacks-and-event-handling))                                                                                                                   |
 
 ## Payment Methods
 
@@ -307,10 +330,23 @@ type CheckoutConfig = {
     onActionRequired?: (redirectUrl: string) => void;
     onLoadingStateChange?: (isLoading: boolean) => void;
   };
-  locale?: 'en' | 'de' | 'es' | 'fr' | 'pl' | 'pt' | 'it' | 'tr' | null;
+  locale?: Locale;
   disableErrorMessages?: boolean;
   manualActionHandling?: boolean;
 };
+
+// Where Locale is a type representing supported languages
+type Locale = 'en' | 'de' | 'es' | 'fr' | 'pl' | 'pt' | 'it' | 'tr';
+```
+
+### CheckoutInstance Type
+
+```typescript
+// This represents the checkout instance returned when you create a new OdusCheckout
+interface CheckoutInstance {
+  mount(containerId: string): this;
+  unmount(): void;
+}
 ```
 
 ## Troubleshooting

package/dist/checkout.d.ts

@@ -13,7 +13,7 @@ export declare type CheckoutConfig = {
     paymentId: string;
     environment: Environment;
     callbacks?: CheckoutCallbacks;
-    locale?: Locale | null;
+    locale?: Locale;
     disableErrorMessages?: boolean;
     manualActionHandling?: boolean;
 };
@@ -155,7 +155,7 @@ export declare const itLocale: {
     }
 };
 
-declare type Locale = 'en' | 'de' | 'es' | 'fr' | 'pl' | 'pt' | 'it' | 'tr';
+export declare type Locale = 'en' | 'de' | 'es' | 'fr' | 'pl' | 'pt' | 'it' | 'tr';
 
 export declare class OdusCheckout {
     private config;

package/dist/checkout.es.js

@@ -199,7 +199,7 @@ class q {
 function k(o) {
   return new q(o);
 }
-function G({
+function _({
   apiKey: o,
   profileId: e,
   environment: t
@@ -312,7 +312,7 @@ const N = {
   "comcast.net": ["comcast.com", "comcat.net", "comcst.net", "comcastnet", "comcast.nt", "comcas.net"],
   "verizon.net": ["verizon.com", "verizon.nt", "verizonnet", "verizn.net", "verizon.ne", "verzon.net"],
   "att.net": ["att.com", "at.net", "att.nt", "attnet", "att.ne", "attt.net"]
-}, _ = (o) => {
+}, G = (o) => {
   if (!o || o.includes("."))
     return null;
   const e = ["com", "net", "org", "edu", "gov", "io", "co"];
@@ -373,7 +373,7 @@ const N = {
         };
       const r = t.substring(0, a), s = t.substring(a + 1);
       if (!s.includes(".")) {
-        const l = _(s);
+        const l = G(s);
         if (l)
           return {
             isValid: !1,
@@ -677,7 +677,7 @@ const te = "E-Mail", ie = "Name des/der Karteninhaber/in", ae = "Kartendaten", r
   loading: ge,
   buttonTexts: fe,
   validation: ye
-}, Ee = "Correo electrónico", Ce = "Nombre del titular de la tarjeta", be = "Información de la tarjeta", xe = "Nombre completo en la tarjeta", Se = "MM / AA", Fe = "Por favor, no cierre esta ventana", we = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTENER MI PLAN", donate: "DONAR", book: "RESERVAR AHORA", order: "ORDENAR AHORA" }, Me = { emailSuggestion: "¿Quisiste decir {{email}}?", emailInvalid: "Su correo electrónico no es válido", cardExpiryInvalid: "La fecha de vencimiento de la tarjeta ya pasó", cardExpiryFormat: "La fecha de vencimiento de su tarjeta está incompleta", cardSecurityFormat: "El código de seguridad de su tarjeta está incompleto", nameRequired: "Por favor, ingrese el nombre tal como aparece en su tarjeta", cardNumberInvalid: "Su número de tarjeta no es válido" }, Le = {
+}, Ee = "Correo electrónico", Ce = "Nombre del titular de la tarjeta", be = "Información de la tarjeta", xe = "Nombre completo en la tarjeta", Se = "MM / AA", Fe = "Por favor, no cierre esta ventana", we = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTENER MI PLAN", donate: "DONAR", book: "RESERVAR AHORA", order: "ORDENAR AHORA" }, Le = { emailSuggestion: "¿Quisiste decir {{email}}?", emailInvalid: "Su correo electrónico no es válido", cardExpiryInvalid: "La fecha de vencimiento de la tarjeta ya pasó", cardExpiryFormat: "La fecha de vencimiento de su tarjeta está incompleta", cardSecurityFormat: "El código de seguridad de su tarjeta está incompleto", nameRequired: "Por favor, ingrese el nombre tal como aparece en su tarjeta", cardNumberInvalid: "Su número de tarjeta no es válido" }, Me = {
   email: Ee,
   cardholderNameLabel: Ce,
   cardInformation: be,
@@ -685,8 +685,8 @@ const te = "E-Mail", ie = "Name des/der Karteninhaber/in", ae = "Kartendaten", r
   cardExpiry: Se,
   loading: Fe,
   buttonTexts: we,
-  validation: Me
-}, ke = "E-mail", Te = "Nom du titulaire de la carte", Ie = "Informations de la carte", ze = "Nom complet figurant sur la carte", Pe = "MM / AA", Ne = "Veuillez ne pas fermer cette fenêtre", Ae = { pay: "PAYER", submit: "ENVOYER", getPlan: "OBTENIR MON PLAN", donate: "FAIRE UN DON", book: "RÉSERVER MAINTENANT", order: "COMMANDER MAINTENANT" }, Ve = { 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" }, De = {
+  validation: Le
+}, ke = "E-mail", Te = "Nom du titulaire de la carte", Ie = "Informations de la carte", ze = "Nom complet figurant sur la carte", Pe = "MM / AA", Ne = "Veuillez ne pas fermer cette fenêtre", Ae = { pay: "PAYER", submit: "ENVOYER", getPlan: "OBTENIR MON PLAN", donate: "FAIRE UN DON", book: "RÉSERVER MAINTENANT", order: "COMMANDER MAINTENANT" }, De = { 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" }, Ve = {
   email: ke,
   cardholderNameLabel: Te,
   cardInformation: Ie,
@@ -694,7 +694,7 @@ const te = "E-Mail", ie = "Name des/der Karteninhaber/in", ae = "Kartendaten", r
   cardExpiry: Pe,
   loading: Ne,
   buttonTexts: Ae,
-  validation: Ve
+  validation: De
 }, $e = "Email", Re = "Nome del titolare della carta", Be = "Informazioni sulla carta", Oe = "Nome completo sulla carta", He = "MM / AA", Ke = "Non chiudere la finestra", je = { pay: "PAGA", submit: "INVIA", getPlan: "OTTIENI IL MIO PIANO", donate: "DONARE", book: "PRENOTA ORA", order: "ORDINA ORA" }, Ue = { 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" }, qe = {
   email: $e,
   cardholderNameLabel: Re,
@@ -704,9 +704,9 @@ const te = "E-Mail", ie = "Name des/der Karteninhaber/in", ae = "Kartendaten", r
   loading: Ke,
   buttonTexts: je,
   validation: Ue
-}, Ge = "Adres e-mail", _e = "Imię i nazwisko posiadacza karty", Ye = "Informacje o karcie", Ze = "Imię i nazwisko na karcie", Je = "MM / RR", We = "Proszę nie zamykać tego okna", Xe = { pay: "ZAPŁAĆ", submit: "WYŚLIJ", getPlan: "POBIERZ MÓJ PLAN", donate: "PRZEKAŻ DAROWIZNĘ", book: "ZAREZERWUJ TERAZ", order: "ZAMÓW TERAZ" }, Qe = { emailSuggestion: "Czy chodziło Ci o {{email}}?", emailInvalid: "Państwa adres e-mail jest nieprawidłowy", cardExpiryInvalid: "Data ważności Państwa karty jest w przeszłości", cardExpiryFormat: "Data ważności Państwa karty jest niekompletna", cardSecurityFormat: "Kod zabezpieczający Państwa karty jest niekompletny", nameRequired: "Proszę wpisać imię i nazwisko tak, jak widnieje na karcie", cardNumberInvalid: "Numer Państwa karty jest nieprawidłowy" }, et = {
-  email: Ge,
-  cardholderNameLabel: _e,
+}, _e = "Adres e-mail", Ge = "Imię i nazwisko posiadacza karty", Ye = "Informacje o karcie", Ze = "Imię i nazwisko na karcie", Je = "MM / RR", We = "Proszę nie zamykać tego okna", Xe = { pay: "ZAPŁAĆ", submit: "WYŚLIJ", getPlan: "POBIERZ MÓJ PLAN", donate: "PRZEKAŻ DAROWIZNĘ", book: "ZAREZERWUJ TERAZ", order: "ZAMÓW TERAZ" }, Qe = { emailSuggestion: "Czy chodziło Ci o {{email}}?", emailInvalid: "Państwa adres e-mail jest nieprawidłowy", cardExpiryInvalid: "Data ważności Państwa karty jest w przeszłości", cardExpiryFormat: "Data ważności Państwa karty jest niekompletna", cardSecurityFormat: "Kod zabezpieczający Państwa karty jest niekompletny", nameRequired: "Proszę wpisać imię i nazwisko tak, jak widnieje na karcie", cardNumberInvalid: "Numer Państwa karty jest nieprawidłowy" }, et = {
+  email: _e,
+  cardholderNameLabel: Ge,
   cardInformation: Ye,
   cardholderNamePlaceholder: Ze,
   cardExpiry: Je,
@@ -734,8 +734,8 @@ const te = "E-Mail", ie = "Name des/der Karteninhaber/in", ae = "Kartendaten", r
 }, A = {
   en: ve,
   de: ce,
-  es: Le,
-  fr: De,
+  es: Me,
+  fr: Ve,
   pl: et,
   pt: ct,
   tr: vt,
@@ -780,7 +780,7 @@ class Et {
     });
   }
 }
-const V = [
+const D = [
   "en",
   "de",
   "es",
@@ -793,7 +793,7 @@ const V = [
 function bt(o) {
   const e = new Et(), i = (() => {
     const n = navigator?.language?.split("-")[0]?.toLowerCase();
-    return V.includes(n) ? n : Ct;
+    return D.includes(n) ? n : Ct;
   })();
   e.setLocale(i);
   const a = k({
@@ -804,7 +804,7 @@ function bt(o) {
     store: a,
     translate: (n, l) => a.getState().translationService.translate(n, l),
     setLocale: (n) => {
-      V.includes(n) && (a.getState().translationService.setLocale(n), a.setState({ locale: n }));
+      D.includes(n) && (a.getState().translationService.setLocale(n), a.setState({ locale: n }));
     },
     getLocale: () => a.getValue("locale"),
     subscribe: a.subscribe.bind(a)
@@ -873,7 +873,7 @@ const xt = bt(), z = () => {
     },
     isLoaded: a
   };
-}, L = (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("; ");
@@ -916,10 +916,10 @@ function wt(o) {
   }, r = {
     fontFamily: `${o.styles.fontFamily}, sans-serif`
   }, s = {
-    base: L(e),
-    error: L(i),
-    focus: L(a),
-    placeholder: L(t)
+    base: M(e),
+    error: M(i),
+    focus: M(a),
+    placeholder: M(t)
   };
   return {
     formContainerStyle: r,
@@ -1096,7 +1096,7 @@ class F {
     return new h("img", i, r);
   }
 }
-class Mt extends h {
+class Lt extends h {
   messageComponent;
   constructor(e) {
     super("div", []);
@@ -1139,7 +1139,7 @@ class Mt extends h {
     return this.messageComponent.setText(e), this;
   }
 }
-class D extends h {
+class V extends h {
   titleElement;
   constructor(e = {}) {
     super("div", ["blur-bg"]);
@@ -1168,7 +1168,7 @@ class E extends h {
     return this.span && this.span.classList.add("form-helper-text-hidden"), this;
   }
 }
-class Lt extends h {
+class Mt extends h {
   constructor(e) {
     super("label", ["input-label"], {
       for: e.id
@@ -1182,7 +1182,7 @@ class P extends h {
   helperText = null;
   constructor(e) {
     if (super("div", ["input-wrapper"]), e.label && e.styles) {
-      const i = new Lt({
+      const i = new Mt({
         styles: {
           color: e.styles.color,
           fontSize: e.styles.fontSize
@@ -1372,7 +1372,7 @@ class At extends h {
     return this;
   }
 }
-class Vt extends h {
+class Dt extends h {
   cardNumber;
   cardExpiry;
   cardCvv;
@@ -1427,14 +1427,14 @@ class Vt extends h {
         fontFamily: t.styles.fontFamily
       }
     }), this.cardExpiry.addEventListener("blur", b), this.cardExpiry.addEventListener("keydown", (f) => {
-      const M = f, B = [
+      const L = f, B = [
         "Backspace",
         "Delete",
         "ArrowLeft",
         "ArrowRight",
         "Tab"
       ], O = this.cardExpiry.getValue().replace(/\D/g, "");
-      B.includes(M.key) || (!/^\d$/.test(M.key) || O.length >= 4 && !M.isComposing) && M.preventDefault();
+      B.includes(L.key) || (!/^\d$/.test(L.key) || O.length >= 4 && !L.isComposing) && L.preventDefault();
     });
     const R = this.cardExpiry.getElement();
     R.style.height = "38.5px";
@@ -1556,7 +1556,7 @@ class Vt extends h {
       }
   }
 }
-class Dt {
+class Vt {
   input;
   constructor(e) {
     const {
@@ -1787,7 +1787,7 @@ class qt extends h {
   translation = z();
   iframeHook;
   constructor(e) {
-    super("form", ["form-container"]), this.options = e, this.checkoutProfile = G({
+    super("form", ["form-container"]), this.options = e, this.checkoutProfile = _({
       apiKey: e.apiKey,
       profileId: e.profileId,
       environment: e.environment
@@ -1908,7 +1908,7 @@ class qt extends h {
           isCvvValid: !1,
           possibleCardType: "unknown"
         };
-        this.iframeHook && (r = this.iframeHook.getState()), this.cardSection = new Vt({
+        this.iframeHook && (r = this.iframeHook.getState()), this.cardSection = new Dt({
           checkoutProfile: e,
           isLoading: r.loadingIframe,
           isFocused: r.isFocused,
@@ -2005,7 +2005,7 @@ class qt extends h {
   createEmailField(e) {
     try {
       const { formData: t, errors: i, touched: a } = this._getFormStateData();
-      this.emailField = new Dt({
+      this.emailField = new Vt({
         value: t.email,
         onChange: this.handleChange,
         onBlur: this.handleBlur,
@@ -2086,10 +2086,10 @@ class qt extends h {
       this.options.onLoadingStateChange(e);
       return;
     }
-    e ? (this.hideSpinner(), this.spinner = new D(), this.element.appendChild(this.spinner.getElement())) : this.hideSpinner();
+    e ? (this.hideSpinner(), this.spinner = new V(), this.element.appendChild(this.spinner.getElement())) : this.hideSpinner();
   }
   showSpinner(e) {
-    this.hideSpinner(), this.spinner = new D({ text: e }), this.element.appendChild(this.spinner.getElement());
+    this.hideSpinner(), this.spinner = new V({ text: e }), this.element.appendChild(this.spinner.getElement());
   }
   hideSpinner() {
     this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
@@ -2137,7 +2137,7 @@ class qt extends h {
    * Update the form error message
    */
   setErrorMessage(e) {
-    return this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new Mt({ message: e }), this.element.insertBefore(this.alert.getElement(), this.element.firstChild), this;
+    return this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new Lt({ message: e }), this.element.insertBefore(this.alert.getElement(), this.element.firstChild), this;
   }
   /**
    * Clean up resources when the form is destroyed
@@ -2149,7 +2149,7 @@ class qt extends h {
     e.key === "Enter" && !this.isFormDisabled() && (e.target instanceof HTMLTextAreaElement || (e.preventDefault(), this.handleSubmit(e)));
   };
 }
-class Gt {
+class _t {
   container = null;
   options;
   onSubmit;
@@ -2180,7 +2180,7 @@ class Gt {
     this.form && (this.form.destroy(), this.form = null);
   }
 }
-class _t {
+class Gt {
   state;
   listeners = /* @__PURE__ */ new Set();
   constructor(e) {
@@ -2202,7 +2202,8 @@ class _t {
     this.listeners.forEach((t) => t(e));
   }
 }
-class Yt {
+const Yt = "en";
+class Zt {
   config;
   apiService;
   formManager;
@@ -2211,10 +2212,10 @@ class Yt {
     this.config = this.validateConfig(e), this.apiService = new H(
       this.config.apiKey,
       this.config.environment
-    ), this.stateManager = new _t({
+    ), this.stateManager = new Gt({
       mounted: !1,
       form: null
-    }), this.formManager = new Gt(
+    }), this.formManager = new _t(
       {
         locale: this.config.locale,
         apiKey: this.config.apiKey,
@@ -2239,7 +2240,7 @@ class Yt {
       paymentId: e.paymentId,
       returnUrl: e.returnUrl,
       environment: e.environment,
-      locale: e.locale || null,
+      locale: e.locale || Yt,
       disableErrorMessages: e.disableErrorMessages ?? !1,
       manualActionHandling: e.manualActionHandling ?? !1,
       callbacks: {
@@ -2302,13 +2303,13 @@ class Yt {
     t && this.formManager.update({ errorMsg: e.details?.message });
   }
 }
-typeof globalThis < "u" && (globalThis.OdusCheckout = Yt);
+typeof globalThis < "u" && (globalThis.OdusCheckout = Zt);
 export {
-  Yt as OdusCheckout,
+  Zt as OdusCheckout,
   ce as deLocale,
   ve as enLocale,
-  Le as esLocale,
-  De as frLocale,
+  Me as esLocale,
+  Ve as frLocale,
   qe as itLocale,
   et as plLocale,
   ct as ptLocale,

package/dist/package.json

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

package/package.json

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