Guides
Page de StatutTableau de bordRéserver une Démo
Commencez à taper pour rechercher...

Fonctionnalités avancées SDK React Native

Configuration avancée et intégrations personnalisées pour React Native.

Options de montage alternatives

Le flux de base utilise l'affichage automatique des modes de paiement. Pour plus de contrôle, utilisez ces alternatives :

Sélection d'un mode de paiement personnalisé (startPaymentLite)

Sélectionnez le mode de paiement à afficher :

// 1. Fetch available methods
const methods = await fetchPaymentMethods(sessionId);

// 2. Display in your UI
// 3. Start payment with selected method

await YunoSdk.startPaymentLite(
  {
    checkoutSession: session.checkoutSession,
    methodSelected: {
      paymentMethodType: selectedMethod, // 'CARD', 'PIX', etc.
      vaultedToken: null, // or saved token
    },
    showPaymentStatus: true,
  },
  'US' // Optional country code override
);

Flux simplifié (startPaymentSeamlessLite)

Similaire à Lite, mais avec création automatique des paiements :

await YunoSdk.startPaymentSeamlessLite({
  checkoutSession: session.checkoutSession,
  paymentMethodType: 'CARD',
  showPaymentStatus: true,
});

Inscription (enregistrer les cartes)

Enregistrer pendant le paiement

// When creating payment on backend, include vault_on_success flag
async function createPayment(token: string, checkoutSession: string) {
  await fetch('/api/payment/create', {
    method: 'POST',
    body: JSON.stringify({
      one_time_token: token,
      checkout_session: checkoutSession,
      vault_on_success: true, // Save after successful payment
    }),
  });
}

Inscription séparée

// Create customer session on backend
const customerSession = await createCustomerSession('cus_123');

// Set up listener
const enrollmentSubscription = YunoSdk.onEnrollmentStatus((state) => {
  if (state.status === 'SUCCEEDED') {
    console.log('Card saved successfully');
  }
});

// Start enrollment flow
await YunoSdk.enrollmentPayment({
  customerSession: customerSession.id,
  countryCode: 'US',
  showPaymentStatus: true,
});

// Clean up
enrollmentSubscription.remove();

Token voûtés

await YunoSdk.startPaymentLite({
  checkoutSession: session.checkoutSession,
  methodSelected: {
    paymentMethodType: 'CARD',
    vaultedToken: 'vtok_saved_card_123',
  },
  showPaymentStatus: true,
});

Interface utilisateur personnalisée (intégration sans interface graphique)

Créez des formulaires de paiement entièrement personnalisés avec un contrôle total de l'interface utilisateur lorsque vous avez besoin d'un contrôle complet sur chaque élément de l'interface utilisateur, d'expériences de paiement hautement personnalisées ou que vous disposez de ressources de développement pour une interface utilisateur personnalisée.

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

const CustomPaymentForm = () => {
  const [cardNumber, setCardNumber] = useState('');
  const [expiry, setExpiry] = useState('');
  const [cvv, setCvv] = useState('');
  
  const processPayment = async () => {
    try {
      // 1. Use headless API
      const result = await YunoSdk.generateToken({
        checkoutSession: 'session_id',
        paymentMethod: {
          type: 'CARD',
          card: {
            number: cardNumber,
            expirationMonth: parseInt(expiry.split('/')[0]),
            expirationYear: parseInt(expiry.split('/')[1]),
            securityCode: cvv,
            holderName: 'John Doe',
            type: 'CREDIT',
          },
        },
      }, 'session_id', 'US');
      
      
      // 2. Create payment with token
      await createPayment(result.token);
      
      // 3. Handle 3DS if needed
      if (result.needsChallenge) {
        await YunoSdk.continuePayment('session_id', 'US', true);
      }
      
    } catch (error) {
      console.error('Payment error:', error);
    }
  };
  
  return (
    <View>
      <TextInput
        placeholder="Card Number"
        value={cardNumber}
        onChangeText={setCardNumber}
      />
      <TextInput
        placeholder="MM/YY"
        value={expiry}
        onChangeText={setExpiry}
      />
      <TextInput
        placeholder="CVV"
        value={cvv}
        onChangeText={setCvv}
        secureTextEntry
      />
      <Button title="Pay" onPress={processPayment} />
    </View>
  );
};

Stylisme

Personnalisez l'apparence du SDK.

// Note: Styling configuration should be done during initialization
YunoSdk.initialize({
  apiKey: 'your-key',
  countryCode: 'US',
  yunoConfig: {
    // Add styling options here
  },
});

Gestion des erreurs

const handlePayment = async () => {
  useEffect(() => {
    const subscription = YunoSdk.onPaymentStatus((state) => {
      if (state.status === 'FAILED') {
        // Handle payment failure
        Alert.alert('Error', 'Payment failed. Please try again.');
      }
    });
    
    return () => subscription.remove();
  }, []);
  
  try {
    await YunoSdk.startPayment(true);
  } catch (error) {
    console.error('Payment error:', error);
    Alert.alert('Error', error.message);
  }
};

Test et débogage

// Use test mode with test API key
YunoSdk.initialize({
  apiKey: 'pk_test_your_key',
  countryCode: 'US',
});

Performance

Chargement différé

