@odus/checkout 0.20.0-beta.0 → 0.20.0

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

@@ -40,6 +40,8 @@ declare type Appearance = {
         phoneNumber?: {
             enabled: boolean;
             label?: string;
+            defaultCountry?: string;
+            allowedCountries?: string[];
         };
         billingFields?: {
             street?: {
@@ -133,11 +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",
@@ -193,6 +199,8 @@ 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",
@@ -250,6 +258,8 @@ 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",
@@ -305,6 +315,8 @@ 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",
@@ -368,6 +380,8 @@ declare type InitialValues = {
 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",
@@ -437,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>;
 }
 
@@ -445,6 +461,8 @@ 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",
@@ -500,6 +518,8 @@ 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",
@@ -563,6 +583,8 @@ 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",