Skip to main content
Orientation: Choosing Your Integration Flow, before you begin, please review the Official Integration Flow.
  • Standard Flow (Full Checkout): Recommended for most merchants. Yuno handles the UI, security, and automatic updates for payment methods.
  • Custom Flow (This SDK): Use this only if you require full control over the UX. Note: You will be responsible for manually handling payment statuses, 3DS transitions, and fraud routing data collection.
The Yuno React Native SDK provides a set of components and methods to integrate Yuno’s payment features into your mobile app. It supports both iOS and Android.

​
Install

npm install @yuno-payments/yuno-sdk-react-native
iOS setup: 
cd ios && pod install
Requirements:
  • react-native 0.70+
  • Node.js 16+
  • Android Min SDK 21
  • iOS 14.0+
The SDK includes TypeScript definitions out of the box.

​
Initialize

Initialize the SDK as early as possible in your application, typically in App.tsx. 
import { YunoSdk } from '@yuno-payments/yuno-sdk-react-native';
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    YunoSdk.initialize({
      apiKey: 'your-public-api-key',
      countryCode: 'US', // Default country
    });
  }, []);
  
  return <YourApp />;
}

​
Basic payment flow (Full Checkout)

The simplest integration uses the YunoPaymentMethods component to display available payment methods and startPayment to process the transaction. 
import { YunoSdk, YunoPaymentMethods } from '@yuno-payments/yuno-sdk-react-native';

export default function PaymentScreen() {
  const [checkoutSession, setCheckoutSession] = useState<string | null>(null);
  const [isReady, setIsReady] = useState(false);
  
  useEffect(() => {
    // 1. Subscribe to payment events
    const subscription = YunoSdk.onPaymentStatus((state) => {
      if (state.status === 'SUCCEEDED') {
        // Handle success
      }
    });
    
    // 2. Fetch checkout session from your backend
    createCheckoutSession().then(session => {
      setCheckoutSession(session);
      setIsReady(true);
    });
    
    return () => subscription.remove();
  }, []);
  
  const handlePayment = async () => {
    // 3. Start payment flow
    await YunoSdk.startPayment(true); // true = show payment status screen
  };
  
  return (
    <View>
      {checkoutSession && (
        <YunoPaymentMethods
          checkoutSession={checkoutSession}
          countryCode="US"
        />
      )}
      <Button title="Pay Now" onPress={handlePayment} disabled={!isReady} />
    </View>
  );
}

​
Integration options

Choose the integration level that best fits your needs:

Lite SDK

Control the payment method selection UI while Yuno handles the payment process.

Headless SDK

Build a completely custom UI and handle the payment flow manually.

Enrollment

Allow customers to save their payment methods for future use.

Styling

Customize the appearance of the SDK components to match your brand.

​
Next steps