@odus/checkout 0.1.2 → 0.3.0

package/README.md

@@ -1,4 +1,4 @@
-# Odus Checkout SDK Documentation
+# Checkout SDK
 
 The Odus Checkout is a flexible, easy-to-implement JavaScript SDK that allows merchants to accept payments on their websites with minimal integration effort. This documentation provides all the necessary information to successfully implement the Odus Checkout on your website.
 
@@ -9,10 +9,11 @@ The Odus Checkout is a flexible, easy-to-implement JavaScript SDK that allows me
 - [Configuration Options](#configuration-options)
 - [Payment Methods](#payment-methods)
 - [Callbacks and Event Handling](#callbacks-and-event-handling)
-- [Localization](#localization)
+- [Localization Support](#localization-support)
 - [Advanced Usage](#advanced-usage)
 - [API Reference](#api-reference)
 - [Troubleshooting](#troubleshooting)
+- [Related Guides](#related-guides)
 
 ## Installation
 
@@ -50,11 +51,13 @@ The Odus Checkout is a flexible, easy-to-implement JavaScript SDK that allows me
 ### NPM Usage (Module)
 
 ```bash
-npm install @odus-js
+npm install @odus/checkout
 ```
 
 ```javascript
 import { OdusCheckout } from '@odus/checkout';
+// Import the required styles
+import '@odus/checkout/styles';
 
 function CheckoutPage() {
   useEffect(() => {
@@ -77,6 +80,8 @@ 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.
+
 ## Getting Started
 
 ### Basic Implementation
@@ -85,6 +90,8 @@ Here's a simple example of how to implement the Odus Checkout in your applicatio
 
 ```javascript
 import { OdusCheckout } from '@odus/checkout';
+// Import the required styles
+import '@odus/checkout/styles';
 
 // Initialize the checkout
 const checkout = new OdusCheckout({
@@ -108,6 +115,10 @@ const checkout = new OdusCheckout({
       console.log('3DS authentication required!', redirectUrl);
       // Custom redirect handling (only called when manualActionHandling is true)
     },
+    onLoadingStateChange: (isLoading) => {
+      console.log('Loading state changed:', isLoading);
+      // Toggle loading indicators in your UI
+    },
   },
   // Optional: Enable manual handling of 3DS redirects
   // manualActionHandling: true,
@@ -189,7 +200,30 @@ onActionRequired: (redirectUrl) => {
 };
 ```
 
-## Localization support
+### onLoadingStateChange
+
+Called when the loading state of the checkout form changes. This is useful for showing or hiding custom loading indicators in your UI.
+
+This callback is optional. If not provided, Odus will automatically render its default spinner during loading states.
+
+```javascript
+onLoadingStateChange: (isLoading) => {
+  // isLoading is a boolean indicating whether the form is currently loading
+  console.log('Loading state changed:', isLoading);
+
+  // Example: Toggle a custom spinner in your UI
+  const spinner = document.getElementById('my-spinner');
+  if (isLoading) {
+    spinner.style.display = 'block';
+  } else {
+    spinner.style.display = 'none';
+  }
+};
+```
+
+**Note:** Implementing this callback will override the default Odus loading indicator, giving you complete control over the loading experience.
+
+## Localization Support
 
 Odus provides localized payment experiences in 33 languages, helping you better serve your global customer base.
 
@@ -268,11 +302,12 @@ type CheckoutConfig = {
   paymentId: string;
   environment: 'test' | 'live';
   callbacks?: {
-    onPaymentSucceeded?: (result: PaymentResult) => void;
+    onPaymentSucceeded?: (result: string) => void;
     onPaymentFailed?: (result: string) => void;
     onActionRequired?: (redirectUrl: string) => void;
+    onLoadingStateChange?: (isLoading: boolean) => void;
   };
-  locale?: 'en' | 'de' | 'es' | 'fr' | 'pl' | 'pt' | null;
+  locale?: 'en' | 'de' | 'es' | 'fr' | 'pl' | 'pt' | 'it' | 'tr' | null;
   disableErrorMessages?: boolean;
   manualActionHandling?: boolean;
 };
@@ -285,6 +320,7 @@ type CheckoutConfig = {
 #### Checkout not appearing
 
 - Ensure the container element exists before calling `mount()`
+- Check that styles are imported with `import '@odus/checkout/styles'` when using npm/module approach
 - Check browser console for errors
 - Verify your API key and profile ID are correct
 - Confirm that you're using the correct environment ('test' or 'live')
@@ -301,4 +337,10 @@ type CheckoutConfig = {
 - Ensure the callback correctly handles the redirectUrl parameter
 - Verify that any custom redirect implementation maintains all URL parameters
 
-© 2025 Odus Payments, Inc. All rights reserved.
+## Related Guides
+
+For a complete understanding of how to integrate the Checkout SDK in your application, please refer to these additional guides:
+
+- [Payment Flow Overview](./flow-overview) - Understand the different payment flows and how they work
+- [Handling Redirects](./handling-redirects) - Learn how to handle redirects for 3DS authentication and alternative payment methods
+- [Making Payments](./making-payments) - Step-by-step guide on how to process payments

package/dist/checkout.d.ts

@@ -2,6 +2,7 @@ declare type CheckoutCallbacks = {
     onPaymentSucceeded?: (result: PaymentResult) => void;
     onPaymentFailed?: (result: string) => void;
     onActionRequired?: (redirectUrl: string) => void;
+    onLoadingStateChange?: (isLoading: boolean) => void;
 };
 
 export declare type CheckoutConfig = {
@@ -128,7 +129,33 @@ export declare const frLocale: {
     }
 };
 
-declare type Locale = 'en' | 'de' | 'es' | 'fr' | 'pl' | 'pt';
+export declare const itLocale: {
+    "email": "Email",
+    "cardholderNameLabel": "Nome del titolare della carta",
+    "cardInformation": "Informazioni sulla carta",
+    "cardholderNamePlaceholder": "Nome completo sulla carta",
+    "cardExpiry": "MM / AA",
+    "loading": "Non chiudere la finestra",
+    "buttonTexts": {
+        "pay": "PAGA",
+        "submit": "INVIA",
+        "getPlan": "OTTIENI IL MIO PIANO",
+        "donate": "DONARE",
+        "book": "PRENOTA ORA",
+        "order": "ORDINA ORA"
+    },
+    "validation": {
+        "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"
+    }
+};
+
+declare type Locale = 'en' | 'de' | 'es' | 'fr' | 'pl' | 'pt' | 'it' | 'tr';
 
 export declare class OdusCheckout {
     private config;
@@ -198,4 +225,30 @@ export declare const ptLocale: {
     }
 };
 
+export declare const trLocale: {
+    "email": "E-posta",
+    "cardholderNameLabel": "Kart sahibinin adı",
+    "cardInformation": "Kart bilgileri",
+    "cardholderNamePlaceholder": "Kart üzerindeki tam ad",
+    "cardExpiry": "AA / YY",
+    "loading": "Lütfen pencereyi kapatmayın",
+    "buttonTexts": {
+        "pay": "ÖDE",
+        "submit": "GÖNDER",
+        "getPlan": "PLANIMI AL",
+        "donate": "BAĞIŞ YAP",
+        "book": "ŞİMDİ REZERVASYON YAP",
+        "order": "ŞİMDİ SİPARİŞ VER"
+    },
+    "validation": {
+        "emailSuggestion": "{{email}} demek mi istediniz?",
+        "emailInvalid": "E-posta adresiniz geçerli değil",
+        "cardExpiryInvalid": "Kartınızın son kullanma tarihi geçmiş",
+        "cardExpiryFormat": "Kartınızın son kullanma tarihi eksik",
+        "cardSecurityFormat": "Kartınızın güvenlik kodu eksik",
+        "nameRequired": "Lütfen kart üzerindeki ismi girin",
+        "cardNumberInvalid": "Kart numaranız geçersiz"
+    }
+};
+
 export { }