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.
You can customize the look and feel of the Yuno SDK components to match your app’s brand.

Configuration

Styling configuration is passed during the SDK initialization.
import { YunoSdk } from '@yuno-payments/yuno-sdk-react-native';

YunoSdk.initialize({
  apiKey: 'your-public-api-key',
  countryCode: 'US',
  yunoConfig: {
    // Global configuration
    language: 'en',
    theme: {
      // Customize colors, fonts, etc.
      // Note: Specific theme options depend on the native SDK versions
    }
  },
});

Platform-specific styling

Since the React Native SDK wraps native iOS and Android SDKs, some styling options might be platform-specific.
import { Platform } from 'react-native';

YunoSdk.initialize({
  apiKey: 'your-key',
  countryCode: 'US',
  ...(Platform.OS === 'ios' && {
    iosConfig: {
      // iOS-specific settings
    },
  }),
  ...(Platform.OS === 'android' && {
    androidConfig: {
      // Android-specific settings
    },
  }),
});
For a full list of available styling tokens, refer to the Android Customization and iOS Customization documentation.