Master React Native Custom Modules: Effortless Braintree DropIn Integration

When integrating payment solutions in your React Native app, a common problem faced is the complexity of integrating Braintree. This often involves challenges like updating CocoaPods, configuring the modules correctly, and ensuring compatibility across different platforms.

The module makes it very easy to integrate Braintree’s payment solutions into your React Native apps, providing a smooth experience on both iOS and Android. This blog will show you step-by-step how to create this custom React Native module for easy integration.

This blog consists of two sections.

• Section 1: Dive into the creation of the custom native module.

• Section 2: Explore the Braintree Drop-In integration using native module.

Section 1: Dive into the creation of the custom native module.

In this section, we will establish the foundational structure of the native module by creating the essential files and configurations for both iOS and Android platforms. We will guide you through initializing the project and setting up the native code using Objective-C and Swift for iOS, as well as Java for Android.

What are NativeModules?

React Native is a powerful framework for building mobile applications using JavaScript and React. However, there are scenarios where you need to access native platform functionalities that are not readily available in React Native.

This is where React Native modules come in handy. They allow you to write native code for iOS and Android, and expose that functionality to your React Native JavaScript code. Native modules are essential for:

• Accessing platform-specific APIs that are not exposed by React Native.

• Implementing performance-critical functionality directly in native code.

• Leveraging existing native libraries and frameworks.

Prerequisites

Before you start, make sure you have the following installed:

• Node.js and npm: Necessary for running JavaScript and managing packages.

• React Native CLI: A command-line interface for creating and managing React Native projects.

• Xcode: The development environment for iOS.

• Android Studio: The development environment for Android.

Project Structure

A standard React Native module minimum project might look something like this:

Initializing and naming the module

Our end goal is to develop a Braintree DropIn module, so I am naming this module .

To get started, create a new React Native project and set up the necessary files for the module.

IOS Native Module

Setting Up the IOS Project

1. Open Your Project in Xcode: Open the file in Xcode.

2. Add Native Code:

• Create a new Header file named and add the following code:

• Create a new objective-c file named and add the following code:

• My iOS logic will mainly be written in swift language, so I’m creating a swift file named:

• Note this is very important step in using swift module in react native. So if you want to use obj-c code or modules in swift file then you need to create a bridging header file in ios folder root and in my case it is necessary.

With this, you are done on IOS side with its minimal native module setup.

Android Native Module

Setting Up the Android Project

1. Open Your Project in Android Studio: Open the project in Android Studio.

2. Add Native Code:

• Create a new file named in and add the following code:

• Create a new file named in and add the following code:

Using the Braintree Drop-In Module in JavaScript

After setting up the native modules for both iOS and Android, you need to integrate the module with your React Native JavaScript code. Follow these easy steps to implement this.

Exporting the Native Module

First, create an file to export the native module.

Using the Module in Your React Native Application

Now you can use the module in your React Native application. Below is an example of how to integrate and use the module in a React component.

Voila!

You have successfully created a custom react native package! Now, let’s dive into our custom Braintree Drop-In implementation in the above files.

Section 2: Explore the Braintree Drop-In integration using native module.

We will be updating the files created in Section 1.

IOS Integration

1. Update the Podfile

Add the following line to your Podfile to include the Braintree Drop-In SDK:

After updating the Podfile, install the new pod by running:

2. Update the Objective-C Bridge Header

Update the file named in the directory with the following content:

3. Update the Objective-C Interface File

Update the file named in the directory with the following content:

4. Update the Swift Implementation File

Update the file named in the directory.

This swift file integrates Braintree’s Drop-In UI into a React Native application. It defines a method that initiates payment processing using a provided client token. The module handles errors, ensures UI operations run smoothly on the main thread, and communicates results back to React Native via promises ( and ).

5. Configure the Bridging Header in Xcode

• Open your project in Xcode by opening the file.

• Navigate to the of your project target.

• Find the section.

• Set the to

and you are done from the IOS side.

Android Integration

Ensure your React Native project is set up correctly with the necessary dependencies. Here’s how you can configure the Android module for integrating Braintree Drop-In UI.

Modify build.gradle file

Add the required dependencies in your Android module’s file:

AndroidManifest.xml

Ensure your manifest file includes the package name and permissions if necessary.

Java Code Setup Below

RNBraintreeDropIn.java

This file sets up the native module to handle the interaction between JavaScript and Java for launching the Braintree Drop-In UI using showDropIn method.

RNBraintreeDropInPackage.java

This file defines the package that integrates the module into the React Native framework.

RNBraintreeDropInActivity.java

This activity handles the Drop-In UI setup and interaction, communicating payment results back to the React Native module.

res/layout/activity_braintree_drop_in.xml

Define the layout for in XML format:

To summarise, in this integration, we’ve configured the Braintree Drop-In UI for React Native on Android. First, dependencies were set in , including . The module manages communication between JavaScript and Java, initiating the Drop-In UI via . Here, users select a payment method, with results sent back to JavaScript using promises. integrates this module into React Native. The UI layout is defined in . This setup enables seamless payment processing in your React Native Android app, ensuring a straightforward and effective user payment experience.

Typescript

Typescript for this plugin in

Usage

Here is the plugin usage if you want to use/test in your own react native project

Installation

This plugin is published here, so you can use it.

Demo

Check out the Braintree Drop-In UI successfully integrated into React Native 📱. Enjoy a seamless payment experience 😎.

Conclusion 🎯🎯🚀🚀

Creating native modules in React Native opens up a world of possibilities for enhancing app functionality with platform-specific capabilities. Whether integrating essential payment gateways or implementing complex native features, native modules empower you to deliver robust, high-performance mobile applications.

Happy coding!

Checkout react-native-braintree-dropin-wrapper github repo

You can find Ehtisham's article on our Medium, alongside many more. Happy reading!