@yuno-payments/yuno-sdk-react-native 1.0.21 → 1.0.22

package/README.md

@@ -1,122 +1,85 @@
-# Yuno SDK for React Native
-
-<p align="center">
-  <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>
-</div>
-
-<br>
-
-> **⚠️ Open Source Project Notice**
+# React Native SDKs
+
+> ### ELF page size support
 > 
-> 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
-
-### 🔐 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
-
-## 📱 Platform 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:
+> The Yuno React Native SDK fully supports Google's 16 KB ELF page alignment requirements through its underlying Android SDK. All native libraries are built and verified for 16 KB memory pages, ensuring compatibility with Android 15 (API Level 35) and ARMv9 devices.
 
-```bash
-npm install @yuno/yuno-sdk-react-native
-```
+Yuno's React Native SDK is specifically designed to simplify the integration of payment processing functionality in your React Native applications for both Android and iOS platforms. Developers can implement features more efficiently, reducing the need for extensive knowledge of payment protocols and infrastructure.
+
+## Integrations
+
+Select one of the user-friendly React Native integration options available and kickstart your journey toward efficient payment processing:
+
+| Integration | Description |
+|-------------|-------------|
+| [Full SDK](#full-sdk-react-native) | Render the payment methods your company has available in the checkout and for user enrollment. |
+| [Lite SDK (Payment)](#lite-sdk-payment-react-native) | Control which payment methods will be shown to the user during checkout. |
+| [Lite SDK (Enrollment)](#lite-sdk-enrollment-react-native) | Simplify the user enrollment of payment methods. |
+| [Seamless Payment](#seamless-payment-react-native) | Headless flow for maximum UI control. |
+| [Headless SDK (Payment)](#headless-sdk-payment-react-native) | Customize the checkout without having to be PCI compliant. |
+| [Headless SDK (Enrollment)](#headless-sdk-enrollment-react-native) | Customize the enrollment of new payment methods. |
+---
+
+# Requirements
+
+To use the Yuno React Native SDK, you need to meet the following requirements:
+
+## General Requirements
+
+| Requirement | Version |
+|-------------|---------|
+| **Node.js** | 16.0.0 or above |
+| **React Native** | 0.70 or above |
+
+## Android Requirements
+
+| Requirement | Version |
+|-------------|---------|
+| **Minimum SDK Version** | 21 or above (Android 5.0) |
+| **Target SDK Version** | 33 or above |
+| **Java Version** | 17 |
+| **Kotlin Version** | 1.9.24 or above |
+| **Android Gradle Plugin** | 8.1.0 or above |
+| **Jetpack Compose** | Required for native views |
+
+## iOS Requirements
+
+| Requirement | Version |
+|-------------|---------|
+| **Minimum iOS Version** | 14.0 or above |
+| **Swift Version** | 5.0 or above |
+| **Xcode** | 14.0 or above |
+
+## SDK Dependencies
 
-or
+The React Native SDK depends on the following native SDKs:
+
+| Platform | SDK | Version |
+|----------|-----|---------|
+| Android | `com.yuno.payments:android-sdk` | 2.8.1 |
+| iOS | `YunoSDK` | 2.9.0 |
+
+---
+
+# Installation
+
+## Step 1: Install the Package
+
+Install the Yuno SDK package using npm or yarn:
 
 ```bash
-yarn add @yuno/yuno-sdk-react-native
+# Using npm
+npm install @yuno-payments/yuno-sdk-react-native
+
+# Using yarn
+yarn add @yuno-payments/yuno-sdk-react-native
 ```
 
-## ⚙️ Setup
+## Step 2: Platform-Specific Setup
 
 ### Android Setup
 
-#### Step 1: Add Yuno Maven Repository
+#### 2.1 Add Yuno Maven Repository
 
 Update your project-level `android/build.gradle`:
 
@@ -134,9 +97,28 @@ allprojects {
 }
 ```
 
-#### Step 2: Initialize SDK in Application Class
+#### 2.2 Set Minimum SDK Version
+
+Ensure your `android/app/build.gradle` has the correct minimum SDK:
+
+```gradle
+android {
+    defaultConfig {
+        minSdkVersion 21
+        targetSdkVersion 33
+        // ...
+    }
+    
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+}
+```
+
+#### 2.3 Initialize SDK in Application Class
 
-Create or update your `android/app/src/main/java/[your-package]/MainApplication.kt`:
+Update your `android/app/src/main/java/[your-package]/MainApplication.kt`:
 
 ```kotlin
 package com.yourapp
@@ -163,9 +145,7 @@ class MainApplication : Application(), ReactApplication {
                 }
 
             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
         }
@@ -179,10 +159,7 @@ class MainApplication : Application(), ReactApplication {
         // Initialize Yuno SDK
         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
+            apiKey = "YOUR_YUNO_API_KEY"
         )
         
         SoLoader.init(this, false)
@@ -193,29 +170,23 @@ class MainApplication : Application(), ReactApplication {
 }
 ```
 
-#### Step 3: Set Minimum SDK Version
+### iOS Setup
 
-Ensure your `android/app/build.gradle` has the correct minimum SDK:
+#### 2.1 Install CocoaPods Dependencies
 
-```gradle
-android {
-    defaultConfig {
-        minSdkVersion 21
-        targetSdkVersion 33
-        // ...
-    }
-}
+```bash
+cd ios && pod install && cd ..
 ```
 
-### iOS Setup
+#### 2.2 Set Minimum iOS Version
 
-#### Step 1: Install CocoaPods Dependencies
+Ensure your `ios/Podfile` has the correct minimum iOS version:
 
-```bash
-cd ios && pod install && cd ..
+```ruby
+platform :ios, '14.0'
 ```
 
-#### Step 2: Configure Deep Links (Optional)
+#### 2.3 Configure Deep Links (Optional)
 
 If you need to handle payment redirects, update your `ios/[YourApp]/Info.plist`:
 
@@ -235,83 +206,16 @@ If you need to handle payment redirects, update your `ios/[YourApp]/Info.plist`:
 </array>
 ```
 
-#### Step 3: Set Deployment Target
-
-Ensure your `ios/Podfile` has the correct minimum iOS version:
-
-```ruby
-platform :ios, '14.0'
-```
-
-## 🚀 Quick Start
-
-Here's a minimal example to get you started:
-
-```typescript
-import React, { useEffect } from 'react';
-import { View, Button, Alert } from 'react-native';
-import { YunoSdk, YunoLanguage, CardFlow, YunoStatus } from '@yuno/yuno-sdk-react-native';
-
-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;
-```
+---
 
-## 📚 Usage
+# SDK Initialization
 
-### 1. Initialize the SDK
+Before using any SDK features, you must initialize the SDK in your React Native application.
 
-Initialize the SDK at the start of your app (typically in your root component):
+## Initialize Method
 
 ```typescript
-import { YunoSdk, YunoLanguage, CardFlow } from '@yuno/yuno-sdk-react-native';
+import { YunoSdk, CardFlow } from '@yuno-payments/yuno-sdk-react-native';
 
 const initializeYuno = async () => {
   try {
@@ -319,7 +223,7 @@ const initializeYuno = async () => {
       apiKey: 'YOUR_YUNO_API_KEY',
       countryCode: 'US', // ISO 3166-1 alpha-2 country code
       yunoConfig: {
-        lang: YunoLanguage.EN,
+        language: 'en',
         cardFlow: CardFlow.ONE_STEP,
         saveCardEnabled: true,
         keepLoader: false,
@@ -333,15 +237,77 @@ const initializeYuno = async () => {
 };
 ```
 
-### 2. Subscribe to Payment Events
+## Initialization Parameters
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `apiKey` | `string` | ✓ | Your Yuno API key from the Dashboard |
+| `countryCode` | `string` | ✓ | ISO 3166-1 alpha-2 country code (e.g., 'US', 'BR', 'CO') |
+| `yunoConfig` | `YunoConfig` | | SDK configuration options |
+| `iosConfig` | `IosConfig` | | iOS-specific configuration |
+| `androidConfig` | `AndroidConfig` | | Android-specific configuration |
+
+## YunoConfig Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `language` | `string` | `'en'` | UI language code. See [Supported Languages](#supported-languages) |
+| `cardFlow` | `CardFlow` | `ONE_STEP` | Card input flow type (`ONE_STEP` or `STEP_BY_STEP`) |
+| `saveCardEnabled` | `boolean` | `false` | Enable the save card checkbox |
+| `keepLoader` | `boolean` | `false` | Keep loader visible after operations |
+| `isDynamicViewEnabled` | `boolean` | `false` | Enable dynamic views |
+| `cardFormDeployed` | `boolean` | `false` | Card form deployed state |
+
+## Supported Languages
+
+The SDK supports the following languages:
+
+| Code | Language |
+|------|----------|
+| `en` | English |
+| `es` | Spanish |
+| `pt` | Portuguese |
+| `fr` | French |
+| `de` | German |
+| `it` | Italian |
+| `id` | Indonesian |
+| `ms` | Malay |
+| `pl` | Polish |
+| `ru` | Russian |
+| `tr` | Turkish |
+| `nl` | Dutch |
+| `sv` | Swedish |
+| `th` | Thai |
+| `fil` | Filipino |
+| `vi` | Vietnamese |
+| `zh-cn` | Chinese (Simplified) |
+| `zh-tw` | Chinese (Traditional) |
+
+---
+
+# Full SDK (React Native)
+
+The Full SDK integration provides a complete payment UI managed by the SDK. This is the quickest way to integrate Yuno into your React Native application.
+
+## Prerequisites
+
+Before starting the Full SDK integration, ensure you have:
+
+1. Completed the [Installation](#installation) steps
+2. Initialized the SDK with `YunoSdk.initialize()`
+3. Created a checkout session from your backend
 
-Listen to payment status updates in real-time:
+## Implementation
+
+### Step 1: Subscribe to Payment Events
+
+Set up event listeners before starting the payment flow:
 
 ```typescript
-import { YunoSdk, YunoStatus } from '@yuno/yuno-sdk-react-native';
+import { YunoSdk, YunoStatus } from '@yuno-payments/yuno-sdk-react-native';
 import { useEffect } from 'react';
 
-function PaymentComponent() {
+function PaymentScreen() {
   useEffect(() => {
     // Listen to payment status changes
     const paymentSubscription = YunoSdk.onPaymentStatus((state) => {
@@ -363,7 +329,7 @@ function PaymentComponent() {
           // Handle rejection
           break;
           
-        case YunoStatus.CANCELLED:
+        case YunoStatus.CANCELLED_BY_USER:
           console.log('⚠️ Payment cancelled by user');
           // Return to previous screen
           break;
@@ -384,7 +350,6 @@ function PaymentComponent() {
     const tokenSubscription = YunoSdk.onOneTimeToken((token) => {
       console.log('Received OTT:', token);
       // Send token to your backend for payment processing
-      sendTokenToBackend(token);
     });
     
     // Cleanup subscriptions
@@ -393,21 +358,66 @@ function PaymentComponent() {
       tokenSubscription.remove();
     };
   }, []);
-  
+
   return (
-    // Your UI
+    // Your payment UI
   );
 }
 ```
 
-### 3. Start Full Payment Flow
+### Step 2: Display Payment Methods
 
-The full payment flow provides a complete UI managed by the SDK:
+Use the `YunoPaymentMethods` component to display available payment methods:
 
-```typescript
-import { YunoSdk } from '@yuno/yuno-sdk-react-native';
+```tsx
+import { YunoPaymentMethods } from '@yuno-payments/yuno-sdk-react-native';
+import { useState } from 'react';
+import { View, Button, StyleSheet } from 'react-native';
+
+function CheckoutScreen() {
+  const [checkoutSession] = useState('your_checkout_session_id');
+  const [isMethodSelected, setIsMethodSelected] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <YunoPaymentMethods
+        checkoutSession={checkoutSession}
+        countryCode="BR"
+        onPaymentMethodSelected={(event) => {
+          setIsMethodSelected(event.isSelected);
+        }}
+        onPaymentMethodError={(event) => {
+          console.error('Error loading payment methods:', event.message);
+        }}
+        style={styles.paymentMethods}
+      />
+      
+      <Button
+        title="Pay Now"
+        disabled={!isMethodSelected}
+        onPress={handlePayment}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  paymentMethods: {
+    height: 400,
+  },
+});
+```
+
+### Step 3: Start Payment
+
+Trigger the payment flow when the user is ready:
 
-const handleFullPayment = async () => {
+```typescript
+const handlePayment = async () => {
   try {
     await YunoSdk.startPayment(true); // true = show payment status screen
     console.log('Payment flow started');
@@ -417,12 +427,24 @@ const handleFullPayment = async () => {
 };
 ```
 
-### 4. Payment Lite Flow
+## startPayment Parameters
+
+| Parameter | Type | Required | Default | Description |
+|-----------|------|----------|---------|-------------|
+| `showPaymentStatus` | `boolean` | ✓ | - | Whether to show the payment status screen after completion |
+
+---
+
+# Lite SDK (Payment React Native)
+
+The Lite SDK provides more control over the payment flow by allowing you to specify which payment method to use.
 
-Use Payment Lite when you have a pre-selected payment method:
+## Implementation
+
+### Step 1: Start Payment Lite
 
 ```typescript
-import { YunoSdk } from '@yuno/yuno-sdk-react-native';
+import { YunoSdk } from '@yuno-payments/yuno-sdk-react-native';
 
 const handlePaymentLite = async () => {
   try {
@@ -444,384 +466,429 @@ const handlePaymentLite = async () => {
 };
 ```
 
-### 5. Seamless Payment Flow
+## startPaymentLite Parameters
 
-The seamless flow gives you complete control over the UI:
+### StartPayment Object
 
-```typescript
-import { YunoSdk, YunoStatus } from '@yuno/yuno-sdk-react-native';
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `checkoutSession` | `string` | ✓ | Checkout session token from your backend |
+| `methodSelected` | `MethodSelected` | ✓ | Selected payment method details |
+| `showPaymentStatus` | `boolean` | | Show payment status screen (default: `true`) |
 
-const handleSeamlessPayment = async () => {
-  try {
-    const status = await YunoSdk.startPaymentSeamlessLite({
-      checkoutSession: 'checkout_session_token',
-      countryCode: 'US',
-      methodSelected: {
-        vaultedToken: 'payment_method_token',
-        paymentMethodType: 'CARD',
-      },
-      showPaymentStatus: false, // You handle the UI
-    });
-    
-    console.log('Seamless payment status:', status);
-    
-    if (status === YunoStatus.SUCCEEDED) {
-      // 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);
-  }
-};
-```
+### MethodSelected Object
 
-### 6. Enrollment Flow
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `vaultedToken` | `string` | ✓ | Saved payment method token |
+| `paymentMethodType` | `string` | ✓ | Payment method type (e.g., `'CARD'`, `'PIX'`) |
+
+---
 
-Allow users to save payment methods without making a payment:
+# Lite SDK (Enrollment React Native)
+
+The Enrollment SDK allows users to save payment methods without making a payment.
+
+## Implementation
+
+### Step 1: Subscribe to Enrollment Events
 
 ```typescript
-import { YunoSdk, YunoStatus } from '@yuno/yuno-sdk-react-native';
+import { YunoSdk, YunoStatus } from '@yuno-payments/yuno-sdk-react-native';
 import { useEffect } from 'react';
 
 function EnrollmentScreen() {
   useEffect(() => {
-    // Listen to enrollment status
     const subscription = YunoSdk.onEnrollmentStatus((state) => {
       console.log('Enrollment Status:', state.status);
       
       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 startEnrollment = async () => {
-    try {
-      await YunoSdk.enrollmentPayment({
-        customerSession: 'customer_session_token_from_backend',
-        countryCode: 'US',
-        showEnrollmentStatus: true,
-      });
-      console.log('Enrollment flow started');
-    } catch (error) {
-      console.error('Enrollment error:', error);
-    }
-  };
-  
-  return (
-    // Your enrollment UI
-  );
-}
-```
-
-### 7. Handle Deep Links
-
-For payment methods that redirect to external apps or browsers:
-
-```typescript
-import { YunoSdk } from '@yuno/yuno-sdk-react-native';
-import { Linking } from 'react-native';
-import { useEffect } from 'react';
 
-function App() {
-  useEffect(() => {
-    // Handle initial URL (app was opened from a closed state)
-    Linking.getInitialURL().then((url) => {
-      if (url) {
-        handleDeepLink(url);
-      }
-    });
-    
-    // Handle URL changes (app is running)
-    const subscription = Linking.addEventListener('url', (event) => {
-      handleDeepLink(event.url);
-    });
-    
-    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
+    // Your enrollment UI
   );
 }
 ```
 
-### 8. Continue Payment
-
-Resume a previously started payment:
+### Step 2: Start Enrollment
 
 ```typescript
-import { YunoSdk } from '@yuno/yuno-sdk-react-native';
-
-const continueExistingPayment = async () => {
+const startEnrollment = async () => {
   try {
-    await YunoSdk.continuePayment(
-      'checkout_session_token',
-      'US',
-      true // show payment status
-    );
-    console.log('Payment continued');
+    await YunoSdk.enrollmentPayment({
+      customerSession: 'customer_session_token_from_backend',
+      countryCode: 'US',
+      showPaymentStatus: true,
+    });
+    console.log('Enrollment flow started');
   } catch (error) {
-    console.error('Error continuing payment:', error);
+    console.error('Enrollment error:', error);
   }
 };
 ```
 
-### 9. Hide Loader
+## enrollmentPayment Parameters
 
-Manually hide the SDK loader when needed:
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `customerSession` | `string` | ✓ | Customer session token from your backend |
+| `countryCode` | `string` | | Country code (uses initialized value if not provided) |
+| `showPaymentStatus` | `boolean` | | Show enrollment status (default: `true`) |
 
-```typescript
-import { YunoSdk } from '@yuno/yuno-sdk-react-native';
+---
 
-const hidePaymentLoader = async () => {
-  try {
-    await YunoSdk.hideLoader();
-    console.log('Loader hidden');
-  } catch (error) {
-    console.error('Error hiding loader:', error);
-  }
-};
-```
+# Seamless Payment (React Native)
 
-## 📖 API Reference
+The Seamless Payment flow provides maximum control over the UI while still leveraging the SDK for secure payment processing.
 
-### YunoSdk
+## Implementation
 
-The main class for interacting with the Yuno SDK.
-
-#### Static Methods
-
-##### `initialize(params: YunoInitParams): Promise<void>`
+```typescript
+import { YunoSdk, YunoStatus } from '@yuno-payments/yuno-sdk-react-native';
 
-Initializes the Yuno SDK with your configuration.
+const handleSeamlessPayment = async () => {
+  try {
+    const status = await YunoSdk.startPaymentSeamlessLite({
+      checkoutSession: 'checkout_session_token',
+      countryCode: 'US',
+      methodSelected: {
+        vaultedToken: 'payment_method_token',
+        paymentMethodType: 'CARD',
+      },
+      showPaymentStatus: false, // You handle the UI
+    });
+    
+    console.log('Seamless payment status:', status);
+    
+    if (status === YunoStatus.SUCCEEDED) {
+      navigateToSuccess();
+    } else if (status === YunoStatus.PROCESSING) {
+      showProcessingState();
+    } else {
+      handlePaymentError(status);
+    }
+  } catch (error) {
+    console.error('Seamless payment error:', error);
+  }
+};
+```
 
-**Parameters:**
+## startPaymentSeamlessLite Parameters
 
 | 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 |
+| `checkoutSession` | `string` | ✓ | Checkout session token |
+| `countryCode` | `string` | | Country code |
+| `methodSelected` | `MethodSelected` | ✓ | Payment method details |
+| `showPaymentStatus` | `boolean` | | Show status screen (default: `false`) |
 
-**YunoConfig:**
+**Returns:** `Promise<YunoStatus>` - The payment status after completion
 
-| 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 |
+---
 
-**Example:**
+# Headless SDK (Payment React Native)
 
-```typescript
-await YunoSdk.initialize({
-  apiKey: 'your_api_key',
-  countryCode: 'US',
-  yunoConfig: {
-    lang: YunoLanguage.EN,
-    cardFlow: CardFlow.ONE_STEP,
-    saveCardEnabled: true,
-  },
-});
-```
+The Headless SDK provides complete control over the UI while using the SDK for secure tokenization and 3D Secure handling.
 
----
+## Generate Token
 
-##### `startPayment(showPaymentStatus: boolean): Promise<void>`
+Use `generateToken` to tokenize payment data without the SDK UI:
 
-Starts the full payment flow with Yuno's built-in UI.
+```typescript
+import { YunoSdk, CardType } from '@yuno-payments/yuno-sdk-react-native';
 
-**Parameters:**
+const handleHeadlessPayment = async () => {
+  try {
+    const result = await YunoSdk.generateToken(
+      {
+        checkoutSession: 'checkout_session_id',
+        paymentMethod: {
+          type: 'CARD',
+          vaultedToken: null,
+          card: {
+            save: false,
+            detail: {
+              expirationMonth: 11,
+              expirationYear: 25,
+              number: '4000000000001091',
+              securityCode: '123',
+              holderName: 'John Doe',
+              type: CardType.CREDIT,
+            },
+          },
+        },
+      },
+      'checkout_session_id',
+      'BR'
+    );
 
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `showPaymentStatus` | `boolean` | Yes | Whether to show the payment status screen |
+    console.log('Token:', result.token);
+    
+    // Send token to your backend for payment processing
+    await processPaymentOnBackend(result.token);
+  } catch (error) {
+    console.error('Token generation failed:', error);
+  }
+};
+```
 
-**Example:**
+## Handle 3D Secure Challenge
+
+After generating a token, handle 3D Secure verification if required:
 
 ```typescript
-await YunoSdk.startPayment(true);
+const handle3DSChallenge = async (checkoutSession: string) => {
+  try {
+    const challengeResult = await YunoSdk.getThreeDSecureChallenge(
+      checkoutSession,
+      'BR'
+    );
+
+    if (challengeResult.type === 'URL') {
+      console.log('3DS URL:', challengeResult.data);
+      // Open this URL in a WebView for the user to complete 3DS verification
+      open3DSWebView(challengeResult.data);
+    }
+  } catch (error) {
+    console.error('3DS challenge failed:', error);
+  }
+};
 ```
 
----
+## TokenCollectedData Structure
 
-##### `startPaymentLite(params: StartPayment, countryCode?: string): Promise<void>`
+### PaymentMethod Object
 
-Starts a lightweight payment flow for pre-selected payment methods.
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `type` | `string` | ✓ | Payment method type (e.g., `'CARD'`) |
+| `vaultedToken` | `string \| null` | | Token for saved payment method |
+| `card` | `CardData` | | Card details (required for new cards) |
+| `customer` | `Customer` | | Customer information |
 
-**Parameters:**
+### CardData Object
 
-| 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 |
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `save` | `boolean` | | Save card for future use |
+| `detail` | `Detail` | | Card details |
+| `installment` | `Installment` | | Installment information |
 
-**Example:**
+### Detail Object
 
-```typescript
-await YunoSdk.startPaymentLite({
-  checkoutSession: 'session_token',
-  methodSelected: {
-    vaultedToken: 'payment_token',
-    paymentMethodType: 'CARD',
-  },
-  showPaymentStatus: true,
-});
-```
+| Property | Type | Description |
+|----------|------|-------------|
+| `expirationMonth` | `number` | Card expiration month (1-12) |
+| `expirationYear` | `number` | Card expiration year (2 digits) |
+| `number` | `string` | Card number |
+| `securityCode` | `string` | CVV/CVC |
+| `holderName` | `string` | Cardholder name |
+| `type` | `CardType` | `CREDIT` or `DEBIT` |
 
 ---
 
-##### `startPaymentSeamlessLite(params: SeamlessArguments): Promise<YunoStatus>`
+# Headless SDK (Enrollment React Native)
 
-Starts a seamless (headless) payment flow without Yuno's UI.
+The Headless Enrollment SDK allows you to save payment methods with complete UI control.
 
-**Parameters:**
+## Continue Enrollment
 
-| 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
+```typescript
+import { YunoSdk, CardType } from '@yuno-payments/yuno-sdk-react-native';
 
-**Example:**
+const handleHeadlessEnrollment = async () => {
+  try {
+    const result = await YunoSdk.continueEnrollment(
+      {
+        customerSession: 'customer_session_id',
+        paymentMethod: {
+          type: 'CARD',
+          card: {
+            save: true,
+            detail: {
+              expirationMonth: 11,
+              expirationYear: 25,
+              number: '4000000000001091',
+              securityCode: '123',
+              holderName: 'John Doe',
+              type: CardType.CREDIT,
+            },
+          },
+        },
+      },
+      'customer_session_id',
+      'BR'
+    );
 
-```typescript
-const status = await YunoSdk.startPaymentSeamlessLite({
-  checkoutSession: 'session_token',
-  countryCode: 'US',
-  methodSelected: {
-    vaultedToken: 'payment_token',
-    paymentMethodType: 'CARD',
-  },
-  showPaymentStatus: false,
-});
+    console.log('Vaulted Token:', result.vaultedToken);
+  } catch (error) {
+    console.error('Enrollment failed:', error);
+  }
+};
 ```
 
----
+## EnrollmentCollectedData Structure
 
-##### `enrollmentPayment(params: EnrollmentArguments): Promise<void>`
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `customerSession` | `string` | ✓ | Customer session ID |
+| `paymentMethod` | `EnrollmentMethod` | ✓ | Payment method details |
 
-Starts the enrollment flow to save a payment method.
+---
 
-**Parameters:**
+# YunoPaymentMethods Component
 
-| 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) |
+A native component that displays available payment methods using the Yuno SDK.
 
-**Example:**
+## Usage
 
-```typescript
-await YunoSdk.enrollmentPayment({
-  customerSession: 'customer_session_token',
-  countryCode: 'US',
-  showEnrollmentStatus: true,
-});
+```tsx
+import { YunoPaymentMethods } from '@yuno-payments/yuno-sdk-react-native';
+
+<YunoPaymentMethods
+  checkoutSession="your_checkout_session_id"
+  countryCode="BR"
+  onPaymentMethodSelected={(event) => {
+    console.log('Method selected:', event.isSelected);
+  }}
+  onPaymentMethodError={(event) => {
+    console.error('Error:', event.message);
+  }}
+  style={{ height: 400 }}
+  testID="payment-methods"
+/>
 ```
 
----
+## Props
 
-##### `continuePayment(checkoutSession: string, countryCode: string, showPaymentStatus: boolean): Promise<void>`
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `checkoutSession` | `string` | ✓ | Checkout session ID from Yuno API |
+| `countryCode` | `string` | ✓ | ISO country code (e.g., 'US', 'BR', 'CO') |
+| `onPaymentMethodSelected` | `(event) => void` | | Callback when payment method is selected/deselected |
+| `onPaymentMethodError` | `(event) => void` | | Callback when an error occurs |
+| `style` | `ViewStyle` | | Custom styles for the container |
+| `testID` | `string` | | Test ID for automation tools |
 
-Continues a previously started payment.
+## Events
 
-**Example:**
+### PaymentMethodSelectedEvent
 
 ```typescript
-await YunoSdk.continuePayment('session_token', 'US', true);
+interface PaymentMethodSelectedEvent {
+  isSelected: boolean; // Whether a payment method is currently selected
+}
 ```
 
----
+### PaymentMethodErrorEvent
 
-##### `hideLoader(): Promise<void>`
+```typescript
+interface PaymentMethodErrorEvent {
+  message: string; // Error message
+}
+```
 
-Hides the Yuno SDK loader.
+---
+
+# Continue Payment
 
-**Example:**
+Resume a previously started payment that was interrupted:
 
 ```typescript
-await YunoSdk.hideLoader();
+await YunoSdk.continuePayment(
+  'checkout_session_token',
+  'US', // Country code
+  true  // Show payment status
+);
 ```
 
 ---
 
-##### `receiveDeeplink(url: string): Promise<void>`
+# Handle Deep Links
 
-Handles deep link redirects for payment flows.
-
-**Example:**
+For payment methods that redirect to external apps or browsers (iOS only):
 
 ```typescript
-await YunoSdk.receiveDeeplink('yourapp://payment/callback');
+import { YunoSdk } from '@yuno-payments/yuno-sdk-react-native';
+import { Linking } from 'react-native';
+import { useEffect } from 'react';
+
+function App() {
+  useEffect(() => {
+    // Handle initial URL (app was opened from a closed state)
+    Linking.getInitialURL().then((url) => {
+      if (url) {
+        handleDeepLink(url);
+      }
+    });
+    
+    // Handle URL changes (app is running)
+    const subscription = Linking.addEventListener('url', (event) => {
+      handleDeepLink(event.url);
+    });
+    
+    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
+  );
+}
 ```
 
 ---
 
-##### `onPaymentStatus(callback: (state: PaymentState) => void): Subscription`
+# Event Subscriptions
 
-Subscribes to payment status updates.
+The SDK provides several event subscriptions for real-time status updates.
 
-**Returns:** Subscription object with `remove()` method
+## onPaymentStatus
 
-**Example:**
+Listen to payment status changes:
 
 ```typescript
 const subscription = YunoSdk.onPaymentStatus((state) => {
-  console.log('Payment status:', state.status);
+  console.log('Status:', state.status);
+  console.log('Token:', state.token);
 });
 
-// Later, unsubscribe
+// Later, remove the listener
 subscription.remove();
 ```
 
----
-
-##### `onEnrollmentStatus(callback: (state: EnrollmentState) => void): Subscription`
+### YunoPaymentState
 
-Subscribes to enrollment status updates.
+```typescript
+interface YunoPaymentState {
+  token?: string;      // One-time token (if available)
+  status: YunoStatus;  // Payment status
+}
+```
 
-**Returns:** Subscription object with `remove()` method
+## onEnrollmentStatus
 
-**Example:**
+Listen to enrollment status changes:
 
 ```typescript
 const subscription = YunoSdk.onEnrollmentStatus((state) => {
@@ -829,72 +896,111 @@ const subscription = YunoSdk.onEnrollmentStatus((state) => {
 });
 ```
 
----
-
-##### `onOneTimeToken(callback: (token: string) => void): Subscription`
+### YunoEnrollmentState
 
-Subscribes to one-time token (OTT) events.
+```typescript
+interface YunoEnrollmentState {
+  status: YunoStatus;  // Enrollment status
+}
+```
 
-**Returns:** Subscription object with `remove()` method
+## onOneTimeToken
 
-**Example:**
+Listen to one-time token generation:
 
 ```typescript
 const subscription = YunoSdk.onOneTimeToken((token) => {
-  console.log('Received OTT:', token);
-  // Send to your backend
+  console.log('Token:', token);
 });
 ```
 
----
+## onOneTimeTokenInfo
 
-### Enums
+Listen to extended token information:
 
-#### YunoLanguage
+```typescript
+const subscription = YunoSdk.onOneTimeTokenInfo((tokenInfo) => {
+  console.log('Token:', tokenInfo.token);
+  console.log('Card Brand:', tokenInfo.cardData?.brand);
+  console.log('Customer Email:', tokenInfo.customer?.email);
+});
+```
 
-Supported languages for the SDK UI.
+### OneTimeTokenInfo
 
 ```typescript
-enum YunoLanguage {
-  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)
+interface OneTimeTokenInfo {
+  token?: string;
+  vaultedToken?: string;
+  vaultOnSuccess?: boolean;
+  type?: string;
+  cardData?: CardInformation;
+  customer?: CustomerPayerInformation;
 }
 ```
 
-#### YunoStatus
+---
+
+# Utility Methods
+
+## hideLoader
 
-Payment and enrollment status values.
+Manually hide the SDK loader:
+
+```typescript
+await YunoSdk.hideLoader();
+```
+
+## getLastOneTimeToken
+
+Get the last generated OTT:
+
+```typescript
+const lastOtt = await YunoSdk.getLastOneTimeToken();
+```
+
+## getLastOneTimeTokenInfo
+
+Get extended information about the last OTT:
+
+```typescript
+const tokenInfo = await YunoSdk.getLastOneTimeTokenInfo();
+```
+
+## clearLastOneTimeToken
+
+Clear stored OTT data:
+
+```typescript
+await YunoSdk.clearLastOneTimeToken();
+```
+
+## clearLastPaymentStatus
+
+Clear stored payment status:
+
+```typescript
+await YunoSdk.clearLastPaymentStatus();
+```
+
+---
+
+# Enums
+
+## YunoStatus
 
 ```typescript
 enum YunoStatus {
-  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
+  REJECTED = 'REJECTED',           // Payment/operation was rejected
+  SUCCEEDED = 'SUCCEEDED',         // Payment/operation succeeded
+  FAILED = 'FAILED',               // Payment/operation failed
+  PROCESSING = 'PROCESSING',       // Payment is being processed
   INTERNAL_ERROR = 'INTERNAL_ERROR', // Internal error occurred
+  CANCELLED_BY_USER = 'CANCELLED_BY_USER', // Cancelled by user
 }
 ```
 
-#### CardFlow
-
-Card input flow types.
+## CardFlow
 
 ```typescript
 enum CardFlow {
@@ -903,75 +1009,166 @@ enum CardFlow {
 }
 ```
 
----
-
-### Types
-
-#### PaymentState
+## CardType
 
 ```typescript
-interface PaymentState {
-  status: YunoStatus;
-  token?: string; // One-time token (if available)
+enum CardType {
+  CREDIT = 'CREDIT',
+  DEBIT = 'DEBIT',
 }
 ```
 
-#### EnrollmentState
+## YunoLanguage
 
 ```typescript
-interface EnrollmentState {
-  status: YunoStatus;
+enum YunoLanguage {
+  EN = 'EN',       // English
+  ES = 'ES',       // Spanish
+  PT = 'PT',       // Portuguese
+  ID = 'ID',       // Indonesian
+  MY = 'MY',       // Malay
+  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)
 }
 ```
 
-## 🎯 TypeScript Support
+---
 
-This SDK is written in TypeScript and includes complete type definitions. No additional `@types` packages are needed.
+# Complete Example
 
-```typescript
-import type {
-  YunoLanguage,
+Here's a complete implementation example:
+
+```tsx
+import React, { useEffect, useState } from 'react';
+import { View, Button, Alert, StyleSheet } from 'react-native';
+import {
+  YunoSdk,
+  YunoPaymentMethods,
   YunoStatus,
   CardFlow,
-  YunoConfig,
-  StartPayment,
-  SeamlessArguments,
-  EnrollmentArguments,
-} from '@yuno/yuno-sdk-react-native';
-```
+} from '@yuno-payments/yuno-sdk-react-native';
 
-## 📱 Example App
+function PaymentScreen() {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [checkoutSession, setCheckoutSession] = useState('');
+  const [isMethodSelected, setIsMethodSelected] = useState(false);
 
-A complete example application is available in the [`yuno-sdk-react-native-example`](https://github.com/yuno-payments/yuno-sdk-react-native-example) repository.
+  useEffect(() => {
+    initializeYuno();
+    
+    // Set up event listeners
+    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. Please try again.');
+      }
+    });
+    
+    const tokenSubscription = YunoSdk.onOneTimeToken((token) => {
+      console.log('OTT received:', token);
+      // Send to backend
+    });
+    
+    return () => {
+      paymentSubscription.remove();
+      tokenSubscription.remove();
+    };
+  }, []);
 
-The example app includes:
+  const initializeYuno = async () => {
+    try {
+      await YunoSdk.initialize({
+        apiKey: 'YOUR_API_KEY',
+        countryCode: 'US',
+        yunoConfig: {
+          language: 'en',
+          cardFlow: CardFlow.ONE_STEP,
+          saveCardEnabled: true,
+        },
+      });
+      setIsInitialized(true);
+      
+      // Fetch checkout session from your backend
+      const session = await fetchCheckoutSession();
+      setCheckoutSession(session);
+    } catch (error) {
+      console.error('Initialization error:', error);
+    }
+  };
 
-- ✅ Full SDK integration with all payment flows
-- ✅ Modern, production-ready UI
-- ✅ Real-time status monitoring
-- ✅ Complete documentation and setup guides
-- ✅ Best practices implementation
+  const handlePayment = async () => {
+    try {
+      await YunoSdk.startPayment(true);
+    } catch (error) {
+      console.error('Payment error:', error);
+    }
+  };
 
-**Clone and run:**
+  if (!isInitialized || !checkoutSession) {
+    return null; // Or loading indicator
+  }
 
-```bash
-git clone https://github.com/yuno-payments/yuno-sdk-react-native-example.git
-cd yuno-sdk-react-native-example
-npm install
+  return (
+    <View style={styles.container}>
+      <YunoPaymentMethods
+        checkoutSession={checkoutSession}
+        countryCode="US"
+        onPaymentMethodSelected={(event) => {
+          setIsMethodSelected(event.isSelected);
+        }}
+        onPaymentMethodError={(event) => {
+          Alert.alert('Error', event.message);
+        }}
+        style={styles.paymentMethods}
+      />
+      
+      <Button
+        title="Pay Now"
+        disabled={!isMethodSelected}
+        onPress={handlePayment}
+      />
+    </View>
+  );
+}
 
-# For Android
-npm run android
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  paymentMethods: {
+    flex: 1,
+    marginBottom: 16,
+  },
+});
 
-# For iOS
-cd ios && pod install && cd ..
-npm run ios
+export default PaymentScreen;
 ```
 
-## 🔧 Troubleshooting
+---
+
+# Troubleshooting
+
+## Common Issues
 
-### Common Issues
+### "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()`.
 
-#### Android: Build Fails with "Could not resolve dependency"
+### Android: Build Fails with "Could not resolve dependency"
 
 **Solution:** Ensure you've added the Yuno Maven repository to your `android/build.gradle`:
 
@@ -979,7 +1176,7 @@ npm run ios
 maven { url "https://yunopayments.jfrog.io/artifactory/snapshots-libs-release" }
 ```
 
-#### iOS: Pod Install Fails
+### iOS: Pod Install Fails
 
 **Solution:**
 
@@ -991,11 +1188,7 @@ 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
+### Payment Events Not Received
 
 **Solution:** Make sure you subscribe to events before starting the payment flow:
 
@@ -1009,146 +1202,45 @@ useEffect(() => {
 }, []);
 ```
 
-#### Deep Links Not Working (iOS)
+### 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
+## 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
-
-```
-yuno-sdk-react-native/
-├── src/
-│   ├── core/
-│   │   ├── 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
-└── README.md
-```
-
-## 🤝 Contributing
-
-We welcome contributions from the community! Here's how you can help:
-
-### Development Setup
-
-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:**
+# Android: Check logcat
+adb logcat | grep -i yuno
 
-```bash
-npm run lint
+# iOS: Check Xcode console
 ```
 
-### 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
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-
-## 🔗 Links
-
-- **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
-
-### 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">
-
-**Built with ❤️ by the Yuno Team**
-
-[Website](https://www.y.uno/) • [Documentation](https://docs.y.uno/) • [GitHub](https://github.com/yuno-payments)
-
-</div>
+# API Reference Summary
+
+## YunoSdk Methods
+
+| Method | Description |
+|--------|-------------|
+| `initialize(params)` | Initialize the SDK |
+| `startPayment(showStatus)` | Start full payment flow |
+| `startPaymentLite(params, countryCode?)` | Start lite payment flow |
+| `startPaymentSeamlessLite(params)` | Start seamless payment flow |
+| `enrollmentPayment(params)` | Start enrollment flow |
+| `continuePayment(session, country?, showStatus?)` | Continue interrupted payment |
+| `generateToken(data, session, country?)` | Generate token (headless) |
+| `getThreeDSecureChallenge(session, country?)` | Get 3DS challenge URL |
+| `continueEnrollment(data, session, country?)` | Continue enrollment (headless) |
+| `hideLoader()` | Hide SDK loader |
+| `receiveDeeplink(url)` | Handle deep link (iOS) |
+| `getLastOneTimeToken()` | Get last OTT |
+| `getLastOneTimeTokenInfo()` | Get last OTT info |
+| `clearLastOneTimeToken()` | Clear stored OTT |
+| `clearLastPaymentStatus()` | Clear payment status |
+| `onPaymentStatus(listener)` | Subscribe to payment events |
+| `onEnrollmentStatus(listener)` | Subscribe to enrollment events |
+| `onOneTimeToken(listener)` | Subscribe to OTT events |
+| `onOneTimeTokenInfo(listener)` | Subscribe to OTT info events |