@jimrising/easymerchantsdk-react-native 2.2.8 → 2.3.0

package/.idea/caches/deviceStreaming.xml

@@ -47,6 +47,17 @@
           <option name="screenX" value="1080" />
           <option name="screenY" value="2412" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="35" />
+          <option name="brand" value="OnePlus" />
+          <option name="codename" value="OP5552L1" />
+          <option name="id" value="OP5552L1" />
+          <option name="manufacturer" value="OnePlus" />
+          <option name="name" value="CPH2415" />
+          <option name="screenDensity" value="480" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2412" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="34" />
           <option name="brand" value="OPPO" />

package/README.md

@@ -1,6 +1,6 @@
 # EasyMerchant SDK React Native Integration
 
-This guide provides instructions for integrating the EasyMerchant SDK into a React Native application for Android and iOS platforms. It focuses on creating a unified configuration object and using it to process payments with `RNEasymerchantsdk.makePayment` (Android) and `EasyMerchantSdk.makePayment` (iOS). The configuration supports card payments, ACH transfers, recurring payments, 3D Secure authentication, and customizable billing/additional fields.
+This guide provides instructions for integrating the EasyMerchant SDK into a React Native application for Android and iOS platforms. It supports two payment flows: `makePayment` (direct payment with API key and secret) and `makePaymentV2` (client token-based payment). The SDK enables card payments, ACH transfers, recurring payments, 3D Secure authentication, and customizable billing/additional fields with a unified configuration object.
 
 ## Prerequisites
 
@@ -9,7 +9,7 @@ This guide provides instructions for integrating the EasyMerchant SDK into a Rea
 - **Ruby**: Version 3.2.8 or higher for iOS setup (required for CocoaPods).
 - **Xcode**: Version 14 or higher for iOS development.
 - **Android Studio**: For Android development, with Gradle configured.
-- **EasyMerchant SDK Credentials**: Obtain API keys and secret keys for `sandbox` or `production` environments.
+- **EasyMerchant SDK Credentials**: Obtain API keys and secret keys for `sandbox` or `production` environments (for `makePayment`), and access to the payment intent API for client token generation (for `makePaymentV2`).
 
 ## Installation
 
@@ -19,7 +19,7 @@ Add the EasyMerchant SDK to your `package.json` under `dependencies`:
 
 ```json
 "dependencies": {
-  "@jimrising/easymerchantsdk-react-native": "^2.2.8"
+  "@jimrising/easymerchantsdk-react-native": "^2.3.0"
 }
 ```
 
@@ -35,18 +35,18 @@ npm install @jimrising/easymerchantsdk-react-native
 
 ```gradle
 allprojects {
-    repositories {
-        google()
-        mavenCentral()
-        maven { url 'https://jitpack.io' }
-        maven {
-            url = uri("https://maven.pkg.github.com/jimrising/easymerchantsdk-react-native")
-            credentials {
-                username = properties.getProperty('GITHUB_USERNAME')
-                password = properties.getProperty('GITHUB_PASSWORD')
-            }
-        }
+  repositories {
+    google()
+    mavenCentral()
+    maven { url 'https://jitpack.io' }
+    maven {
+      url = uri("https://maven.pkg.github.com/jimrising/easymerchantsdk-react-native")
+      credentials {
+        username = properties.getProperty('GITHUB_USERNAME')
+        password = properties.getProperty('GITHUB_PASSWORD')
+      }
     }
+  }
 }
 ```
 
