@odus/checkout 0.19.0 → 0.20.0-beta.1

package/README.md

@@ -299,6 +299,32 @@ This approach is useful for:
 - Adding custom tracking or analytics before redirecting
 - Implementing custom UI transitions during the authentication flow
 
+### Displaying Error Messages Programmatically
+
+You can display custom error messages using the checkout's built-in Alert UI. This is particularly useful for showing errors that occur outside the normal payment flow, such as after a failed 3DS redirect:
+
+```javascript
+const checkout = new OdusCheckout({
+  // ... configuration
+});
+
+checkout.mount('#checkout-container');
+
+// Display a custom error message (bypasses disableErrorMessages flag)
+checkout.displayError('Payment failed after 3DS authentication. Please try again.');
+
+// Clear the error message when needed
+checkout.clearError();
+```
+
+**Common use cases:**
+
+- Displaying errors after returning from 3DS authentication
+- Showing validation errors from your backend
+- Communicating payment failures that occur outside the checkout flow
+
+**Note:** The `displayError` method always displays the message, even when `disableErrorMessages: true` is set in the configuration, since it represents an explicit intent to show a message. Both methods require the checkout to be mounted first.
+
 ## API Reference
 
 ### OdusCheckout Class
@@ -308,9 +334,18 @@ class OdusCheckout {
   constructor(config: CheckoutConfig);
   mount(containerId: string): this;
   unmount(): void;
+  displayError(message: string): void;
+  clearError(): void;
 }
 ```
 
+#### Methods
+
+- **`mount(containerId: string)`** - Mounts the checkout form to the specified container element.
+- **`unmount()`** - Unmounts and cleans up the checkout form.
+- **`displayError(message: string)`** - Displays a custom error message using the checkout's built-in Alert UI. This method bypasses the `disableErrorMessages` configuration flag. Throws an error if called before `mount()`.
+- **`clearError()`** - Removes the currently displayed error message. Throws an error if called before `mount()`.
+
 ### CheckoutConfig Type
 
 ```typescript
@@ -342,6 +377,8 @@ type Locale = 'en' | 'de' | 'es' | 'fr' | 'pl' | 'pt' | 'it' | 'tr';
 interface CheckoutInstance {
   mount(containerId: string): this;
   unmount(): void;
+  displayError(message: string): void;
+  clearError(): void;
 }
 ```
 

package/dist/checkout.d.ts

@@ -37,6 +37,12 @@ declare type Appearance = {
         actionButton?: {
             translationKey: string;
         };
+        phoneNumber?: {
+            enabled: boolean;
+            label?: string;
+            defaultCountry?: string;
+            allowedCountries?: string[];
+        };
         billingFields?: {
             street?: {
                 enabled: boolean;
@@ -129,10 +135,15 @@ export declare interface CheckoutInstance {
     mount: (containerId: string) => CheckoutInstance;
     unmount: () => void;
     associatePayment: (paymentId: string, checkoutKey: string) => Promise<void>;
+    displayError: (message: string) => void;
+    clearError: () => void;
 }
 
 export declare const deLocale: {
     "email": "E-Mail",
+    "phoneNumber": "Telefonnummer",
+    "countrySearch": "Länder suchen",
+    "countryNoResults": "Keine Ergebnisse gefunden",
     "cardholderNameLabel": "Name des/der Karteninhaber/in",
     "cardInformation": "Kartendaten",
     "cardholderNamePlaceholder": "Vollständiger Name",
@@ -172,6 +183,8 @@ export declare const deLocale: {
         "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",
+        "phoneNumberRequired": "Telefonnummer ist erforderlich",
+        "phoneNumberInvalid": "Bitte geben Sie eine gültige Telefonnummer ein",
         "invalid-checkout": "Checkout konnte nicht initialisiert werden",
         "streetRequired": "Straße ist erforderlich",
         "firstNameRequired": "Vorname ist erforderlich",
@@ -185,6 +198,9 @@ export declare const deLocale: {
 
 export declare const enLocale: {
     "email": "Email",
+    "phoneNumber": "Phone Number",
+    "countrySearch": "Search countries",
+    "countryNoResults": "No results found",
     "cardholderNameLabel": "Cardholder name",
     "cardInformation": "Card information",
     "cardholderNamePlaceholder": "Full name on card",
@@ -224,6 +240,8 @@ export declare const enLocale: {
         "cardSecurityFormat": "Your card's security code is incomplete",
         "nameRequired": "Please enter the name as it appears on your card",
         "cardNumberInvalid": "Your card number is incomplete",
+        "phoneNumberRequired": "Phone number is required",
+        "phoneNumberInvalid": "Please enter a valid phone number",
         "invalid-checkout": "Failed to initialize checkout",
         "streetRequired": "Street address is required",
         "firstNameRequired": "First name is required",
@@ -239,6 +257,9 @@ declare type Environment = 'test' | 'live';
 
 export declare const esLocale: {
     "email": "Correo electrónico",
+    "phoneNumber": "Número de teléfono",
+    "countrySearch": "Buscar países",
+    "countryNoResults": "No se encontraron resultados",
     "cardholderNameLabel": "Nombre del titular de la tarjeta",
     "cardInformation": "Información de la tarjeta",
     "cardholderNamePlaceholder": "Nombre completo en la tarjeta",
@@ -278,6 +299,8 @@ export declare const esLocale: {
         "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",
+        "phoneNumberRequired": "El número de teléfono es obligatorio",
+        "phoneNumberInvalid": "Por favor, ingrese un número de teléfono válido",
         "invalid-checkout": "No se pudo inicializar el checkout",
         "streetRequired": "La dirección es obligatoria",
         "firstNameRequired": "El nombre es obligatorio",
@@ -291,6 +314,9 @@ export declare const esLocale: {
 
 export declare const frLocale: {
     "email": "E-mail",
+    "phoneNumber": "Numéro de téléphone",
+    "countrySearch": "Rechercher des pays",
+    "countryNoResults": "Aucun résultat trouvé",
     "cardholderNameLabel": "Nom du titulaire de la carte",
     "cardInformation": "Informations de la carte",
     "cardholderNamePlaceholder": "Nom complet figurant sur la carte",
@@ -330,6 +356,8 @@ export declare const frLocale: {
         "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",
+        "phoneNumberRequired": "Le numéro de téléphone est requis",
+        "phoneNumberInvalid": "Veuillez saisir un numéro de téléphone valide",
         "invalid-checkout": "Échec de l'initialisation du checkout",
         "streetRequired": "L'adresse est requise",
         "firstNameRequired": "Le prénom est requis",
@@ -344,12 +372,16 @@ export declare const frLocale: {
 declare type InitialValues = {
     email?: string;
     name?: string;
+    phoneNumber?: string;
     billingAddress?: Partial<AddressData>;
     shippingAddress?: Partial<AddressData>;
 };
 
 export declare const itLocale: {
     "email": "Email",
+    "phoneNumber": "Numero di telefono",
+    "countrySearch": "Cerca paesi",
+    "countryNoResults": "Nessun risultato trovato",
     "cardholderNameLabel": "Nome del titolare della carta",
     "cardInformation": "Informazioni sulla carta",
     "cardholderNamePlaceholder": "Nome completo sulla carta",
@@ -389,6 +421,8 @@ export declare const itLocale: {
         "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",
+        "phoneNumberRequired": "Il numero di telefono è obbligatorio",
+        "phoneNumberInvalid": "Inserisci un numero di telefono valido",
         "invalid-checkout": "Impossibile inizializzare il checkout",
         "streetRequired": "L'indirizzo è obbligatorio",
         "firstNameRequired": "Il nome è obbligatorio",
@@ -417,6 +451,8 @@ export declare class OdusCheckout {
     private handlePaymentResponse;
     private handleAuthorizationError;
     private getPaymentMethod;
+    displayError(message: string): void;
+    clearError(): void;
     associatePayment(paymentId: string, checkoutKey: string): Promise<void>;
 }
 
@@ -424,6 +460,9 @@ declare type PaymentResult = 'pending' | 'three_ds_requested' | 'authorized' | '
 
 export declare const plLocale: {
     "email": "Adres e-mail",
+    "phoneNumber": "Numer telefonu",
+    "countrySearch": "Szukaj krajów",
+    "countryNoResults": "Brak wyników",
     "cardholderNameLabel": "Imię i nazwisko posiadacza karty",
     "cardInformation": "Informacje o karcie",
     "cardholderNamePlaceholder": "Imię i nazwisko na karcie",
@@ -463,6 +502,8 @@ export declare const plLocale: {
         "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",
+        "phoneNumberRequired": "Numer telefonu jest wymagany",
+        "phoneNumberInvalid": "Proszę wpisać prawidłowy numer telefonu",
         "invalid-checkout": "Nie udało się zainicjować procesu płatności",
         "streetRequired": "Adres jest wymagany",
         "firstNameRequired": "Imię jest wymagane",
@@ -476,6 +517,9 @@ export declare const plLocale: {
 
 export declare const ptLocale: {
     "email": "E-mail",
+    "phoneNumber": "Número de telefone",
+    "countrySearch": "Pesquisar países",
+    "countryNoResults": "Nenhum resultado encontrado",
     "cardholderNameLabel": "Nome do titular do cartão",
     "cardInformation": "Informações do cartão",
     "cardholderNamePlaceholder": "Nome completo no cartão",
@@ -515,6 +559,8 @@ export declare const ptLocale: {
         "cardSecurityFormat": "O código de segurança do seu cartão está incompleto",
         "nameRequired": "Por favor, insira o nome conforme aparece no cartão",
         "cardNumberInvalid": "O número do seu cartão é inválido",
+        "phoneNumberRequired": "O número de telefone é obrigatório",
+        "phoneNumberInvalid": "Por favor, insira um número de telefone válido",
         "invalid-checkout": "Falha ao inicializar o checkout",
         "streetRequired": "A morada é obrigatória",
         "firstNameRequired": "O nome é obrigatório",
@@ -536,6 +582,9 @@ export declare const pushMeasurement: (name: string, value: number, unit?: strin
 
 export declare const trLocale: {
     "email": "E-posta",
+    "phoneNumber": "Telefon Numarası",
+    "countrySearch": "Ülkeleri ara",
+    "countryNoResults": "Sonuç bulunamadı",
     "cardholderNameLabel": "Kart sahibinin adı",
     "cardInformation": "Kart bilgileri",
     "cardholderNamePlaceholder": "Kart üzerindeki tam ad",
@@ -575,6 +624,8 @@ export declare const trLocale: {
         "cardSecurityFormat": "Kartınızın güvenlik kodu eksik",
         "nameRequired": "Lütfen kart üzerindeki ismi girin",
         "cardNumberInvalid": "Kart numaranız geçersiz",
+        "phoneNumberRequired": "Telefon numarası gerekli",
+        "phoneNumberInvalid": "Lütfen geçerli bir telefon numarası girin",
         "invalid-checkout": "Checkout başlatılamadı",
         "streetRequired": "Sokak adresi gerekli",
         "firstNameRequired": "Ad gerekli",