const PaymentScreen = () => {
  const [yunoLoaded, setYunoLoaded] = useState(false);
  
  useEffect(() => {
    // Load Yuno only when needed
    if (!yunoLoaded) {
      YunoSdk.initialize({
        apiKey: 'pk_test_key',
        countryCode: 'US',
      });
      setYunoLoaded(true);
    }
  }, []);
  
  // ...
};

Liens profonds / Retour au navigateur externe

Gérez les utilisateurs qui reviennent sur votre application après des flux de paiement externes tels que les défis d'authentification 3DS, les redirections vers des virements bancaires, les paiements PIX et les méthodes de paiement alternatives qui redirigent vers des navigateurs externes.

1. Définir callback_url dans la session de paiement

Inclure callback_url lors de la création de la session de paiement sur votre backend :

{
  "callback_url": "myapp://return"
}
❗️

Important

Sans callback_url, les utilisateurs peuvent se retrouver bloqués dans le navigateur externe sans pouvoir revenir à votre application.

2. Configurer les liens profonds

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>

3. Gérer les liens profonds dans React Native

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

4. Continuer le paiement après le retour

Après avoir traité le lien profond, poursuivez le processus de paiement :

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

Meilleures pratiques

  • Toujours inclure callback_url dans les flux de paiement susceptibles d'être redirigés
  • Testez la gestion des liens profonds sur les appareils iOS et Android.
  • Gérer correctement les données de liens profonds manquantes ou mal formées
  • Mettre à jour le statut de paiement dans votre interface utilisateur après être revenu d'un navigateur externe

Prévention de la fraude (intégration ClearSale)

Activez la prévention contre la fraude en intégrant ClearSale à votre application React Native.

Configuration Android

1. Ajouter le SDK ClearSale :

Ajouter à android/app/build.gradle:

dependencies {
    implementation 'br.com.clearsale:cs-android-sdk:4.0.0'
}

2. Initialize :

Mise à jour android/app/src/main/java/.../MainApplication.kt:

import br.com.clearsale.androidsdk.ClearSale

class MainApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        
        // Initialize ClearSale first
        ClearSale.init(this, "your-clearsale-app-key")
        
        // Then initialize React Native
        SoLoader.init(this, false)
    }
}

Configuration iOS

1. Ajouter le SDK ClearSale :

Ajouter à ios/Podfile:

pod « ClearSaleSDK »

Puis exécutez :

cd ios && pod install

2. Initialize :

Mise à jour ios/YourApp/AppDelegate.mm:

#import <ClearSale/ClearSale.h>

- (BOOL)application:(UIApplication *)application 
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Initialize ClearSale
    [ClearSale setupWithApiKey:@"your-clearsale-key"];
    
    // Initialize React Native
    // ...
}

Intégration automatique

Une fois ClearSale initialisé, le SDK Yuno effectue automatiquement les opérations suivantes :

  • Collecte fingerprint des appareils
  • Envoie fingerprint les demandes de paiement
  • Aucun code supplémentaire n'est nécessaire en JavaScript.

Test

Vérifier l'intégration ClearSale :

# Journaux Android
adb logcat | grep -i clearsale

# Journaux iOS (dans la console Xcode)
# Recherchez les messages d'initialisation ClearSale

Configuration spécifique à la plateforme

Gérez les différences entre iOS et Android dans votre application React Native.

Configuration conditionnelle

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

// Initialize with platform-specific config
await YunoSdk.initialize({
  apiKey: 'your-api-key',
  countryCode: 'US',
  yunoConfig: {
    language: 'en',
    cardFlow: Platform.OS === 'ios' ? CardFlow.ONE_STEP : CardFlow.STEP_BY_STEP,
  },
  ...(Platform.OS === 'ios' && {
    iosConfig: {
      // iOS-specific settings
    },
  }),
  ...(Platform.OS === 'android' && {
    androidConfig: {
      // Android-specific settings
    },
  }),
});

Fonctionnalités spécifiques à la plateforme

Lecture de carte (Android uniquement) :

if (Platform.OS === 'android') {
  // La lecture de cartes est disponible sur Android.
  // Elle est automatiquement activée lorsque l'autorisation d'utiliser l'appareil photo est accordée.
}

Gestion des liens profonds :

const handlePaymentReturn = async (url: string) => {
  if (Platform.OS === 'ios') {
    // iOS-specific handling
    await YunoSdk.receiveDeeplink(url);
  } else if (Platform.OS === 'android') {
    // Android-specific handling
    await YunoSdk.receiveDeeplink(url);
  }
};

Configuration minimale requise

Plate-formeVersion minimale
iOS14.0+
AndroidAPI 21 (5.0)+
Réagir natif0.70+

Dépendances spécifiques à la plateforme

Versions SDK natives :

Plate-formeSDK natifVersion
Androidcom.yuno.sdk:yuno-sdk-android2.8.1
iOSYunoSDK2.9.0

Tests sur les deux plateformes

Testez toujours votre intégration sur iOS et Android :

# iOS
npx react-native run-ios

# Android
npx react-native run-android

Différences courantes entre les plateformes

FonctionnalitéiOSAndroid
Lecture de carte❌ Indisponible✅ Disponible
Liens profondsLiens universelsFiltres d'intention
PermissionsInfo.plistAndroidManifest.xml
Composants de l'interface utilisateurComposants iOS natifsJetpack Compose

Mise à jour il y a 1 jour