React Native SDK

# Using npm
npm install @yuno-payments/yuno-sdk-react-native

# Using yarn
yarn add @yuno-payments/yuno-sdk-react-native

allprojects {
    repositories {
        google()
        mavenCentral()
        
        // Add Yuno's Maven repository
        maven { 
            url "https://yunopayments.jfrog.io/artifactory/snapshots-libs-release" 
        }
    }
}

android {
    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 33
        // ...
    }
    
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_17
        targetCompatibility JavaVersion.VERSION_17
    }
}

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(
            applicationContext = this,
            apiKey = "YOUR_YUNO_API_KEY"
        )
        
        SoLoader.init(this, false)
        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
            load()
        }
    }
}

cd ios && pod install && cd ..

platform :ios, '14.0'

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>com.yourapp</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourappscheme</string>
        </array>
    </dict>
</array>

import { YunoSdk, CardFlow } from '@yuno-payments/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: {
        language: '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);
  }
};

import { YunoSdk, YunoStatus } from '@yuno-payments/yuno-sdk-react-native';
import { useEffect } from 'react';

function PaymentScreen() {
  useEffect(() => {
    // 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!');
          // Navigate to success screen
          break;
          
        case YunoStatus.FAILED:
          console.log('❌ Payment failed');
          // Show error message
          break;
          
        case YunoStatus.REJECTED:
          console.log('🚫 Payment rejected');
          // Handle rejection
          break;
          
        case YunoStatus.CANCELLED_BY_USER:
          console.log('⚠️ Payment cancelled by user');
          // Return to previous screen
          break;
          
        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;
      }
    });
    
    // Listen to one-time tokens (OTT)
    const tokenSubscription = YunoSdk.onOneTimeToken((token) => {
      console.log('Received OTT:', token);
      // Send token to your backend for payment processing
    });
    
    // Cleanup subscriptions
    return () => {
      paymentSubscription.remove();
      tokenSubscription.remove();
    };
  }, []);

  return (
    // Your payment UI
  );
}

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,
  },
});

const handlePayment = async () => {
  try {
    await YunoSdk.startPayment(true); // true = show payment status screen
    console.log('Payment flow started');
  } catch (error) {
    console.error('Error starting payment:', error);
  }
};

import { YunoSdk } from '@yuno-payments/yuno-sdk-react-native';

const handlePaymentLite = async () => {
  try {
    await YunoSdk.startPaymentLite(
      {
        checkoutSession: 'checkout_session_token_from_backend',
        methodSelected: {
          vaultedToken: 'saved_payment_method_token',
          paymentMethodType: 'CARD', // or 'PIX', 'WALLET', etc.
        },
        showPaymentStatus: true,
      },
      'US' // Optional country code override
    );
    console.log('Payment Lite flow started');
  } catch (error) {
    console.error('Payment Lite error:', error);
  }
};

import { YunoSdk, YunoStatus } from '@yuno-payments/yuno-sdk-react-native';
import { useEffect } from 'react';

function EnrollmentScreen() {
  useEffect(() => {
    const subscription = YunoSdk.onEnrollmentStatus((state) => {
      console.log('Enrollment Status:', state.status);
      
      if (state.status === YunoStatus.SUCCEEDED) {
        console.log('✅ Payment method saved successfully!');
      } else if (state.status === YunoStatus.FAILED) {
        console.log('❌ Failed to save payment method');
      }
    });
    
    return () => subscription.remove();
  }, []);

  return (
    // Your enrollment UI
  );
}

const startEnrollment = async () => {
  try {
    await YunoSdk.enrollmentPayment({
      customerSession: 'customer_session_token_from_backend',
      countryCode: 'US',
      showPaymentStatus: true,
    });
    console.log('Enrollment flow started');
  } catch (error) {
    console.error('Enrollment error:', error);
  }
};

import { YunoSdk, YunoStatus } from '@yuno-payments/yuno-sdk-react-native';

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);
  }
};

