DEV Community

Karthi Keyan
Karthi Keyan

Posted on

PayU Integration in React Native with CheckoutPro SDK

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. šŸ™Œ

Android Emulator Showing PayU Payment Interface

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
Enter fullscreen mode Exit fullscreen mode

For Unix-based systems (Linux/MacOS):

rm -rf ./node_modules/payu-non-seam-less-react
mv payu-non-seam-less-react ./node_modules/
Enter fullscreen mode Exit fullscreen mode

For Windows:

rmdir /s /q .\node_modules\payu-non-seam-less-react
move payu-non-seam-less-react .\node_modules\
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

PayU Demo VSCode AndroidĀ Emulator

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

For older react native versions

npm install payu-non-seam-less-react -save
react-native link payu-non-seam-less-react
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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) {
}
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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. šŸ˜Š

Top comments (0)