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.
Explore advanced configurations and custom integrations for the React Native SDK.

​
Deep linking / external browser return

Handle users returning to your app after external payment flows like 3DS authentication challenges, bank transfer redirects, PIX payments, and alternative payment methods that redirect to external browsers.

​
1. Set callback_url in checkout session

Include callback_url when creating the checkout session on your backend: 
{
  "callback_url": "myapp://return"
}
iOS - Info.plist: 
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>com.yourapp</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>
Android - AndroidManifest.xml: 
<activity android:name=".MainActivity">
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:scheme="myapp"
            android:host="return" />
    </intent-filter>
</activity>

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 opened from 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) => {
    // Check if it's a payment return URL
    if (url.startsWith('myapp://return')) {
      try {
        await YunoSdk.receiveDeeplink(url);
      } catch (error) {
        console.error('Error processing deep link:', error);
      }
    }
  };
}

​
4. Continue payment after return

After handling the deep link, continue the payment flow: 
const handleDeepLink = async (url: string) => {
  if (url.startsWith('myapp://return')) {
    try {
      await YunoSdk.receiveDeeplink(url);
      
      // Continue payment flow
      await YunoSdk.continuePayment(
        checkoutSessionId,
        'US',
        true // show payment status
      );
    } catch (error) {
      console.error('Error:', error);
    }
  }
};

​
Performance

​
Lazy loading

Initialize the SDK only when the user enters the payment flow to save resources. 
const PaymentScreen = () => {
  const [yunoLoaded, setYunoLoaded] = useState(false);
  
  useEffect(() => {
    if (!yunoLoaded) {
      YunoSdk.initialize({
        apiKey: 'pk_test_key',
        countryCode: 'US',
      });
      setYunoLoaded(true);
    }
  }, []);
};

​
Error handling

Listen to the onPaymentStatus event to handle failures gracefully. 
const subscription = YunoSdk.onPaymentStatus((state) => {
  if (state.status === 'FAILED') {
    Alert.alert('Error', 'Payment failed. Please try again.');
  }
});

​
Platform-specific configuration

Handle differences between iOS and Android in your React Native app.

​
Conditional configuration

import { Platform } from 'react-native';

await YunoSdk.initialize({
  apiKey: 'your-api-key',
  countryCode: 'US',
  ...(Platform.OS === 'ios' && {
    iosConfig: { /* iOS settings */ },
  }),
  ...(Platform.OS === 'android' && {
    androidConfig: { /* Android settings */ },
  }),
});

​
Platform differences

FeatureiOSAndroid
Card scanningNot availableAvailable
Deep linksUniversal LinksIntent Filters
Minimum OSiOS 14.0+API 21 (5.0)+