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 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 ≥ 13.15.0 dependency to your project:

yarn add react-native-webview

npm i react-native-webview

2. 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 required

Clang 16+ (shipped with Xcode 16+) rejects consteval calls inside the fmt pod that React Native includes. Add the following to the post_install block in your ios/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
end

Re-run pod install after editing the Podfile.

Expo (managed workflow) — run prebuild to regenerate the native ios/ and android/ directories with the module registered

npx expo prebuild

📘
Re-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-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