Initialize the SDK React Native DEUNA in your application.
Stable version: 2.1.3
The DEUNA React Native SDK is compatible with Expo.
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.73.0 or higher
- React Native WebView 13.15.0 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 24or 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 [email protected].
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-sdknpm i @deuna/react-native-sdkAdd a react-native-webview ≥ 13.15.0 dependency to your project:
yarn add react-native-webviewnpm i react-native-webview2. Linking
Starting from version 2.1.0, the SDK includes a native module that enables native Google Pay and Apple Pay payment sheets.
React Native CLI— run pod install to link the native module on iOS:
cd ios && pod install
⚠️ iOS (React Native CLI only): Xcode 16+ / Clang 16+ build fix requiredClang 16+ (shipped with Xcode 16+) rejects
constevalcalls inside thefmtpod that React Native includes. Add the following to thepost_installblock in yourios/Podfile:post_install do |installer| react_native_post_install(installer, config[:reactNativePath], :mac_catalyst_enabled => false) # Fix: fmt consteval incompatibility with Xcode 16+ / Clang 16+ installer.pods_project.targets.each do |target| target.build_configurations.each do |config| if target.name == 'fmt' config.build_settings['CLANG_CXX_LANGUAGE_STANDARD'] = 'c++17' end end end end# Resolve react_native_pods.rb with node to allow for hoisting require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip platform :ios, min_ios_version_supported prepare_react_native_project! linkage = ENV['USE_FRAMEWORKS'] if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_sym end target 'holaRnCli' do config = use_native_modules! use_react_native!( :path => config[:reactNativePath], # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'holaRnCliTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false, # :ccache_enabled => true ) installer.pods_project.targets.each do |target| target.build_configurations.each do |config| if target.name == 'fmt' config.build_settings['CLANG_CXX_LANGUAGE_STANDARD'] = 'c++17' end end end end endRe-run
pod installafter editing the Podfile.
Expo (managed workflow) — run prebuild to regenerate the native ios/ and android/ directories with the module registered
npx expo prebuildRe-run this command every time you upgrade the SDK.
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-browserdependency - No longer included as a dependency. Some merchants uses webpack to bundle their apps andexpo-web-browseris 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
InAppBrowserAdapterinterface.
Scenario 2: Custom Tabs/Safari View Controller for Specific PaymentsExternal 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: