Integration for React Native

Prerequisites

Before implementing Mercado Pago Wallet payments, ensure you have:

  1. Enabled Mercado Pago in the DEUNA Admin Panel.
  2. A generated order token.
  3. Integrated the DEUNA React Native SDK in your project.
  4. Reviewed the Payment Widget documentation for React Native.

Payment Widget Implementation

Display the payment widget by passing the Mercado Pago configuration in the paymentMethods parameter:

import React from 'react';
import { View, Button } from 'react-native';
import { DeunaSDK, DeunaWidget } from '@deuna/react-native-sdk';

// Initialize SDK
const deunaSDK = DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  environment: 'sandbox', // or "production"
});

const PaymentScreen = () => {
  const launchPayment = () => {
    deunaSDK.initPaymentWidget({
      orderToken: 'YOUR_ORDER_TOKEN',
      paymentMethods: [
        {
          paymentMethod: 'wallet',
          processors: ['mercadopago_wallet'],
        },
      ],
      callbacks: {
        onSuccess: async (order) => {
          await deunaSDK.close();
          // Handle successful payment
          console.log('Payment successful:', order);
        },
        onError: async (error) => {
          // Handle payment errors
          console.error('Payment error:', error);

          if (...) {
            // Always await the close operation
            await deunaSDK.close();
            // Handle UI updates
            console.log('Payment widget closed due to error.');
          }
        },
      },
    });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <DeunaWidget instance={deunaSDK} />
      <Button title="Pay with Mercado Pago" onPress={launchPayment} />
    </View>
  );
};

📘

Specific Considerations for Mercado Pago

For secure payment processing and adherence to Mercado Pago's security policies, the SDK employs:

  • iOS: SFSafariViewController.
  • Android: Chrome Custom Tabs.

✅ These components are crucial for:

  • Providing secure payment processing.
  • Maintaining session continuity.
  • Complying with Mercado Pago's security policies.

✅ SafariViewController or Custom Tab Dismissal

It's important to note that the SafariViewController or Custom Tab must be manually closed by the user. The SDK's close() function will not automatically close them.


✅ Best Practices

The close() function returns a Promise. To ensure your code executes only after both the user manually dismisses the SafariViewController/Custom Tab and the payment modal completes its dismissal animation, make sure to await this Promise.

callbacks: {
  onSuccess: async (order) => {
      // Always await the close operation
      await deunaSDK.close();
      
      // Safe to execute after:
      // 1. User closes browser component
      // 2. Widget completes dismissal
  }
}

✅ Memory Management

Always call deunaSDK.close() when you no longer need the DEUNA widget to:

  • Free up allocated resources
  • Prevent memory leaks
  • Ensure proper cleanup of payment sessions
useEffect(() => {
  return () => {
    // Clean up when component unmounts
    deunaSDK.close();
  };
}, []);