Paytm All-in-One SDK Integration for React Native Platform
To merchants who have built their app on React Native platform, Paytm provides you with a bridge to conveniently integrate All-in-One SDK. we will highlight the steps required in integrating All-in-One SDK with React Native platform for your app. This platform helps you to build a seamless and responsive checkout experience with Paytm for your application.
This integration will support the following flows:
App Invoke Flow for Paytm: if the Paytm app is installed, it will be launched and complete the transaction and give the response back as success or failure.
Redirection Flow for Paytm: If the Paytm app is not installed, All-in-One SDK will open a web view to process transaction and give the response back as success or failure
Pre-requisites
Before you begin the integration for all-in-one SDK, make sure you have followed the steps below:
- Create an account on the Paytm dashboard as a merchant. Click now to create an account
- Go through the checksum logic and understand how to generate and validate the checksum.
- Get the staging IOS and ANDROID Paytm app for integration testing on the merchant staging environment.
- Go through Paytm ALL-IN-ONE-SDK documentation before proceeding with integration.
- Call Init transaction API from your backend to generate Transaction Token.
Steps Involved
Install Paytm ALL-IN-ONE SDK with the below command
yarn add paytm_allinone_react-native
Implementation For Android
Change the minSDKversion to ‘18’ in the project level build.gradle file.
Go to android/build.gradle file
Inside the android project of the react-native app, add the below line to the ‘repositories’ section of the project-level build.gradle file in android/build.gradle file
allprojects { repositories { ... maven { url "https://artifactory.paytm.in/libs-release-local" } } }
Add the following lines under dependencies
implementation "com.squareup.okhttp3:okhttp:4.2.1" implementation "com.squareup.okhttp3:logging-interceptor:4.2.1" implementation "com.squareup.okhttp3:okhttp-urlconnection:4.2.1"
Note:
If you get an Okhttp Exception, make the following changes to your build.gradle (app level):
Exclude Okhttp from the app and invoke SDK for Paytm
implementation('com.paytm.appinvokesdk:appinvokesdk:1.5.4'){ exclude group: "com.squareup.okhttp3", module: 'okhttp3' }
If Okhttp SDK is not added to your project dependencies please then add
implementation "com.squareup.okhttp3:okhttp:4.8.0"
Implementation for IOS
Open Podfile and Update the Platform Version in podfile
Navigate to the ios folder and then open Podfile.
Install Pods Using Cocoapods
Install pods after updating iOS platform and run the below command
pod install && cd ..
Open Info.plist : Add LSApplicationQueriesSchemes. Change its type to Array. Create a new item in info.plist and set its value as “paytm”
<key>LSApplicationQueriesSchemes</key> <array> . . . . . . . <string>paytm</string> </array>
Go to Info tab -> URL Types
Add a new URL Type that we will be using as the callback from Paytm App (URL Scheme: “paytm”+”MID”). Example: paytmmidxxxxx
Open AppDelegate.m:
Add the following method before the end of the file before ended by @end in appdelegate.m file
Import LinkingManager on the top of the file which has delegate methods for implementing and handling the URLScheme for paytm all in one sdk
// appdelegate.m #import <React/RCTLinkingManager.h> - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options { NSString *urlString = url.absoluteString; NSDictionary *userInfo = [NSDictionary dictionaryWithObject:urlString forKey:@"appInvokeNotificationKey"]; [[NSNotificationCenter defaultCenter] postNotificationName: @"appInvokeNotification" object:nil userInfo:userInfo]; return [RCTLinkingManager application:app openURL:url opions:options]; }
Implementation in React Native
Import all-in-one SDK on top of your file
import AllInOneSDKManager from ‘paytm_allinone_react-native’;
Call starttransaction method from your React Native App to invoke Paytm all-In-One SDK for payment.
AllInOneSDKManager.startTransaction( OrderId, mid, tranxToken, amount, callbackUrl, isStaging, appInvokeRestricted, urlScheme ) .then((result) => { updateUI(result); }) .catch((err) => { handleError(err); });