Guías
Página de estadoDashboardReservar una demostración
Empieza a escribir para buscar...

Funciones avanzadas del SDK de React Native

Configuración avanzada e integraciones personalizadas para React Native.

Opciones de montaje alternativas

El flujo básico utiliza la visualización automática pago . Para un mayor control, utiliza estas alternativas:

Selección de pago personalizado (startPaymentLite)

Selecciona pago que deseas mostrar:

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

Flujo simplificado (startPaymentSeamlessLite)

Similar a Lite, pero con pago automática pago :

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

Inscripción (Guardar tarjetas)

Ahorra durante pago

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

Inscripción por separado

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

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

Interfaz de usuario personalizada (integración sin interfaz gráfica)

Crea pago totalmente personalizados con control total de la interfaz de usuario cuando necesites un control completo sobre cada elemento de la interfaz, experiencias de pago altamente personalizadas o dispongas de recursos de desarrollo para una interfaz de usuario personalizada.

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

Estilo

Personalizar la apariencia del SDK.

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

Gestión de errores

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

Pruebas y depuración

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

Actuación

Carga diferida

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

Enlaces profundos / Retorno al navegador externo

Gestiona los usuarios que regresan a tu aplicación después de pago externos, como desafíos de autenticación 3DS, redireccionamientos de transferencias bancarias, pagos PIX y pago alternativos que redirigen a navegadores externos.

1. Establece callback_url en la sesión de pago.

Incluir callback_url al crear la sesión de pago en tu backend:

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

Importante

Sin callback_url, los usuarios pueden quedarse atrapados en el navegador externo sin posibilidad de volver a la aplicación.

2. Configurar enlaces profundos

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. Gestionar enlaces profundos en 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. Continuar con pago la devolución

Después de gestionar el enlace profundo, continúa con el pago :

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

Mejores prácticas

  • Incluye siempre callback_url en pago que pueden redirigir
  • Prueba el manejo de enlaces profundos en dispositivos iOS y Android.
  • Manejar con elegancia los datos de enlaces profundos que faltan o están mal formados.
  • Actualiza pago en tu interfaz de usuario después de volver del navegador externo.

Prevención del fraude (integración con ClearSale)

Habilita la prevención del fraude integrando ClearSale en tu aplicación React Native.

Configuración de Android

1. Añade el SDK de ClearSale:

Añadir a android/app/build.gradle:

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

2. Initialize :

Actualización 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)
    }
}

Configuración de iOS

1. Añade el SDK de ClearSale:

Añadir a ios/Podfile:

pod 'ClearSaleSDK'

A continuación, ejecuta:

cd ios && pod install

2. Initialize :

Actualización 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
    // ...
}

Integración automática

Una vez inicializado ClearSale, Yuno SDK automáticamente:

  • Recopila fingerprint del dispositivo.
  • Envía fingerprint pago .
  • No se necesita código adicional en JavaScript.

Pruebas

Verifica la integración de ClearSale:

# Registros de Android
adb logcat | grep -i clearsale

# Registros de iOS (en la consola de Xcode)
# Busca los mensajes de inicialización de ClearSale.

Configuración específica de la plataforma

Gestiona las diferencias entre iOS y Android en tu aplicación React Native.

Configuración condicional

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

Características específicas de la plataforma

Escaneo de tarjetas (solo Android):

if (Platform.OS === 'android') {
  // El escaneo de tarjetas está disponible en Android.
  // Se habilita automáticamente cuando se concede el permiso para usar la cámara.
}

Gestión de enlaces profundos:

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

Requisitos mínimos de versión

PlataformaVersión mínima
iOS14.0+
AndroideAPI 21 (5.0)+
React Native0.70+

Dependencias específicas de la plataforma

Versiones del SDK nativo:

PlataformaSDK nativoVersión
Androidecom.yuno.sdk:yuno-sdk-android2.8.1
iOSYunoSDK2.9.0

Pruebas en ambas plataformas

Prueba siempre tu integración tanto en iOS como en Android:

# iOS
npx react-native run-ios

# Android
npx react-native run-android

Diferencias comunes entre plataformas

FeatureiOSAndroide
Escaneo de tarjetas❌ No disponible✅ Disponible
Enlaces profundosEnlaces universalesFiltros de intención
PermisosInfo.plistAndroidManifest.xml
Componentes de la interfaz de usuarioComponentes nativos de iOSJetpack Compose

Actualizado hace 1 día