import { YunoSdk, CardType } from '@yuno-payments/yuno-sdk-react-native';

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'
    );

    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);
  }
};

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);
  }
};

import { YunoSdk, CardType } from '@yuno-payments/yuno-sdk-react-native';

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'
    );

    console.log('Vaulted Token:', result.vaultedToken);
  } catch (error) {
    console.error('Enrollment failed:', error);
  }
};

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"
/>

interface PaymentMethodSelectedEvent {
  isSelected: boolean; // Whether a payment method is currently selected
}

interface PaymentMethodErrorEvent {
  message: string; // Error message
}

await YunoSdk.continuePayment(
  'checkout_session_token',
  'US', // Country code
  true  // Show payment status
);

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
  );
}

const subscription = YunoSdk.onPaymentStatus((state) => {
  console.log('Status:', state.status);
  console.log('Token:', state.token);
});

// Later, remove the listener
subscription.remove();

interface YunoPaymentState {
  token?: string;      // One-time token (if available)
  status: YunoStatus;  // Payment status
}

const subscription = YunoSdk.onEnrollmentStatus((state) => {
  console.log('Enrollment status:', state.status);
});

interface YunoEnrollmentState {
  status: YunoStatus;  // Enrollment status
}

const subscription = YunoSdk.onOneTimeToken((token) => {
  console.log('Token:', token);
});

const subscription = YunoSdk.onOneTimeTokenInfo((tokenInfo) => {
  console.log('Token:', tokenInfo.token);
  console.log('Card Brand:', tokenInfo.cardData?.brand);
  console.log('Customer Email:', tokenInfo.customer?.email);
});

interface OneTimeTokenInfo {
  token?: string;
  vaultedToken?: string;
  vaultOnSuccess?: boolean;
  type?: string;
  cardData?: CardInformation;
  customer?: CustomerPayerInformation;
}

await YunoSdk.hideLoader();

const lastOtt = await YunoSdk.getLastOneTimeToken();

const tokenInfo = await YunoSdk.getLastOneTimeTokenInfo();

await YunoSdk.clearLastOneTimeToken();

await YunoSdk.clearLastPaymentStatus();

enum YunoStatus {
  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
}

enum CardFlow {
  ONE_STEP = 'ONE_STEP',           // Single-step card input
  STEP_BY_STEP = 'STEP_BY_STEP',   // Multi-step card input
}

enum CardType {
  CREDIT = 'CREDIT',
  DEBIT = 'DEBIT',
}

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)
}

import React, { useEffect, useState } from 'react';
import { View, Button, Alert, StyleSheet } from 'react-native';
import {
  YunoSdk,
  YunoPaymentMethods,
  YunoStatus,
  CardFlow,
} from '@yuno-payments/yuno-sdk-react-native';

function PaymentScreen() {
  const [isInitialized, setIsInitialized] = useState(false);
  const [checkoutSession, setCheckoutSession] = useState('');
  const [isMethodSelected, setIsMethodSelected] = useState(false);

  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();
    };
  }, []);

  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);
    }
  };

  const handlePayment = async () => {
    try {
      await YunoSdk.startPayment(true);
    } catch (error) {
      console.error('Payment error:', error);
    }
  };

  if (!isInitialized || !checkoutSession) {
    return null; // Or loading indicator
  }

  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>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  paymentMethods: {
    flex: 1,
    marginBottom: 16,
  },
});

export default PaymentScreen;

maven { url "https://yunopayments.jfrog.io/artifactory/snapshots-libs-release" }

cd ios
rm -rf Pods Podfile.lock
pod deintegrate
pod install
cd ..

useEffect(() => {
  const subscription = YunoSdk.onPaymentStatus((state) => {
    console.log('Payment status:', state.status);
  });
  
  return () => subscription.remove();
}, []);

# Android: Check logcat
adb logcat | grep -i yuno

# iOS: Check Xcode console