Integration with React Native CLI - Android - Mercado Pago Developers
Which documentation are you looking for?

Do not know how to start integrating? 

Check the first steps

Integrate Checkout Pro for Android with React Native CLI

Important
Before starting to integrate Checkout Pro for Mobile, you will need to have a preference created in your backend. If you haven't already, go to Create preference .

When developing mobile apps with React Native, the need to display web content within the app often arises. To achieve this, there are several options, among which the use of Custom Tabs (for Android) and Safari View Controller (for iOS) stand out. These technologies allow web pages to be opened in a native browser embedded within the application, providing a smoother and more consistent browsing experience for users.

In this step we are going to install and configure the necessary dependencies to implement Custom Tabs in your project developed in React Native.

Use of InAppBrowser

Client-Side

With the React Native CLI, we suggest using React-Native-InAppBrowser, a highly flexible dependency that provides a comprehensive solution for integrating a browser web inside your React Native app. When considering the use of React-Native-InAppBrowser-Reborn the following aspects were taken into account:

  • It is a dependency that allows to provide an integrated and fluid web browsing experience within the application.
  • It has a wide variety of customizable functions to adapt to the specific needs of the application.
  • Keeps users within the context of the application, increasing retention and consistency of the experience.

To install it, run the following command in your terminal.

          
npm install react-native-inappbrowser-reborn --save

        
          
yarn add react-native-inappbrowser-reborn

        

Android support

If you use Android Support, your android/build.gradle file should have the properties described below. If any are missing, add them. The versions can be the same or higher.

plain

buildscript {
  ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 16
    compileSdkVersion = 28
    targetSdkVersion = 28
    // Only using Android Support libraries
    supportLibVersion = "28.0.0"
  }

AndroidX

If you use AndroidX, your file should have these properties. If any are missing, add them. The versions can be the same or higher.

plain

buildscript {
  ext {
    buildToolsVersion = "30.0.2"
    minSdkVersion = 21
    compileSdkVersion = 30
    targetSdkVersion = 30
    ndkVersion = "21.4.7075529"
    // Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
    androidXAnnotation = "1.2.0"
    androidXBrowser = "1.3.0"
    // Put here other AndroidX dependencies
  }

Implementation of React-Native-Inappbrowser

Client-Side

To implement the React-Native-Inappbrowser dependency, follow the example below.

JavaScript

import {
	Button,
	Linking
} from 'react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';
const ButtonCustomTabs = () => {
		const openUrl = async (url) => {
			if (await InAppBrowser.isAvailable()) {
				InAppBrowser.open(url, {
					// iOS Properties
					dismissButtonStyle: 'cancel',
					preferredBarTintColor: '#453AA4',
					preferredControlTintColor: 'white',
					readerMode: false,
					animated: true,
					modalEnabled: true,
					// Android Properties
					showTitle: true,
					toolbarColor: '#6200EE',
					secondaryToolbarColor: 'black',
					enableUrlBarHiding: true,
					enableDefaultShare: true,
					forceCloseOnRedirection: false, // Animation
					animations: {
						startEnter: 'slide_in_right',
						startExit: 'slide_out_left',
						endEnter: 'slide_in_left',
						endExit: 'slide_out_right',
					},
				});
			} else {
				Linking.openURL(url);
			}
		};
		return ( < Button title = "Press Me"
			onPress = {
				() =>
				openUrl('YOUR-URL-PREFERENCE')
			}
			/> );
		};
		export default ButtonCustomTabs;

How to return to your app

Client-Side

Deep Links are a powerful way to allow direct navigation to specific screens or sections of a mobile application.

From our checkout, you can configure Deep Links to return to your application, either by clicking a "Back" link or automatically after completing a successful payment flow, redirecting you back to your application.

For this, we must add the back_urls and auto_return properties when creating the payment preference, as needed.

To learn more, you can visit the documentation on Return URLs.

Client-Side

In order to receive and manage the Deep Link, it is necessary to configure in the React Native project the scheme and path that make up the Deep Links that you receive to redirect to some part of your application. To do this, add the deep link in the android /app/src/main/AndroidManifest.xml file between the "activity" tags.

In the example below, you'll set up a Deep Link of the form myapp://checkout/congrats.

AndroidManifest.xml

<activity ....> ....
<intent-filter data-generated="true">
<action android:name="android.intent.action.VIEW"/>
<data android:scheme="myapp" android:host="checkout" android:pathPrefix="/congrats"/> <category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
.... </activity>

The pathPrefix property is optional and can be added to direct a specific view of the application.

Client-Side

Finally, we will see how we can configure our React Native application to receive and manage Deep Links. This will be addressed using the react-native-inappbrowser dependency.

In the case of Android, the closing of the custom tab is done automatically when redirecting to a valid Deep Link. In the event that the link is not valid, no redirection action will be executed from the custom tab.