Karthi Keyan's Blog

PayU Integration in React Native with CheckoutPro SDK

Karthi Keyan's photo
Karthi Keyan
·

5 min read

Table of contents

Are you looking for a simple and fast way to integrate a payment interface in your React Native app? If yes, then you should check out the Checkout Pro SDK from PayU. 🙌

The Checkout Pro SDK is a complete, ready-to-use native checkout UI that allows you to integrate a payment interface with minimal effort and get started quickly. Explore other options at https://docs.payu.in/docs/explore-reactnative-sdks

The offical demo available at https://github.com/payu-intrepos/payu-non-seamless-react seems to be not working as intended. I also like to point out that the salt and merchant key given in the documentation is not working anymore 😕 all of these are causing various error messages ❌ while trying to run the application.

But don’t worry, I have resolved the issues and I’m sharing the working demo here: https://github.com/KarthiDreamr/PayU-ReactNative-CheckoutProSDK-Demo. 🎉

Prerequisites

Before we begin, make sure that you have the following:

  • A PayU account is created .

  • Node.js installed.

  • Environment set up for React Native.

  • An emulator or a physical device to run your app.

Fastest Approach 🚀

In this article, I will show you how to integrate the Checkout Pro SDK with your React Native app and make it work as expected. Just clone my repository by copying below and paste in vscode or other terminal

git clone https://github.com/KarthiDreamr/PayU-ReactNative-CheckoutProSDK-Demo.git
cd PayU-ReactNative-CheckoutProSDK-Demo
npm install

For Unix-based systems (Linux/MacOS):

rm -rf ./node_modules/payu-non-seam-less-react
mv payu-non-seam-less-react ./node_modules/

For Windows:

rmdir /s /q .\node_modules\payu-non-seam-less-react
move payu-non-seam-less-react .\node_modules\

These commands will replace the payu-non-seam-less-react folder from our current directory with the one containing bugs in the node_modules directory.

Finally, start your favorite emulator in Android Studio or XCode or connect to a developer mode enabled physical device. Then run the following command

npm start

Hurray!!! 🥳 You can explore more about the integration and modify the code based on your usecases by referring to this documentation https://docs.payu.in/docs/reactnative-checkoutpro-android-integration

My Proposed Corrections

In this section, I will explain the changes I made to the official demo to make it work as intended. Let’s clone the original git repo and make it work

git clone https://github.com/payu-intrepos/payu-non-seamless-react.git
cd 
npm install

There seem to be some issues with package.json and package-lock.json, so make sure that the following dependencies are installed first

Install Checkout Pro SDK

The following command installs the payu-non-seam-less-react package. This package contains the Checkout Pro SDK for React Native.

npm install payu-non-seam-less-react -save

For older react native versions

npm install payu-non-seam-less-react -save
react-native link payu-non-seam-less-react

Install the SHA-512 Package

The following command installs the js-sha512 package from npm and saves it as a dependency in your package.json file. This package is used to generate the SHA-512 hashes for the payment parameters. 🔑

npm install js-sha512

Modify the Android Build File

In the node_modules/payu-non-seam-less-react/android/build.gradle line 140 find and replace ‘classifier’ -> ‘archiveClassifier’ as shown below

// task androidJavadocJar(type: Jar, dependsOn: androidJavadoc) {
//     classifier = 'javadoc'
//     from androidJavadoc.destinationDir
// }

// task androidSourcesJar(type: Jar) {
//     classifier = 'sources'
//     from android.sourceSets.main.java.srcDirs
//     include '**/*.java'
// }

task androidJavadocJar(type: Jar, dependsOn: androidJavadoc) {
    archiveClassifier = 'javadoc'
    from androidJavadoc.destinationDir
}

task androidSourcesJar(type: Jar) {
    archiveClassifier = 'sources'
    from android.sourceSets.main.java.srcDirs
    include '**/*.java'
}

This is because the classifier property is deprecated and causes an error when building the app. The archiveClassifier property is the new way to specify the classifier for the archive task. 🔧

Change Salt and Merchant key for Staging:

New key and merchantSalt were provided to me by payu team on my request, remember to replace it in production with original

key -> 'gtKFFx'
merchantSalt -> '4R38IvwiV57FwVpsgOvTXBdLE4tHUXFW'
environment -> 1 // 0 for Production , 1 for Testing

Modify the Android Manifest Files

In the android/app/src/debug/AndroidManifest.xml and android/app/src/release/AndroidManifest.xml file of your React Native project, I added the following lines:

<manifest xmlns:tools="http://schemas.android.com/tools">
  <application
    ...
    android:theme="@style/AppTheme" // your AppTheme is in res/ value /styles.xml
    tools:replace="android:theme"
    >
    ...
  </application>
</manifest>

This is because the payu-non-seam-less-react package has a different theme than your app, and this causes a conflict when merging the manifests. The tools:replace attribute tells the Android build system to use your app’s theme instead of the package’s theme. 🎨

Resolving React native EventEmitterListener warning ( optional )

To fix the warning about the missing addListener and removeListeners methods, at line 59 of payu-non-seam-less-react/android/src/main/java/com/payubiz/PayUBizSdkModule.java add the following methods to the native module class.

// Required for rn built in EventEmitter Calls.

@ReactMethod
public void addListener(String eventName) {
}
@ReactMethod
public void removeListeners(Integer count) {
}

These methods are required for React Native’s built-in event emitter calls, which are used to communicate between JavaScript and native code using events. However, these methods do not need to have any implementation, because they are only used to register and unregister listeners on the JavaScript side. The actual event emitting is done by the sendEvent method, which you have already implemented. Therefore, by adding these empty methods, you are satisfying the NativeEventEmitter’s expectations and avoiding the warning. This is a temporary workaround until the payu-non-seam-less-react package is updated to include these methods by default.

Find more ways to handle it here

https://stackoverflow.com/questions/69538962/new-nativeeventemitter-was-called-with-a-non-null-argument-without-the-requir

Add SMS Permission (optional)

In the android/app/src/main/AndroidManifest.xml file of your React Native project, I added the following line:

<uses-permission android:name="android.permission.RECEIVE_SMS" />

This is an optional step, but it allows the app to receive the OTP SMS from the bank and autofill it in the payment UI. This improves the user experience and reduces the chances of errors.

Customize the App.js File

In the App.js file of your React Native project, I copied and pasted the code from the official demo and made some modifications. I renamed the component and changed the payment parameters to suit my use case. I also added some comments to explain the code.

You can customize the App.js file according to your needs, such as changing the merchant key, the transaction ID, the amount, the product info, etc. You can also change the UI elements, such as the buttons, the text, the colors, etc.

I hope this draft helps you complete your Medium article. If you have any questions or feedback, please let me know. 😊

PayUReact Nativepayment gateway