@yuno-payments/yuno-sdk-react-native 1.0.16 → 1.0.17-rc.10

package/README.md

@@ -1,13 +1,16 @@
-# Yuno SDK React Native
+# Yuno SDK for React Native
 
 <p align="center">
-<img alt="Yuno React Native SDK" loading="lazy" src="https://files.readme.io/2e1d03a6eec5051a64763f36225454778d7125c344f1d741d0c01cfcdafe4186-flutter-image.png" title="" height="auto" width="auto">
+  <img alt="Yuno React Native SDK" src="https://files.readme.io/2e1d03a6eec5051a64763f36225454778d7125c344f1d741d0c01cfcdafe4186-flutter-image.png" width="600">
 </p>
 
 <div align="center">
   <a href="https://www.y.uno/">
     <img alt="Maintained by Yuno" src="https://img.shields.io/badge/maintained_by-Yuno-4E3DD8?style=for-the-badge">
   </a>
+  <a href="https://www.npmjs.com/package/@yuno/yuno-sdk-react-native">
+    <img alt="npm version" src="https://img.shields.io/npm/v/@yuno/yuno-sdk-react-native?style=for-the-badge">
+  </a>
   <a href="https://opensource.org/licenses/MIT">
     <img src="https://img.shields.io/badge/license-MIT-purple.svg?style=for-the-badge" alt="License: MIT">
   </a>
@@ -17,200 +20,374 @@
 
 > **⚠️ Open Source Project Notice**
 > 