@@ -72,49 +72,49 @@ import React
 
 @UIApplicationMain
 class AppDelegate: UIResponder, UIApplicationDelegate {
-    var window: UIWindow?
-
-    func application(
-        _ application: UIApplication,
-        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
-    ) -> Bool {
-        let jsCodeLocation: URL
-
-        #if DEBUG
-        jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")!
-        #else
-        jsCodeLocation = Bundle.main.url(forResource: "main", withExtension: "jsbundle")!
-        #endif
-
-        let bridge = RCTBridge(
-            bundleURL: jsCodeLocation,
-            moduleProvider: nil,
-            launchOptions: launchOptions
-        )
-
-        guard let validBridge = bridge else {
-            fatalError("React Native bridge failed to initialize.")
-        }
-
-        let rootView = RCTRootView(
-            bridge: validBridge,
-            moduleName: "EasyMerchantTestApp", // Replace with your app's module name
-            initialProperties: nil
-        )
-
-        self.window = UIWindow(frame: UIScreen.main.bounds)
-        let rootViewController = UIViewController()
-        rootViewController.view = rootView
-        self.window?.rootViewController = rootViewController
-        self.window?.makeKeyAndVisible()
-
-        if let easyMerchantSdkPlugin = validBridge.module(for: EasyMerchantSdkPlugin.self) as? EasyMerchantSdkPlugin {
-            easyMerchantSdkPlugin.setViewController(rootViewController)
-        } else {
-            print("Failed to retrieve EasyMerchantSdkPlugin instance from React Native bridge.")
-        }
-        return true
+  var window: UIWindow?
+
+  func application(
+    _ application: UIApplication,
+    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
+  ) -> Bool {
+    let jsCodeLocation: URL
+
+    #if DEBUG
+      jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")!
+    #else
+      jsCodeLocation = Bundle.main.url(forResource: "main", withExtension: "jsbundle")!
+    #endif
+
+    let bridge = RCTBridge(
+      bundleURL: jsCodeLocation,
+      moduleProvider: nil,
+      launchOptions: launchOptions
+    )
+
+    guard let validBridge = bridge else {
+      fatalError("React Native bridge failed to initialize.")
+    }
+
+    let rootView = RCTRootView(
+      bridge: validBridge,
+      moduleName: "EasyMerchantTestApp", // Replace with your app's module name
+      initialProperties: nil
+    )
+
+    self.window = UIWindow(frame: UIScreen.main.bounds)
+    let rootViewController = UIViewController()
+    rootViewController.view = rootView
+    self.window?.rootViewController = rootViewController
+    self.window?.makeKeyAndVisible()
+
+    if let easyMerchantSdkPlugin = validBridge.module(for: EasyMerchantSdkPlugin.self) as? EasyMerchantSdkPlugin {
+      easyMerchantSdkPlugin.setViewController(rootViewController)
+    } else {
+      print("Failed to retrieve EasyMerchantSdkPlugin instance from React Native bridge.")
     }
+    return true
+  }
 }
 ```
 
@@ -140,39 +140,41 @@ pod install --repo-update
 
 ## Usage
 
-This section explains how to configure and process payments using a unified configuration object, passed to `RNEasymerchantsdk.makePayment` (Android) or `EasyMerchantSdk.makePayment` (iOS). The configuration includes all necessary fields with default values, supporting card payments, ACH transfers, recurring payments, and 3D Secure authentication.
+This section explains how to configure and process payments using `makePayment` (direct payment) and `makePaymentV2` (client token-based payment). Each flow uses a specific configuration object, with `makePaymentV2` requiring a `clientToken` instead of `apiKey` and `secretKey`.
 
 ### 1. Import Required Modules
 
 ```javascript
-import { NativeModules, Platform, Alert } from 'react-native';
+import { NativeModules, Platform, Alert, NativeEventEmitter } from 'react-native';
 const { RNEasymerchantsdk, EasyMerchantSdk } = NativeModules;
 ```
 
-### 2. Define Configuration
+### 2. Define Configurations
+
+#### Configuration for `makePayment`
 
-Create a unified `config` object with default values for all required and optional fields.
+The `makePayment` flow requires `apiKey` and `secretKey`. Below is a sample configuration:
 
 ```javascript
-const config = {
-  environment: 'sandbox', // String, e.g., 'sandbox' or 'production'
-  amount: '5.0', // String or number, must be a positive value
-  currency: 'usd', // String, currency code, e.g., 'usd'
-  tokenOnly: false, // Boolean, set to true for tokenization only, false for full payment
-  saveCard: true, // Boolean, set to true to save card details, false otherwise
-  saveAccount: true, // Boolean, set to true to save account details for ACH, false otherwise
-  submitButtonText: 'Submit', // String, text for the payment button
-  authenticatedACH: true, // Boolean, set to true to enable authenticated ACH, false otherwise
-  secureAuthentication: true, // Boolean, set to true to enable 3D Secure, false otherwise
-  showReceipt: true, // Boolean, set to true to show receipt after payment, false otherwise
-  showDonate: false, // Boolean, set to true to show donation option, false otherwise
-  showTotal: true, // Boolean, set to true to display total amount, false otherwise
-  showSubmitButton: true, // Boolean, set to true to show submit button, false otherwise
-  paymentMethods: ['card', 'ach'], // Array of strings, must include at least one method, e.g., ['card', 'ach']
-  apiKey: 'replace-with-api-key', // String, environment-specific API key
-  secretKey: 'replace-with-secret-key', // String, environment-specific secret key
+const configMakePayment = {
+  environment: 'sandbox', // String: 'sandbox' or 'production'
+  amount: '5.0', // String or number, must be positive
+  currency: 'usd', // String: currency code, e.g., 'usd'
+  tokenOnly: false, // Boolean: true for tokenization, false for full payment
+  saveCard: true, // Boolean: save card details
+  saveAccount: true, // Boolean: save account details for ACH
+  submitButtonText: 'Submit', // String: payment button text
+  authenticatedACH: true, // Boolean: enable authenticated ACH
+  secureAuthentication: true, // Boolean: enable 3D Secure
+  showReceipt: true, // Boolean: show receipt after payment
+  showDonate: false, // Boolean: show donation option
+  showTotal: true, // Boolean: display total amount
+  showSubmitButton: true, // Boolean: show submit button
+  paymentMethods: ['card', 'ach'], // Array: at least one method ('card', 'ach')
+  apiKey: 'replace-with-api-key', // String: environment-specific API key
+  secretKey: 'replace-with-secret-key', // String: environment-specific secret key
   fields: {
-    visibility: { billing: false, additional: false }, // Object, visibility for fields
+    visibility: { billing: false, additional: false }, // Object: field visibility
     billing: [
       { name: 'address', required: true, value: '123 Main Street, Suite 100' },
       { name: 'country', required: true, value: 'United States' },
@@ -186,63 +188,127 @@ const config = {
     ]
   },
   appearanceSettings: {
-    theme: 'light', // String, UI theme, e.g., 'light' or 'dark'
-    bodyBackgroundColor: '#121212', // String, hex color for body background
-    containerBackgroundColor: '#1E1E1E', // String, hex color for container background
-    primaryFontColor: '#FFFFFF', // String, hex color for primary font
-    secondaryFontColor: '#B0B0B0', // String, hex color for secondary font
-    primaryButtonBackgroundColor: '#2563EB', // String, hex color for primary button
-    primaryButtonHoverColor: '#1D4ED8', // String, hex color for primary button hover
-    primaryButtonFontColor: '#FFFFFF', // String, hex color for primary button font
-    secondaryButtonBackgroundColor: '#374151', // String, hex color for secondary button
-    secondaryButtonHoverColor: '#4B5563', // String, hex color for secondary button hover
-    secondaryButtonFontColor: '#E5E7EB', // String, hex color for secondary button font
-    borderRadius: '8', // String, border radius in pixels
-    fontSize: '16', // String, font size in pixels
-    fontWeight: 500, // Number, font weight, e.g., 400, 500, 700
-    fontFamily: '"Inter", sans-serif' // String, font family
+    theme: 'light', // String: 'light' or 'dark'
+    bodyBackgroundColor: '#121212', // String: hex color
+    containerBackgroundColor: '#1E1E1E', // String: hex color
+    primaryFontColor: '#FFFFFF', // String: hex color
+    secondaryFontColor: '#B0B0B0', // String: hex color
+    primaryButtonBackgroundColor: '#2563EB', // String: hex color
+    primaryButtonHoverColor: '#1D4ED8', // String: hex color
+    primaryButtonFontColor: '#FFFFFF', // String: hex color
+    secondaryButtonBackgroundColor: '#374151', // String: hex color
+    secondaryButtonHoverColor: '#4B5563', // String: hex color
+    secondaryButtonFontColor: '#E5E7EB', // String: hex color
+    borderRadius: '8', // String: border radius in pixels
+    fontSize: '16', // String: font size in pixels
+    fontWeight: 500, // Number: font weight
+    fontFamily: '"Inter", sans-serif' // String: font family
   },
-  email: 'john.doe@example.com', // String, customer email
-  name: 'John Doe', // String, customer name
-  isEmail: true, // Boolean, set to true to allow email editing, false otherwise
+  email: 'john.doe@example.com', // String: customer email
+  name: 'John Doe', // String: customer name
+  isEmail: true, // Boolean: allow email editing
   metadata: {
-    metadataOne: 'metadataOne', // String, custom metadata key-value
-    metadataTwo: 'metadataTwo' // String, custom metadata key-value
+    metadataOne: 'metadataOne', // String: custom metadata
+    metadataTwo: 'metadataTwo' // String: custom metadata
   },
   grailPayParams: {
-    role: 'business', // String, GrailPay role
-    timeout: 10, // Number, timeout in seconds
-    isSandbox: true, // Boolean, set to true for GrailPay sandbox mode
-    brandingName: 'Lyfecycle Payments', // String, branding name
-    finderSubtitle: 'Search for your bank', // String, bank finder subtitle
-    searchPlaceholder: 'Enter bank name' // String, search placeholder
+    role: 'business', // String: GrailPay role
+    timeout: 10, // Number: timeout in seconds
+    brandingName: 'Lyfecycle Payments', // String: branding name
+    finderSubtitle: 'Search for your bank', // String: bank finder subtitle
+    searchPlaceholder: 'Enter bank name' // String: search placeholder
   },
-  is_recurring: false, // Boolean, set to true to enable recurring payments
-  numOfCycle: 2, // Number, minimum 2 cycles for recurring payments
-  recurringIntervals: ['daily', 'weekly', 'monthly'], // Array of strings, intervals for recurring payments
-  recurringStartDateType: 'fixed', // String, recurring start type, e.g., 'fixed' or 'custom'
-  recurringStartDate: '28/08/2025' // String, recurring start date in DD/MM/YYYY format
+  is_recurring: false, // Boolean: enable recurring payments
+  numOfCycle: 2,  // if is_recurring == true
+  recurringIntervals: ['daily', 'weekly', 'monthly'], // if is_recurring == true
+  recurringStartDateType: 'fixed', // if is_recurring == true
+  recurringStartDate: '02/09/2025' // if is_recurring == true
 };
 ```
 
-**Notes**:
-- Replace `apiKey` and `secretKey` with your actual credentials.
-- Ensure `paymentMethods` includes at least one valid method (`'card'` or `'ach'` ).
-- For recurring payments, set `is_recurring: true` and ensure `recurringIntervals` has at least one interval (`'daily'`, `'weekly'`, `'monthly'`).
-- Set `fields.billing` and `fields.additional` to empty arrays (`[]`) if not needed.
-- Adjust `appearanceSettings` colors to match your app’s design.
-- Store sensitive data like `apiKey` and `secretKey` securely (e.g., in environment variables).
+#### Configuration for `makePaymentV2`
+
+The `makePaymentV2` flow requires a `clientToken` and omits `apiKey` and `secretKey`. Below is a sample configuration:
+
+```javascript
+const configMakePaymentV2 = {
+  environment: 'sandbox', // String: 'sandbox' or 'production'
+  currency: 'usd', // String: currency code, e.g., 'usd'
+  saveCard: true, // Boolean: save card details
+  saveAccount: true, // Boolean: save account details for ACH
+  submitButtonText: 'Submit', // String: payment button text
+  authenticatedACH: true, // Boolean: enable authenticated ACH
+  secureAuthentication: true, // Boolean: enable 3D Secure
+  showReceipt: true, // Boolean: show receipt after payment
+  showDonate: false, // Boolean: show donation option
+  showTotal: true, // Boolean: display total amount
+  showSubmitButton: true, // Boolean: show submit button
+  paymentMethods: ['card', 'ach'], // Array: at least one method ('card', 'ach')
+  clientToken: 'replace-with-client-token', // String: client token from payment intent API
+  fields: {
+    visibility: { billing: false, additional: false }, // Object: field visibility
+    billing: [
+      { name: 'address', required: true, value: '123 Main Street, Suite 100' },
+      { name: 'country', required: true, value: 'United States' },
+      { name: 'state', required: true, value: 'California' },
+      { name: 'city', required: false, value: 'San Francisco' },
+      { name: 'postal_code', required: true, value: '94105' }
+    ],
+    additional: [
+      { name: 'phone_number', required: false, value: '+1-555-123-4567' },
+      { name: 'description', required: true, value: 'Test payment for development purposes' }
+    ]
+  },
+  appearanceSettings: {
+    theme: 'light', // String: 'light' or 'dark'
+    bodyBackgroundColor: '#121212', // String: hex color
+    containerBackgroundColor: '#1E1E1E', // String: hex color
+    primaryFontColor: '#FFFFFF', // String: hex color
+    secondaryFontColor: '#B0B0B0', // String: hex color
+    primaryButtonBackgroundColor: '#2563EB', // String: hex color
+    primaryButtonHoverColor: '#1D4ED8', // String: hex color
+    primaryButtonFontColor: '#FFFFFF', // String: hex color
+    secondaryButtonBackgroundColor: '#374151', // String: hex color
+    secondaryButtonHoverColor: '#4B5563', // String: hex color
+    secondaryButtonFontColor: '#E5E7EB', // String: hex color
+    borderRadius: '8', // String: border radius in pixels
+    fontSize: '16', // String: font size in pixels
+    fontWeight: 500, // Number: font weight
+    fontFamily: '"Inter", sans-serif' // String: font family
+  },
+  email: 'john.doe@example.com', // String: customer email
+  name: 'John Doe', // String: customer name
+  isEmail: true, // Boolean: allow email editing
+  metadata: {
+    metadataOne: 'metadataOne', // String: custom metadata
+    metadataTwo: 'metadataTwo' // String: custom metadata
+  },
+  grailPayParams: {
+    role: 'business', // String: GrailPay role
+    timeout: 10, // Number: timeout in seconds
+    brandingName: 'Lyfecycle Payments', // String: branding name
+    finderSubtitle: 'Search for your bank', // String: bank finder subtitle
+    searchPlaceholder: 'Enter bank name' // String: search placeholder
+  },
+};
+```
+
+**Key Differences**:
+- **makePayment**: Requires `apiKey` and `secretKey`, used for direct payment processing.
+- **makePaymentV2**: Requires `clientToken` (obtained from the payment intent API) and omits `apiKey` and `secretKey`.
+- **Environment Initialization**: Required for `makePayment` on iOS; not needed for `makePaymentV2`.
+
 
-### 3. Initialize Environment (iOS Only)
+### 3. Initialize Environment (iOS Only, for `makePayment`)
 
-For iOS, configure the environment before processing payments:
+For `makePayment` on iOS, configure the environment before processing payments:
 
 ```javascript
 const initializeEnvironment = async () => {
   try {
     await EasyMerchantSdk.setViewController();
-    await EasyMerchantSdk.configureEnvironment(config.environment, config.apiKey, config.secretKey);
-    console.log(`iOS Environment configured: ${config.environment}`);
+    await EasyMerchantSdk.configureEnvironment(configMakePayment.environment, configMakePayment.apiKey, configMakePayment.secretKey);
+    console.log(`iOS Environment configured: ${configMakePayment.environment}`);
   } catch (error) {
     console.error('iOS Initialization Error:', error);
     Alert.alert('Error', `Failed to configure iOS environment: ${error.message}`);
@@ -250,32 +316,84 @@ const initializeEnvironment = async () => {
 };
 ```
 
-**Note**: Call `initializeEnvironment()` before processing payments on iOS. Android does not require this step.
+**Note**: This step is required only for `makePayment` on iOS. Android and `makePaymentV2` do not require environment initialization.
 
-### 4. Process Payments
+### 4. Retrieve Client Token (for `makePaymentV2`)
 
-Use the `config` object to initiate payments. The process differs slightly by platform:
+For `makePaymentV2`, obtain a client token from the EasyMerchant payment intent API:
+
+```javascript
+const apiUrls = {
+  sandbox: 'sandbox-url-here',
+  production: 'production-url-here'
+};
+
+const handleGetClientToken = async () => {
+  try {
+    const { apiKey, secretKey } = configMakePayment; // Use credentials from makePayment config
+    const apiUrl = apiUrls[configMakePaymentV2.environment];
+     const params = {
+        amount: 13.53,
+        intervals: [ "weekly","monthly"],
+        is_recurring: true,
+        recurring_start_date: "02/09/2025",
+        allowed_cycles: 2,
+        recurring_start_date_type: "fixed"
+        };
+
+    const response = await fetch(apiUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Api-Key': apiKey,
+        'X-Api-Secret': secretKey
+      },
+      body: JSON.stringify(params)
+    });
+
+    const data = await response.json();
+    if (data.status === true && data.client_token) {
+      configMakePaymentV2.clientToken = data.client_token;
+      console.log('Client Token:', data.client_token);
+      Alert.alert('Success', 'Client token retrieved successfully');
+    } else {
+      throw new Error(data.message || 'No client_token in response');
+    }
+  } catch (error) {
+    console.error('Get Client Token Error:', error);
+    Alert.alert('Error', `Failed to retrieve client token: ${error.message}`);
+  }
+};
+```
+
+**Notes**:
+- Call `handleGetClientToken` before `makePaymentV2`.
+- The API endpoint varies by environment (`sandbox` or `production`).
+- Use `apiKey` and `secretKey` from `configMakePayment` to authenticate the API request.
+- Include recurring payment parameters if `is_recurring` is `true`.
+
+### 5. Process Payments
+
+#### Using `makePayment` (Direct Payment)
 
 ```javascript
 const handlePayment = async () => {
-  // Validate inputs
-  if (!config.amount || isNaN(parseFloat(config.amount)) || parseFloat(config.amount) <= 0) {
+  if (!configMakePayment.amount || isNaN(parseFloat(configMakePayment.amount)) || parseFloat(configMakePayment.amount) <= 0) {
     Alert.alert('Error', 'Please set a valid amount');
     return;
   }
-  if (!config.paymentMethods || config.paymentMethods.length === 0) {
+  if (!configMakePayment.paymentMethods || configMakePayment.paymentMethods.length === 0) {
     Alert.alert('Error', 'Please select at least one payment method');
     return;
   }
-  if (config.is_recurring && (!config.recurringIntervals || config.recurringIntervals.length === 0)) {
+  if (configMakePayment.is_recurring && (!configMakePayment.recurringIntervals || configMakePayment.recurringIntervals.length === 0)) {
     Alert.alert('Error', 'Please select at least one interval for recurring payment');
     return;
   }
 
   try {
     if (Platform.OS === 'android') {
-      // Android: Pass config object directly
-      const response = await RNEasymerchantsdk.makePayment(config);
+      const response = await RNEasymerchantsdk.makePayment(configMakePayment);
       const raw = response?.response ? JSON.parse(response.response) : {};
       const parsedResponse = {
         ...raw,
@@ -285,9 +403,8 @@ const handlePayment = async () => {
       console.log('Android Payment Response:', parsedResponse);
       Alert.alert('Success', 'Payment processed!');
     } else {
-      // iOS: Initialize environment and pass config as JSON string
       await initializeEnvironment();
-      const configString = JSON.stringify(config);
+      const configString = JSON.stringify(configMakePayment);
       const result = await EasyMerchantSdk.makePayment(configString);
       const refToken = result?.additionalInfo?.threeDSecureStatus?.data?.ref_token;
       console.log('iOS Payment Response:', result);
@@ -301,15 +418,60 @@ const handlePayment = async () => {
 };
 ```
 
+#### Using `makePaymentV2` (Client Token-Based)
+
+```javascript
+const handlePaymentV2 = async () => {
+  if (!configMakePaymentV2.clientToken) {
+    Alert.alert('Error', 'Please provide a valid client token');
+    return;
+  }
+  if (!configMakePaymentV2.paymentMethods || configMakePaymentV2.paymentMethods.length === 0) {
+    Alert.alert('Error', 'Please select at least one payment method');
+    return;
+  }
+  if (configMakePaymentV2.is_recurring && (!configMakePaymentV2.recurringIntervals || configMakePaymentV2.recurringIntervals.length === 0)) {
+    Alert.alert('Error', 'Please select at least one interval for recurring payment');
+    return;
+  }
+
+  try {
+    if (Platform.OS === 'android') {
+      const response = await RNEasymerchantsdk.makePaymentV2(configMakePaymentV2);
+      const raw = response?.response ? JSON.parse(response.response) : {};
+      const parsedResponse = {
+        ...raw,
+        billingInfo: raw.billingInfo ? JSON.parse(raw.billingInfo) : raw.billingInfo,
+        additional_info: raw.additional_info ? JSON.parse(raw.additional_info) : raw.additional_info
+      };
+      console.log('Android Payment V2 Response:', parsedResponse);
+      Alert.alert('Success', 'Payment V2 processed!');
+    } else {
+      const configString = JSON.stringify(configMakePaymentV2);
+      const result = await EasyMerchantSdk.makePaymentV2(configString);
+      const refToken = result?.additionalInfo?.threeDSecureStatus?.data?.ref_token;
+      console.log('iOS Payment V2 Response:', result);
+      if (refToken) console.log('Reference Token:', refToken);
+      Alert.alert('Success', 'Payment V2 processed!');
+    }
+  } catch (error) {
+    console.error(`${Platform.OS === 'android' ? 'Android' : 'iOS'} Payment V2 Error:`, error);
+    Alert.alert('Payment V2 Error', error.message || 'Unknown error');
+  }
+};
+```
+
 **How It Works**:
-- **Android**: Pass the `config` object to `RNEasymerchantsdk.makePayment(config)`. The response may include `billingInfo` and `additional_info`, which are parsed if they are JSON strings.
-- **iOS**: Stringify the `config` (`JSON.stringify(config)`) and pass to `EasyMerchantSdk.makePayment(configString)`. Call `initializeEnvironment()` first. The response may include a `ref_token` for 3D Secure transactions.
-- **Validation**: Ensures `amount` is positive, at least one payment method is selected, and recurring payments have at least one interval.
+- **makePayment**: Uses `configMakePayment` with `apiKey` and `secretKey`. Requires environment initialization on iOS.
+- **makePaymentV2**: Uses `configMakePaymentV2` with `clientToken`. Does not require environment initialization.
+- **Android**: Pass the config object directly. Parse `billingInfo` and `additional_info` if they are JSON strings.
+- **iOS**: Stringify the config (`JSON.stringify(config)`) for both methods. Store `ref_token` for 3D Secure transactions.
+- **Validation**: Ensures `amount` is positive, at least one payment method is selected, and a `clientToken` is provided for `makePaymentV2`.
 - **Error Handling**: Displays user-friendly alerts for errors.
 
-### 5. Android Event Listeners
+### 6. Android Event Listeners
 
-For Android, set up event listeners to handle payment success, status, and errors:
+Set up event listeners for Android to handle payment success, status, and errors:
 
 ```javascript
 const setupAndroidEventListeners = () => {
@@ -355,7 +517,7 @@ const setupAndroidEventListeners = () => {
 
 **Note**: Call `setupAndroidEventListeners()` during app initialization and clean up listeners when done (returned function).
 
-### 6. Check Payment Status (Android Only)
+### 7. Check Payment Status (Android Only)
 
 Check the status of a payment on Android:
 
@@ -376,7 +538,7 @@ const checkPaymentStatus = async () => {
 };
 ```
 
-### 7. Payment Reference (iOS Only)
+### 8. Payment Reference (iOS Only)
 
 Retrieve payment reference details on iOS using a `ref_token`:
 
@@ -399,38 +561,14 @@ const checkPaymentReference = async (refToken) => {
 
 ## Notes
 
-- **Payment Methods**:
-  - Use `['card', 'ach']` (lowercase).
+- **Payment Methods**: Use `['card', 'ach']` (lowercase).
 - **Recurring Payments**: Set `is_recurring: true` and include at least one interval in `recurringIntervals`.
-- **Security**: Store `apiKey` and `secretKey` securely (e.g., in environment variables) and ensure they match the `environment`.
+- **Security**: Store `apiKey`, `secretKey`, and `clientToken` securely (e.g., in environment variables) and ensure they match the `environment`.
 - **Optional Fields**: Set `fields.billing` and `fields.additional` to `[]` if not needed. Use `fields.visibility` to control display.
 - **Theming**: Customize `appearanceSettings` for UI consistency. Ensure hex colors are valid.
 - **GrailPay**: Configure `grailPayParams` for bank search UI (used with ACH payments).
 - **Platform Differences**:
-  - Android uses a direct object for `makePayment`; iOS requires a JSON string for `makePayment`.
-  - iOS requires environment initialization before payment.
+  - Android uses a direct object for `makePayment` and `makePaymentV2`; iOS requires a JSON string.
+  - `makePayment` on iOS requires environment initialization; `makePaymentV2` does not.
   - Android supports event listeners; iOS uses direct method responses.
-
-## Troubleshooting
-
-- **iOS Bridge Initialization**:
-  - **Error**: "Failed to retrieve EasyMerchantSdkPlugin instance."
-  - **Solution**: Verify `easymerchantsdk` pod installation (`pod install --repo-update`) and check `AppDelegate.swift` for correct bridge setup.
-- **Android Payment Issues**:
-  - Ensure `config.paymentMethods` includes valid methods (`['card', 'ach']`).
-  - Validate `apiKey` and `secretKey` in `config`.
-  - Check `gradle.properties` for correct `GITHUB_USERNAME` and `GITHUB_PASSWORD`.
-  - Log `config` for debugging: `console.log(JSON.stringify(config, null, 2))`.
-- **Pod Installation**:
-  - **Error**: `pod install` fails.
-  - **Solution**: Ensure Ruby 3.2.8 or higher is installed and run `pod install --repo-update`.
-- **Payment Failures**:
-  - Check console logs for errors.
-  - Verify `amount` is positive and `paymentMethods` is not empty.
-  - Ensure `apiKey` and `secretKey` match the `environment`.
-  - For recurring payments, confirm `recurringIntervals` has at least one entry.
-- **ACH Payments**:
-  - Ensure `authenticatedACH` and `secureAuthentication` are set appropriately in `config` when using `ach`.
-- **Response Parsing**:
-  - Android responses may include JSON strings in `billingInfo` and `additional_info`; parse them as shown.
-  - iOS responses may include a `ref_token` for 3D Secure; store it for reference checks.
+- **Client Token**: Required for `makePaymentV2`. Obtain via the payment intent API (`/api/v1/paymentintent`).