Requirements

To use DEUNA's React Native SDK, you need:

NodeJs 20 or higher
Yarn or NPM as a package manager
React 18.2.0 or higher
React Native 0.72.0 or higher
React Native WebView 13.12.5 or higher
Expo SDK 50 or higher (for apps with Expo)
An active account at DEUNA
Valid DEUNA credentials
Minimum configurations in your Android project: minSdkVersion 24 or higher

📘
The DEUNA React Native SDK is compatible with Huawei devices with HarmonyOS 2.0 or higher.

📘
If you experience any delays in obtaining your credentials, then contact support@deuna.com.

Install the SDK

Begin the initialization of the SDK.

🚧
Follow security and privacy practices when handling user financial information.

1. Add the SDK

Use the following command to add the DEUNA SDK to your React Native or Expo project:

yarn add @deuna/react-native-sdk

npm i @deuna/react-native-sdk

Add a react-native-webview dependency to your project:

yarn add react-native-webview

npm i react-native-webview

2. Initialize the SDK

Initialize the SDK or create an instance with aDeunaSDK class.

import { DeunaSDK, Environment } from '@deuna/react-native-sdk';
const deunaSDK = DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  environment: 'sandbox', // sandbox or production
});

📘
📋 Migration Guide from 1.x to 2.x.x
If you are upgrading from a 1.x version of the SDK, please read the migration guide carefully.
What's Breaking:

Removed expo-web-browser dependency - No longer included as a dependency. Some merchants uses webpack to bundle their apps and expo-web-browser is not compatible with webpack and we need to support it.

API changes - SDK initialization for merchants that uses Mercado Pago wallet require an adapter configuration to open the redirect url in a custom tab or safari view controller.

Scenario 1: Basic Usage (No Changes Needed)
If you don't use any payment method that cannot be rendered in a tradicional webView like Mercado Pago Wallet, no changes are required. Otherwise, you need to configure a custom adapter using the InAppBrowserAdapter interface.
Scenario 2: Custom Tabs/Safari View Controller for Specific Payments
External redirects work by default and open in WebView. However, some payments (like Mercado Pago wallet) require opening in Custom Tabs (Android) or Safari View Controller (iOS) to function properly. For these cases, you need to configure a custom adapter.
For more info check the following link.

3. Choose the widget component

Continue the integration process following the specific instructions for each component.

Choose the component:

Payment Widget React

Payment Vault React