@odus/checkout 0.1.2 → 0.2.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
 
@@ -55,6 +56,8 @@ npm install @odus-js
 
 ```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,9 +302,10 @@ 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;
   disableErrorMessages?: 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 = {