Guias
Página de statusDashboardAgende uma demonstração
Comece a digitar para pesquisar...

Recursos avançados React Native SDK

Configuração avançada e integrações personalizadas para React Native.

Opções alternativas de montagem

O fluxo básico utiliza a exibição automática do método de pagamento. Para maior controle, utilize estas alternativas:

Seleção de método de pagamento personalizado (startPaymentLite)

Selecione qual método de pagamento exibir:

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

Fluxo simplificado (startPaymentSeamlessLite)

Semelhante ao Lite, mas com criação automática de pagamentos:

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

Inscrição (Salvar cartões)

Salvar durante o pagamento

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

Inscrição separada

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

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

IU personalizada (integração sem interface gráfica)

Crie formulários de pagamento totalmente personalizados com controle total da interface do usuário quando precisar de controle total sobre todos os elementos da interface, experiências de checkout altamente personalizadas ou tiver recursos de desenvolvimento para uma interface 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

Personalize a aparência do SDK.

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

Tratamento de erros

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

Testes e depuração

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

Desempenho

Carregamento lento

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

Links diretos / Retorno ao navegador externo

Lide com usuários que retornam ao seu aplicativo após fluxos de pagamento externos, como desafios de autenticação 3DS, redirecionamentos de transferência bancária, pagamentos PIX e métodos de pagamento alternativos que redirecionam para navegadores externos.

1. Defina callback_url na sessão de checkout

Incluir callback_url ao criar a sessão de checkout no seu backend:

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

Importante

Sem callback_url, os usuários podem ficar presos no navegador externo, sem ter como retornar ao seu aplicativo.

2. Configurar links diretos

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. Lidar com links diretos no 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 o pagamento após a devolução

Após lidar com o link direto, continue o fluxo de pagamento:

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

Melhores práticas

  • Inclua sempre callback_url em fluxos de pagamento que podem redirecionar
  • Teste o tratamento de links diretos em dispositivos iOS e Android
  • Lidar com dados de links diretos ausentes ou malformados de maneira elegante
  • Atualize o status do pagamento na sua interface do usuário após retornar do navegador externo.

Prevenção de fraudes (integração com ClearSale)

Habilite a prevenção contra fraudes integrando o ClearSale ao seu aplicativo React Native.

Configuração do Android

1. Adicione o SDK ClearSale:

Adicionar a android/app/build.gradle:

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

2. Initialize :

Atualização 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)
    }
}

Configuração do iOS

1. Adicione o SDK ClearSale:

Adicionar a ios/Podfile:

pod 'ClearSaleSDK'

Em seguida, execute:

cd ios && pod install

2. Initialize :

Atualização 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
    // ...
}

Integração automática

Assim que o ClearSale é inicializado, o Yuno SDK automaticamente:

  • Coleta fingerprint do dispositivo
  • Envia fingerprint solicitações de pagamento
  • Não é necessário código adicional em JavaScript

Testes

Verifique a integração do ClearSale:

# Registros do Android
adb logcat | grep -i clearsale

# Registros do iOS (no console Xcode)
# Procure as mensagens de inicialização do ClearSale

Configuração específica da plataforma

Lide com as diferenças entre iOS e Android em seu aplicativo React Native.

Configuração 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
    },
  }),
});

Recursos específicos da plataforma

Digitalização de cartões (apenas Android):

if (Platform.OS === 'android') {
  // A leitura de cartões está disponível no Android
  // Ativada automaticamente quando a permissão da câmera é concedida
}

Tratamento de links diretos:

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 versão

PlataformaVersão mínima
iOS14.0+
AndroidAPI 21 (5.0)+
React Native0.70+

Dependências específicas da plataforma

Versões do SDK nativo:

PlataformaSDK nativoVersão
Androidcom.yuno.sdk:yuno-sdk-android2.8.1
iOSYunoSDK2.9.0

Testes em ambas as plataformas

Sempre teste sua integração tanto no iOS quanto no Android:

# iOS
npx react-native run-ios

# Android
npx react-native run-android

Diferenças comuns entre plataformas

RecursoiOSAndroid
Digitalização de cartões❌ Indisponível✅ Disponível
Links profundosLinks universaisFiltros de intenção
PermissõesInfo.plistAndroidManifest.xml
Componentes da interface do usuárioComponentes nativos do iOSJetpack Compose

Atualizado há 1 dia