-> This is an open source project related to YUNO. Support is provided by the community, not by YUNO directly. For community support, please open an issue in this repository.
-
-Yuno React Native SDK empowers you to create seamless payment experiences in your native Android and iOS apps built with React Native. It offers powerful and customizable functionality that can be used to gather payment details from your users efficiently and effectively.
-
-## 📱 Platform Support
-
-|             | Android | iOS   |
-|-------------|---------|-------|
-| **Support** | SDK 21+ | 14.0+ |
-
-## 🚀 Example App
-
-A complete example application is available in the [`example/`](./example) directory. This app demonstrates all SDK features with a fully functional UI:
-
-- ✅ **Full SDK Integration**: All payment flows implemented
-- ✅ **Modern UI**: Clean, professional interface with real-time status monitoring
-- ✅ **Ready to Run**: Pre-configured for both Android and iOS
-- ✅ **Complete Documentation**: Step-by-step guides included
-
-**Quick Start:**
-```bash
-cd example
-npm install
-npm run android  # or npm run ios
-```
-
-See [`example/README.md`](./example/README.md) for detailed instructions.
+> This is an open-source project related to Yuno. Community support is available through GitHub issues. For enterprise support, please contact [Yuno directly](https://www.y.uno/).
+
+## 📖 Table of Contents
+
+- [Overview](#-overview)
+- [Features](#-features)
+- [Platform Support](#-platform-support)
+- [Installation](#-installation)
+- [Setup](#%EF%B8%8F-setup)
+  - [Android Setup](#android-setup)
+  - [iOS Setup](#ios-setup)
+- [Quick Start](#-quick-start)
+- [Usage](#-usage)
+  - [Initialization](#1-initialize-the-sdk)
+  - [Payment Events](#2-subscribe-to-payment-events)
+  - [Full Payment Flow](#3-start-full-payment-flow)
+  - [Payment Lite](#4-payment-lite-flow)
+  - [Seamless Payment](#5-seamless-payment-flow)
+  - [Enrollment](#6-enrollment-flow)
+  - [Deep Links](#7-handle-deep-links)
+- [API Reference](#-api-reference)
+- [TypeScript Support](#-typescript-support)
+- [Example App](#-example-app)
+- [Troubleshooting](#-troubleshooting)
+- [Contributing](#-contributing)
+- [License](#-license)
+
+## 🌟 Overview
+
+The **Yuno SDK for React Native** enables you to build powerful, secure, and seamless payment experiences in your React Native applications for both Android and iOS platforms. Designed with developers in mind, it provides a comprehensive set of tools to integrate multiple payment methods, handle tokenization, and manage the complete payment lifecycle.
+
+### Why Choose Yuno SDK?
+
+- ✅ **Unified API**: Single integration for multiple payment providers
+- ✅ **PCI Compliance**: Reduce your PCI scope with secure tokenization
+- ✅ **Flexible Flows**: Full, lite, and seamless payment options
+- ✅ **Production Ready**: Battle-tested in high-volume production environments
+- ✅ **Developer Friendly**: TypeScript support, clear documentation, and extensive examples
 
 ## ✨ Features
 
-### 1. Powerful Payment Integrations
-- **Multiple Payment Methods**: Supports a variety of payment options including credit cards, debit cards, wallets, and alternative payment methods
-- **Tokenization**: Implements secure tokenization to safely handle sensitive card data, reducing PCI compliance scope
-- **Seamless Payments**: One-tap payments for returning users with saved payment methods
-
-### 2. Flexible Payment Flows
-- **Full Payment Flow**: Complete payment experience with built-in UI
-- **Payment Lite**: Lightweight payment flow for custom integrations
-- **Seamless Payment**: Headless payment flow for maximum customization
-- **Enrollment**: Save payment methods for future use
+### 🔐 Security First
+- **PCI DSS Compliant**: Adheres to Payment Card Industry Data Security Standards
+- **Tokenization**: Secure handling of sensitive payment data
+- **3D Secure Support**: Built-in Strong Customer Authentication (SCA)
+- **End-to-End Encryption**: All transactions are encrypted
+
+### 💳 Payment Capabilities
+- **Multiple Payment Methods**: Credit/debit cards, digital wallets, and alternative payment methods
+- **Save Cards**: Enable customers to save payment methods for future purchases
+- **One-Tap Payments**: Quick checkout for returning customers
+- **Split Payments**: Support for multiple payment instruments
+
+### 🎨 Customizable Flows
+- **Full Payment Flow**: Complete payment UI managed by the SDK
+- **Payment Lite**: Lightweight flow for custom integrations
+- **Seamless Payment**: Headless flow for maximum UI control
+- **Enrollment Flow**: Save payment methods without processing a payment
+
+### 🌍 Global Support
+- **18 Languages**: EN, ES, PT, ID, MS, FR, PL, IT, DE, RU, TR, NL, SV, TH, FIL, VI, ZH-CN, ZH-TW
+- **Multi-Currency**: Support for multiple currencies
+- **Regional Payment Methods**: Country-specific payment options
+
+### 🛠️ Developer Experience
+- **TypeScript**: Full type definitions included
+- **Event-Driven**: Real-time payment status updates
+- **Error Handling**: Comprehensive error messages
+- **Testing Tools**: Sandbox environment for development
 
-### 3. Developer-Friendly
-- **TypeScript Support**: Full TypeScript definitions included
-- **Clean Architecture**: Well-structured codebase following React Native best practices
-- **Event-Based**: React to payment events in real-time
-- **Error Handling**: Comprehensive error messages and status reporting
-
-### 4. Security Features
-- **PCI Compliance**: Adheres to PCI DSS standards
-- **3D Secure Support**: Built-in support for additional authentication
-- **Data Encryption**: All transactions protected with advanced encryption
+## 📱 Platform Support
 
-### 5. Localization
-- **Multi-Language Support**: EN, ES, PT, MS, ID, TH
-- **Regional Configuration**: Country-specific payment method support
+| Platform | Minimum Version | Supported |
+|----------|----------------|-----------|
+| **Android** | SDK 21+ (Android 5.0) | ✅ |
+| **iOS** | 14.0+ | ✅ |
+| **React Native** | 0.70+ | ✅ |
 
 ## 📦 Installation
 
+Install the package using npm or yarn:
+
 ```bash
-npm install @y.uno/yuno-sdk-react-native
+npm install @yuno/yuno-sdk-react-native
 ```
 
 or
 
 ```bash
-yarn add @y.uno/yuno-sdk-react-native
+yarn add @yuno/yuno-sdk-react-native
 ```
 
 ## ⚙️ Setup
 
-### Android Configuration
+### Android Setup
+
+#### Step 1: Add Yuno Maven Repository
 
-#### 1. Update your `android/build.gradle` (project level):
+Update your project-level `android/build.gradle`:
 
 ```gradle
 allprojects {
     repositories {
         google()
         mavenCentral()
-        maven { url "https://yunopayments.jfrog.io/artifactory/snapshots-libs-release" }
+        
+        // Add Yuno's Maven repository
+        maven { 
+            url "https://yunopayments.jfrog.io/artifactory/snapshots-libs-release" 
+        }
     }
 }
 ```
 
-#### 2. Create or update `android/app/src/main/java/.../MainApplication.kt`:
+#### Step 2: Initialize SDK in Application Class
+
+Create or update your `android/app/src/main/java/[your-package]/MainApplication.kt`:
 
 ```kotlin
+package com.yourapp
+
 import android.app.Application
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.soloader.SoLoader
 import com.yunosdkreactnative.YunoSdkModule
 
 class MainApplication : Application(), ReactApplication {
+
+    override val reactNativeHost: ReactNativeHost =
+        object : DefaultReactNativeHost(this) {
+            override fun getPackages(): List<ReactPackage> =
+                PackageList(this).packages.apply {
+                    // Packages that cannot be autolinked yet can be added manually here
+                }
+
+            override fun getJSMainModuleName(): String = "index"
+
+            override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+            override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+            override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+        }
+
+    override val reactHost: ReactHost
+        get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
     override fun onCreate() {
         super.onCreate()
         
         // Initialize Yuno SDK
-        YunoSdkModule.initialize(this, "YOUR_YUNO_API_KEY")
+        YunoSdkModule.initialize(
+            applicationContext = this,
+            apiKey = "YOUR_YUNO_API_KEY",
+            language = "en", // Optional: default language
+            cardType = "ONE_STEP", // Optional: "ONE_STEP" or "STEP_BY_STEP"
+            savedCardEnable = true // Optional: enable save card feature
+        )
+        
+        SoLoader.init(this, false)
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            load()
+        }
     }
-    
-    // ... rest of your application code
 }
 ```
 
-#### 3. Ensure minimum SDK version in `android/app/build.gradle`:
+#### Step 3: Set Minimum SDK Version
+
+Ensure your `android/app/build.gradle` has the correct minimum SDK:
 
 ```gradle
 android {
     defaultConfig {
         minSdkVersion 21
+        targetSdkVersion 33
         // ...
     }
 }
 ```
 
-### iOS Configuration
+### iOS Setup
 
-#### 1. Install CocoaPods dependencies:
+#### Step 1: Install CocoaPods Dependencies
 
 ```bash
 cd ios && pod install && cd ..
 ```
 
-#### 2. Update your `Info.plist` if you need to handle deeplinks:
+#### Step 2: Configure Deep Links (Optional)
+
+If you need to handle payment redirects, update your `ios/[YourApp]/Info.plist`:
 
 ```xml
 <key>CFBundleURLTypes</key>
 <array>
     <dict>
+        <key>CFBundleTypeRole</key>
+        <string>Editor</string>
+        <key>CFBundleURLName</key>
+        <string>com.yourapp</string>
         <key>CFBundleURLSchemes</key>
         <array>
-            <string>your-app-scheme</string>
+            <string>yourappscheme</string>
         </array>
     </dict>
 </array>
 ```
 
-## 🚀 Usage
+#### Step 3: Set Deployment Target
+
+Ensure your `ios/Podfile` has the correct minimum iOS version:
+
+```ruby
+platform :ios, '14.0'
+```
+
+## 🚀 Quick Start
 
-### Initialize the SDK
+Here's a minimal example to get you started:
 
 ```typescript
-import { YunoSdk, YunoLanguage, CardFlow } from '@y.uno/yuno-sdk-react-native';
+import React, { useEffect } from 'react';
+import { View, Button, Alert } from 'react-native';
+import { YunoSdk, YunoLanguage, CardFlow, YunoStatus } from '@yuno/yuno-sdk-react-native';
 
-// Initialize the SDK
-await YunoSdk.initialize({
-  apiKey: 'YOUR_API_KEY',
-  countryCode: 'CO', // ISO country code
-  yunoConfig: {
-    lang: YunoLanguage.ES,
-    cardFlow: CardFlow.STEP_BY_STEP,
-    saveCardEnabled: true,
-    keepLoader: false,
-    isDynamicViewEnabled: true,
-  },
-});
+function PaymentScreen() {
+  useEffect(() => {
+    // Initialize SDK
+    initializeYuno();
+    
+    // Subscribe to payment events
+    const paymentSubscription = YunoSdk.onPaymentStatus((state) => {
+      if (state.status === YunoStatus.SUCCEEDED) {
+        Alert.alert('Success', 'Payment completed successfully!');
+      } else if (state.status === YunoStatus.FAILED) {
+        Alert.alert('Error', 'Payment failed');
+      }
+    });
+    
+    return () => {
+      paymentSubscription.remove();
+    };
+  }, []);
+  
+  const initializeYuno = async () => {
+    try {
+      await YunoSdk.initialize({
+        apiKey: 'YOUR_API_KEY',
+        countryCode: 'US',
+        yunoConfig: {
+          lang: YunoLanguage.EN,
+          cardFlow: CardFlow.ONE_STEP,
+        },
+      });
+    } catch (error) {
+      console.error('Yuno initialization error:', error);
+    }
+  };
+  
+  const handlePayment = async () => {
+    try {
+      await YunoSdk.startPayment(true);
+    } catch (error) {
+      console.error('Payment error:', error);
+    }
+  };
+  
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
+      <Button title="Start Payment" onPress={handlePayment} />
+    </View>
+  );
+}
+
+export default PaymentScreen;
 ```
 
-### Listen to Payment Events
+## 📚 Usage
+
+### 1. Initialize the SDK
+
+Initialize the SDK at the start of your app (typically in your root component):
 
 ```typescript
-import { YunoSdk, YunoStatus } from '@y.uno/yuno-sdk-react-native';
+import { YunoSdk, YunoLanguage, CardFlow } from '@yuno/yuno-sdk-react-native';
+
+const initializeYuno = async () => {
+  try {
+    await YunoSdk.initialize({
+      apiKey: 'YOUR_YUNO_API_KEY',
+      countryCode: 'US', // ISO 3166-1 alpha-2 country code
+      yunoConfig: {
+        lang: YunoLanguage.EN,
+        cardFlow: CardFlow.ONE_STEP,
+        saveCardEnabled: true,
+        keepLoader: false,
+        isDynamicViewEnabled: true,
+      },
+    });
+    console.log('Yuno SDK initialized successfully');
+  } catch (error) {
+    console.error('Failed to initialize Yuno SDK:', error);
+  }
+};
+```
+
+### 2. Subscribe to Payment Events
+
+Listen to payment status updates in real-time:
+
+```typescript
+import { YunoSdk, YunoStatus } from '@yuno/yuno-sdk-react-native';
 import { useEffect } from 'react';
 
-function PaymentScreen() {
+function PaymentComponent() {
   useEffect(() => {
-    // Listen to payment status
+    // Listen to payment status changes
     const paymentSubscription = YunoSdk.onPaymentStatus((state) => {
       console.log('Payment Status:', state.status);
       
       switch (state.status) {
         case YunoStatus.SUCCEEDED:
-          console.log('Payment succeeded!');
-          if (state.token) {
-            console.log('OTT Token:', state.token);
-          }
+          console.log('✅ Payment succeeded!');
+          // Navigate to success screen
           break;
+          
         case YunoStatus.FAILED:
-          console.log('Payment failed');
+          console.log('❌ Payment failed');
+          // Show error message
           break;
+          
         case YunoStatus.REJECTED:
-          console.log('Payment rejected');
+          console.log('🚫 Payment rejected');
+          // Handle rejection
+          break;
+          
+        case YunoStatus.CANCELLED:
+          console.log('⚠️ Payment cancelled by user');
+          // Return to previous screen
           break;
-        case YunoStatus.CANCELLED_BY_USER:
-          console.log('Payment cancelled by user');
+          
+        case YunoStatus.PROCESSING:
+          console.log('⏳ Payment processing...');
+          // Show loading state
+          break;
+          
+        case YunoStatus.INTERNAL_ERROR:
+          console.log('🔥 Internal error occurred');
+          // Show error and retry option
           break;
-        // ... handle other cases
       }
     });
     
-    // Listen to one-time tokens
+    // Listen to one-time tokens (OTT)
     const tokenSubscription = YunoSdk.onOneTimeToken((token) => {
       console.log('Received OTT:', token);
-      // Use token for server-side processing
+      // Send token to your backend for payment processing
+      sendTokenToBackend(token);
     });
     
+    // Cleanup subscriptions
     return () => {
       paymentSubscription.remove();
       tokenSubscription.remove();
@@ -223,74 +400,93 @@ function PaymentScreen() {
 }
 ```
 
-### Start a Full Payment Flow
+### 3. Start Full Payment Flow
+
+The full payment flow provides a complete UI managed by the SDK:
 
 ```typescript
-import { YunoSdk } from '@y.uno/yuno-sdk-react-native';
+import { YunoSdk } from '@yuno/yuno-sdk-react-native';
 
-async function handlePayment() {
+const handleFullPayment = async () => {
   try {
-    await YunoSdk.startPayment(true); // true to show payment status
+    await YunoSdk.startPayment(true); // true = show payment status screen
     console.log('Payment flow started');
   } catch (error) {
-    console.error('Payment error:', error);
+    console.error('Error starting payment:', error);
   }
-}
+};
 ```
 
-### Start Payment Lite
+### 4. Payment Lite Flow
+
+Use Payment Lite when you have a pre-selected payment method:
 
 ```typescript
-import { YunoSdk } from '@y.uno/yuno-sdk-react-native';
+import { YunoSdk } from '@yuno/yuno-sdk-react-native';
 
-async function handlePaymentLite() {
+const handlePaymentLite = async () => {
   try {
-    await YunoSdk.startPaymentLite({
-      checkoutSession: 'your_checkout_session_token',
-      methodSelected: {
-        vaultedToken: 'payment_method_token',
-        paymentMethodType: 'CARD',
+    await YunoSdk.startPaymentLite(
+      {
+        checkoutSession: 'checkout_session_token_from_backend',
+        methodSelected: {
+          vaultedToken: 'saved_payment_method_token',
+          paymentMethodType: 'CARD', // or 'PIX', 'WALLET', etc.
+        },
+        showPaymentStatus: true,
       },
-      showPaymentStatus: true,
-    });
+      'US' // Optional country code override
+    );
+    console.log('Payment Lite flow started');
   } catch (error) {
-    console.error('Payment lite error:', error);
+    console.error('Payment Lite error:', error);
   }
-}
+};
 ```
 
-### Start Seamless Payment
+### 5. Seamless Payment Flow
+
+The seamless flow gives you complete control over the UI:
 
 ```typescript
-import { YunoSdk, YunoStatus } from '@y.uno/yuno-sdk-react-native';
+import { YunoSdk, YunoStatus } from '@yuno/yuno-sdk-react-native';
 
-async function handleSeamlessPayment() {
+const handleSeamlessPayment = async () => {
   try {
     const status = await YunoSdk.startPaymentSeamlessLite({
-      checkoutSession: 'your_checkout_session_token',
+      checkoutSession: 'checkout_session_token',
+      countryCode: 'US',
       methodSelected: {
         vaultedToken: 'payment_method_token',
         paymentMethodType: 'CARD',
       },
-      showPaymentStatus: false,
-      countryCode: 'CO',
+      showPaymentStatus: false, // You handle the UI
     });
     
     console.log('Seamless payment status:', status);
     
     if (status === YunoStatus.SUCCEEDED) {
-      // Handle success
+      // Handle success - navigate to confirmation
+      navigateToSuccess();
+    } else if (status === YunoStatus.PROCESSING) {
+      // Payment is processing
+      showProcessingState();
+    } else {
+      // Handle other statuses
+      handlePaymentError(status);
     }
   } catch (error) {
     console.error('Seamless payment error:', error);
   }
-}
+};
 ```
 
-### Enrollment Payment
+### 6. Enrollment Flow
+
+Allow users to save payment methods without making a payment:
 
 ```typescript
-import { YunoSdk, YunoStatus } from '@y.uno/yuno-sdk-react-native';
+import { YunoSdk, YunoStatus } from '@yuno/yuno-sdk-react-native';
 import { useEffect } from 'react';
 
 function EnrollmentScreen() {
@@ -299,95 +495,118 @@ function EnrollmentScreen() {
     const subscription = YunoSdk.onEnrollmentStatus((state) => {
       console.log('Enrollment Status:', state.status);
       
-      switch (state.status) {
-        case YunoStatus.SUCCEEDED:
-          console.log('Enrollment succeeded!');
-          break;
-        case YunoStatus.FAILED:
-          console.log('Enrollment failed');
-          break;
-        // ... handle other cases
+      if (state.status === YunoStatus.SUCCEEDED) {
+        console.log('✅ Payment method saved successfully!');
+        // Navigate back or show success message
+      } else if (state.status === YunoStatus.FAILED) {
+        console.log('❌ Failed to save payment method');
+        // Show error message
       }
     });
     
     return () => subscription.remove();
   }, []);
   
-  const handleEnrollment = async () => {
+  const startEnrollment = async () => {
     try {
       await YunoSdk.enrollmentPayment({
-        customerSession: 'customer_session_token',
-        showPaymentStatus: true,
-        countryCode: 'CO',
+        customerSession: 'customer_session_token_from_backend',
+        countryCode: 'US',
+        showEnrollmentStatus: true,
       });
+      console.log('Enrollment flow started');
     } catch (error) {
       console.error('Enrollment error:', error);
     }
   };
   
   return (
-    // Your UI
+    // Your enrollment UI
   );
 }
 ```
 
-### Handle Deep Links (iOS)
+### 7. Handle Deep Links
+
+For payment methods that redirect to external apps or browsers:
 
 ```typescript
-import { YunoSdk } from '@y.uno/yuno-sdk-react-native';
+import { YunoSdk } from '@yuno/yuno-sdk-react-native';
 import { Linking } from 'react-native';
 import { useEffect } from 'react';
 
 function App() {
   useEffect(() => {
-    // Handle initial URL
+    // Handle initial URL (app was opened from a closed state)
     Linking.getInitialURL().then((url) => {
       if (url) {
-        YunoSdk.receiveDeeplink(url);
+        handleDeepLink(url);
       }
     });
     
-    // Handle URL updates
+    // Handle URL changes (app is running)
     const subscription = Linking.addEventListener('url', (event) => {
-      YunoSdk.receiveDeeplink(event.url);
+      handleDeepLink(event.url);
     });
     
-    return () => subscription.remove();
+    return () => {
+      subscription.remove();
+    };
   }, []);
   
+  const handleDeepLink = async (url: string) => {
+    console.log('Received deep link:', url);
+    
+    try {
+      await YunoSdk.receiveDeeplink(url);
+      console.log('Deep link processed');
+    } catch (error) {
+      console.error('Error processing deep link:', error);
+    }
+  };
+  
   return (
     // Your app
   );
 }
 ```
 
-### Continue Payment
+### 8. Continue Payment
+
+Resume a previously started payment:
 
 ```typescript
-import { YunoSdk } from '@y.uno/yuno-sdk-react-native';
+import { YunoSdk } from '@yuno/yuno-sdk-react-native';
 
-async function handleContinuePayment() {
+const continueExistingPayment = async () => {
   try {
-    await YunoSdk.continuePayment(true);
+    await YunoSdk.continuePayment(
+      'checkout_session_token',
+      'US',
+      true // show payment status
+    );
     console.log('Payment continued');
   } catch (error) {
-    console.error('Continue payment error:', error);
+    console.error('Error continuing payment:', error);
   }
-}
+};
 ```
 
-### Hide Loader
+### 9. Hide Loader
+
+Manually hide the SDK loader when needed:
 
 ```typescript
-import { YunoSdk } from '@y.uno/yuno-sdk-react-native';
+import { YunoSdk } from '@yuno/yuno-sdk-react-native';
 
-async function hideLoader() {
+const hidePaymentLoader = async () => {
   try {
     await YunoSdk.hideLoader();
+    console.log('Loader hidden');
   } catch (error) {
-    console.error('Hide loader error:', error);
+    console.error('Error hiding loader:', error);
   }
-}
+};
 ```
 
 ## 📖 API Reference
@@ -396,175 +615,421 @@ async function hideLoader() {
 
 The main class for interacting with the Yuno SDK.
 
-#### Methods
+#### Static Methods
 
-##### `initialize(params)`
+##### `initialize(params: YunoInitParams): Promise<void>`
 
-Initializes the SDK with configuration.
+Initializes the Yuno SDK with your configuration.
 
 **Parameters:**
-- `apiKey` (string, required): Your Yuno API key
-- `countryCode` (string, required): ISO country code
-- `yunoConfig` (object, optional): SDK configuration
-  - `lang` (YunoLanguage): Language for the SDK UI
-  - `cardFlow` (CardFlow): Card flow type
-  - `saveCardEnabled` (boolean): Enable save card option
-  - `keepLoader` (boolean): Keep loader visible
-  - `isDynamicViewEnabled` (boolean): Enable dynamic view
-- `iosConfig` (object, optional): iOS-specific configuration
-- `androidConfig` (object, optional): Android-specific configuration
 
-**Returns:** Promise<void>
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `apiKey` | `string` | Yes | Your Yuno API key |
+| `countryCode` | `string` | Yes | ISO 3166-1 alpha-2 country code (e.g., 'US', 'BR', 'MX') |
+| `yunoConfig` | `YunoConfig` | No | SDK configuration options |
+| `iosConfig` | `IosConfig` | No | iOS-specific configuration |
+| `androidConfig` | `AndroidConfig` | No | Android-specific configuration |
+
+**YunoConfig:**
 
-##### `startPayment(showPaymentStatus)`
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `lang` | `YunoLanguage` | `EN` | UI language |
+| `cardFlow` | `CardFlow` | `ONE_STEP` | Card input flow type |
+| `saveCardEnabled` | `boolean` | `false` | Enable save card option |
+| `keepLoader` | `boolean` | `false` | Keep loader visible after payment |
+| `isDynamicViewEnabled` | `boolean` | `true` | Enable dynamic views |
 
-Starts a full payment flow.
+**Example:**
+
+```typescript
+await YunoSdk.initialize({
+  apiKey: 'your_api_key',
+  countryCode: 'US',
+  yunoConfig: {
+    lang: YunoLanguage.EN,
+    cardFlow: CardFlow.ONE_STEP,
+    saveCardEnabled: true,
+  },
+});
+```
+
+---
+
+##### `startPayment(showPaymentStatus: boolean): Promise<void>`
+
+Starts the full payment flow with Yuno's built-in UI.
 
 **Parameters:**
-- `showPaymentStatus` (boolean): Show payment status screen
 
-**Returns:** Promise<void>
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `showPaymentStatus` | `boolean` | Yes | Whether to show the payment status screen |
 
-##### `startPaymentLite(arguments, countryCode?)`
+**Example:**
 
-Starts a payment lite flow.
+```typescript
+await YunoSdk.startPayment(true);
+```
+
+---
+
+##### `startPaymentLite(params: StartPayment, countryCode?: string): Promise<void>`
+
+Starts a lightweight payment flow for pre-selected payment methods.
 
 **Parameters:**
-- `arguments` (StartPayment): Payment configuration
-- `countryCode` (string, optional): Country code override
 
-**Returns:** Promise<void>
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `params.checkoutSession` | `string` | Yes | Checkout session token from your backend |
+| `params.methodSelected` | `object` | Yes | Selected payment method |
+| `params.methodSelected.vaultedToken` | `string` | Yes | Saved payment method token |
+| `params.methodSelected.paymentMethodType` | `string` | Yes | Payment method type (e.g., 'CARD') |
+| `params.showPaymentStatus` | `boolean` | No | Show payment status screen (default: true) |
+| `countryCode` | `string` | No | Country code override |
+
+**Example:**
+
+```typescript
+await YunoSdk.startPaymentLite({
+  checkoutSession: 'session_token',
+  methodSelected: {
+    vaultedToken: 'payment_token',
+    paymentMethodType: 'CARD',
+  },
+  showPaymentStatus: true,
+});
+```
+
+---
 
-##### `startPaymentSeamlessLite(arguments)`
+##### `startPaymentSeamlessLite(params: SeamlessArguments): Promise<YunoStatus>`
 
-Starts a seamless payment lite flow.
+Starts a seamless (headless) payment flow without Yuno's UI.
 
 **Parameters:**
-- `arguments` (SeamlessArguments): Seamless payment configuration
 
-**Returns:** Promise<YunoStatus>
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `params.checkoutSession` | `string` | Yes | Checkout session token |
+| `params.countryCode` | `string` | Yes | Country code |
+| `params.methodSelected` | `object` | Yes | Payment method details |
+| `params.showPaymentStatus` | `boolean` | No | Show status screen (default: false) |
+
+**Returns:** `Promise<YunoStatus>` - The payment status
+
+**Example:**
+
+```typescript
+const status = await YunoSdk.startPaymentSeamlessLite({
+  checkoutSession: 'session_token',
+  countryCode: 'US',
+  methodSelected: {
+    vaultedToken: 'payment_token',
+    paymentMethodType: 'CARD',
+  },
+  showPaymentStatus: false,
+});
+```
+
+---
 
-##### `enrollmentPayment(arguments)`
+##### `enrollmentPayment(params: EnrollmentArguments): Promise<void>`
 
-Starts an enrollment payment flow.
+Starts the enrollment flow to save a payment method.
 
 **Parameters:**
-- `arguments` (EnrollmentArguments): Enrollment configuration
 
-**Returns:** Promise<void>
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `params.customerSession` | `string` | Yes | Customer session token from your backend |
+| `params.countryCode` | `string` | Yes | Country code |
+| `params.showEnrollmentStatus` | `boolean` | No | Show enrollment status (default: true) |
+
+**Example:**
+
+```typescript
+await YunoSdk.enrollmentPayment({
+  customerSession: 'customer_session_token',
+  countryCode: 'US',
+  showEnrollmentStatus: true,
+});
+```
+
+---
 
-##### `continuePayment(showPaymentStatus)`
+##### `continuePayment(checkoutSession: string, countryCode: string, showPaymentStatus: boolean): Promise<void>`
 
 Continues a previously started payment.
 
-**Parameters:**
-- `showPaymentStatus` (boolean): Show payment status screen
+**Example:**
 
-**Returns:** Promise<void>
+```typescript
+await YunoSdk.continuePayment('session_token', 'US', true);
+```
 
-##### `hideLoader()`
+---
 
-Hides the loading indicator.
+##### `hideLoader(): Promise<void>`
 
-**Returns:** Promise<void>
+Hides the Yuno SDK loader.
 
-##### `receiveDeeplink(url)`
+**Example:**
 
-Handles a deep link for payment resumption (iOS only).
+```typescript
+await YunoSdk.hideLoader();
+```
 
-**Parameters:**
-- `url` (string): Deep link URL
+---
 
-**Returns:** Promise<void>
+##### `receiveDeeplink(url: string): Promise<void>`
 
-##### `onPaymentStatus(listener)`
+Handles deep link redirects for payment flows.
 
-Subscribes to payment status events.
+**Example:**
 
-**Parameters:**
-- `listener` (function): Callback function
+```typescript
+await YunoSdk.receiveDeeplink('yourapp://payment/callback');
+```
+
+---
+
+##### `onPaymentStatus(callback: (state: PaymentState) => void): Subscription`
+
+Subscribes to payment status updates.
 
 **Returns:** Subscription object with `remove()` method
 
-##### `onEnrollmentStatus(listener)`
+**Example:**
 
-Subscribes to enrollment status events.
+```typescript
+const subscription = YunoSdk.onPaymentStatus((state) => {
+  console.log('Payment status:', state.status);
+});
 
-**Parameters:**
-- `listener` (function): Callback function
+// Later, unsubscribe
+subscription.remove();
+```
+
+---
+
+##### `onEnrollmentStatus(callback: (state: EnrollmentState) => void): Subscription`
+
+Subscribes to enrollment status updates.
 
 **Returns:** Subscription object with `remove()` method
 
-##### `onOneTimeToken(listener)`
+**Example:**
+
+```typescript
+const subscription = YunoSdk.onEnrollmentStatus((state) => {
+  console.log('Enrollment status:', state.status);
+});
+```
+
+---
 
-Subscribes to one-time token events.
+##### `onOneTimeToken(callback: (token: string) => void): Subscription`
 
-**Parameters:**
-- `listener` (function): Callback function
+Subscribes to one-time token (OTT) events.
 
 **Returns:** Subscription object with `remove()` method
 
+**Example:**
+
+```typescript
+const subscription = YunoSdk.onOneTimeToken((token) => {
+  console.log('Received OTT:', token);
+  // Send to your backend
+});
+```
+
+---
+
 ### Enums
 
 #### YunoLanguage
 
+Supported languages for the SDK UI.
+
 ```typescript
 enum YunoLanguage {
-  EN = 'EN',
-  ES = 'ES',
-  PT = 'PT',
-  MS = 'MW',
-  ID = 'ID',
-  TH = 'TH',
+  EN = 'EN',           // English
+  ES = 'ES',           // Spanish
+  PT = 'PT',           // Portuguese
+  ID = 'ID',           // Indonesian
+  MS = 'MS',           // Malaysian
+  FR = 'FR',           // French
+  PL = 'PL',           // Polish
+  IT = 'IT',           // Italian
+  DE = 'DE',           // German
+  RU = 'RU',           // Russian
+  TR = 'TR',           // Turkish
+  NL = 'NL',           // Dutch
+  SV = 'SV',           // Swedish
+  TH = 'TH',           // Thai
+  FIL = 'FIL',         // Filipino
+  VI = 'VI',           // Vietnamese
+  ZH_CN = 'ZH-CN',     // Chinese (Simplified)
+  ZH_TW = 'ZH-TW',     // Chinese (Traditional)
 }
 ```
 
 #### YunoStatus
 
+Payment and enrollment status values.
+
 ```typescript
 enum YunoStatus {
-  REJECTED = 'REJECTED',
-  SUCCEEDED = 'SUCCEEDED',
-  FAILED = 'FAILED',
-  PROCESSING = 'PROCESSING',
-  INTERNAL_ERROR = 'INTERNAL_ERROR',
-  CANCELLED_BY_USER = 'CANCELLED_BY_USER',
+  SUCCEEDED = 'SUCCEEDED',           // Payment/enrollment succeeded
+  FAILED = 'FAILED',                 // Payment/enrollment failed
+  REJECTED = 'REJECTED',             // Payment/enrollment rejected
+  CANCELLED = 'CANCELLED',           // Cancelled by user
+  PROCESSING = 'PROCESSING',         // Payment is processing
+  INTERNAL_ERROR = 'INTERNAL_ERROR', // Internal error occurred
 }
 ```
 
 #### CardFlow
 
+Card input flow types.
+
 ```typescript
 enum CardFlow {
-  ONE_STEP = 'ONE_STEP',
-  STEP_BY_STEP = 'STEP_BY_STEP',
+  ONE_STEP = 'ONE_STEP',           // Single-step card input
+  STEP_BY_STEP = 'STEP_BY_STEP',   // Multi-step card input
 }
 ```
 
-## 🔄 Updating Native SDK Versions
+---
 
-### Android Native SDK
+### Types
 
-To update the Android native SDK version:
+#### PaymentState
 
-1. Navigate to `node_modules/@y.uno/yuno-sdk-react-native/android/build.gradle`
-2. Update the Yuno Android SDK version:
-```gradle
-dependencies {
-    implementation "com.yuno.payments:android-sdk:x.x.x"
+```typescript
+interface PaymentState {
+  status: YunoStatus;
+  token?: string; // One-time token (if available)
 }
 ```
 
-### iOS Native SDK
+#### EnrollmentState
 
-To update the iOS native SDK version:
+```typescript
+interface EnrollmentState {
+  status: YunoStatus;
+}
+```
 
-1. Navigate to `node_modules/@y.uno/yuno-sdk-react-native/ios/YunoSdk.podspec`
-2. Update the Yuno iOS SDK version:
-```ruby
-s.dependency "YunoSDK", "x.x.x"
+## 🎯 TypeScript Support
+
+This SDK is written in TypeScript and includes complete type definitions. No additional `@types` packages are needed.
+
+```typescript
+import type {
+  YunoLanguage,
+  YunoStatus,
+  CardFlow,
+  YunoConfig,
+  StartPayment,
+  SeamlessArguments,
+  EnrollmentArguments,
+} from '@yuno/yuno-sdk-react-native';
 ```
-3. Run `pod install` in the `ios` directory
+
+## 📱 Example App
+
+A complete example application is available in the [`yuno-sdk-react-native-example`](https://github.com/yuno-payments/yuno-sdk-react-native-example) repository.
+
+The example app includes:
+
+- ✅ Full SDK integration with all payment flows
+- ✅ Modern, production-ready UI
+- ✅ Real-time status monitoring
+- ✅ Complete documentation and setup guides
+- ✅ Best practices implementation
+
+**Clone and run:**
+
+```bash
+git clone https://github.com/yuno-payments/yuno-sdk-react-native-example.git
+cd yuno-sdk-react-native-example
+npm install
+
+# For Android
+npm run android
+
+# For iOS
+cd ios && pod install && cd ..
+npm run ios
+```
+
+## 🔧 Troubleshooting
+
+### Common Issues
+
+#### Android: Build Fails with "Could not resolve dependency"
+
+**Solution:** Ensure you've added the Yuno Maven repository to your `android/build.gradle`:
+
+```gradle
+maven { url "https://yunopayments.jfrog.io/artifactory/snapshots-libs-release" }
+```
+
+#### iOS: Pod Install Fails
+
+**Solution:**
+
+```bash
+cd ios
+rm -rf Pods Podfile.lock
+pod deintegrate
+pod install
+cd ..
+```
+
+#### "Yuno SDK is not initialized" Error
+
+**Solution:** Ensure you call `YunoSdk.initialize()` before any other SDK methods. For Android, also verify that `YunoSdkModule.initialize()` is called in your `MainApplication.onCreate()`.
+
+#### Payment Events Not Received
+
+**Solution:** Make sure you subscribe to events before starting the payment flow:
+
+```typescript
+useEffect(() => {
+  const subscription = YunoSdk.onPaymentStatus((state) => {
+    console.log('Payment status:', state.status);
+  });
+  
+  return () => subscription.remove();
+}, []);
+```
+
+#### Deep Links Not Working (iOS)
+
+**Solution:** Verify your `Info.plist` has the correct URL scheme configuration and that you're listening to the `Linking` events.
+
+### Debug Mode
+
+Enable debug logging:
+
+```typescript
+// Android: Check logcat
+adb logcat | grep -i yuno
+
+// iOS: Check Xcode console
+```
+
+### Getting Help
+
+1. Check the [Example App](https://github.com/yuno-payments/yuno-sdk-react-native-example)
+2. Review the [API Reference](#-api-reference)
+3. Search existing [GitHub Issues](https://github.com/yuno-payments/yuno-sdk-react-native/issues)
+4. Open a new [GitHub Issue](https://github.com/yuno-payments/yuno-sdk-react-native/issues/new)
 
 ## 🏗️ Project Structure
 
@@ -572,32 +1037,84 @@ s.dependency "YunoSDK", "x.x.x"
 yuno-sdk-react-native/
 ├── src/
 │   ├── core/
-│   │   ├── enums/          # TypeScript enums
-│   │   └── types/          # TypeScript type definitions
-│   ├── YunoSdk.ts          # Main SDK class
-│   └── index.ts            # Public API exports
-├── android/                # Android native implementation
-│   └── src/main/java/
-│       └── com/yunosdkreactnative/
-│           ├── YunoSdkModule.kt
-│           └── YunoSdkPackage.kt
-├── ios/                    # iOS native implementation
+│   │   ├── enums/
+│   │   │   ├── CardFlow.ts
+│   │   │   ├── YunoLanguage.ts
+│   │   │   └── YunoStatus.ts
+│   │   └── types/
+│   │       ├── YunoConfig.ts
+│   │       ├── StartPayment.ts
+│   │       ├── SeamlessArguments.ts
+│   │       └── EnrollmentArguments.ts
+│   ├── YunoSdk.ts              # Main SDK class
+│   ├── YunoPaymentMethods.tsx  # Payment methods component
+│   └── index.ts                # Public API exports
+├── android/                     # Android native implementation
+│   ├── build.gradle
+│   └── src/main/java/com/yunosdkreactnative/
+│       ├── YunoSdkModule.kt
+│       └── YunoSdkPackage.kt
+├── ios/                         # iOS native implementation
 │   ├── YunoSdk.swift
 │   ├── YunoSdk.m
 │   └── YunoSdk.podspec
-└── package.json
+├── package.json
+└── README.md
 ```
 
-## 📝 Contributing
+## 🤝 Contributing
 
-We welcome contributions! Please feel free to open issues or submit pull requests.
+We welcome contributions from the community! Here's how you can help:
 
 ### Development Setup
 
-1. Clone the repository
-2. Install dependencies: `yarn install`
-3. Run type checking: `yarn typecheck`
-4. Run linting: `yarn lint`
+1. **Fork and clone the repository:**
+
+```bash
+git clone https://github.com/yuno-payments/yuno-sdk-react-native.git
+cd yuno-sdk-react-native
+```
+
+2. **Install dependencies:**
+
+```bash
+npm install
+```
+
+3. **Run type checking:**
+
+```bash
+npm run typecheck
+```
+
+4. **Run linting:**
+
+```bash
+npm run lint
+```
+
+### Contribution Guidelines
+
+- Write clear, descriptive commit messages
+- Add tests for new features
+- Update documentation for API changes
+- Follow the existing code style
+- Open an issue before starting work on major changes
+
+### Submitting Changes
+
+1. Create a feature branch: `git checkout -b feature/my-feature`
+2. Make your changes and commit: `git commit -am 'Add new feature'`
+3. Push to your fork: `git push origin feature/my-feature`
+4. Open a Pull Request
+
+## 🔄 Versioning
+
+This project follows [Semantic Versioning](https://semver.org/):
+
+- **MAJOR**: Breaking changes
+- **MINOR**: New features (backwards compatible)
+- **PATCH**: Bug fixes (backwards compatible)
 
 ## 📄 License
 
@@ -605,17 +1122,33 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 ## 🔗 Links
 
-- [Yuno Website](https://www.y.uno/)
-- [Official Documentation](https://docs.y.uno/)
-- [GitHub Repository](https://github.com/yuno-payments/yuno-sdk-react-native)
+- **Website:** [https://www.y.uno/](https://www.y.uno/)
+- **Documentation:** [https://docs.y.uno/](https://docs.y.uno/)
+- **GitHub:** [https://github.com/yuno-payments/yuno-sdk-react-native](https://github.com/yuno-payments/yuno-sdk-react-native)
+- **Example App:** [https://github.com/yuno-payments/yuno-sdk-react-native-example](https://github.com/yuno-payments/yuno-sdk-react-native-example)
+- **npm Package:** [https://www.npmjs.com/package/@yuno/yuno-sdk-react-native](https://www.npmjs.com/package/@yuno/yuno-sdk-react-native)
 
 ## 💬 Support
 
-For issues, questions, or contributions, please open an issue in this repository.
+### Community Support
+
+For issues, questions, or feature requests:
+- 🐛 [Report a Bug](https://github.com/yuno-payments/yuno-sdk-react-native/issues/new?labels=bug)
+- 💡 [Request a Feature](https://github.com/yuno-payments/yuno-sdk-react-native/issues/new?labels=enhancement)
+- ❓ [Ask a Question](https://github.com/yuno-payments/yuno-sdk-react-native/discussions)
+
+### Enterprise Support
+
+For enterprise customers with support agreements:
+- 📧 Email: support@y.uno
+- 🌐 Visit: [https://www.y.uno/contact](https://www.y.uno/contact)
 
 ---
 
 <div align="center">
-Made with ❤️ by the Yuno Team
-</div>
 
+**Built with ❤️ by the Yuno Team**
+
+[Website](https://www.y.uno/) • [Documentation](https://docs.y.uno/) • [GitHub](https://github.com/yuno-payments)
+
+</div>