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. In this document, we will highlight the steps required to integrate All-in-One SDK with React Native platform for your app. This platform helps you to build a seamless and responsive checkout experience for your application.
This integration will support the following flows:
App Invoke Flow: In case the Paytm app is installed, it will be launched to complete the transaction and give the response back to your app.
Redirection Flow: In case the Paytm app is not installed, All-in-One SDK will open a web view to process transaction and give the response back to your app.
Overview of payment processing in React Native App
On your mobile app, the user adds goods/services into the shopping/order cart and proceeds to checkout. You call the Initiate Transaction API from your backend to generate transaction token.
Within the Initiate Transaction API, you also get an option to include single or multiple payment sources for the users, thus, allowing you to make your own payment page with multiple payment sources.
Launch the Hybrid app bridge to invoke Paytm All-in-One SDK with the transaction token received in step 1.
If Paytm app is installed on user's phone, the payment will be completed on Paytm app using the user's saved credentials else transaction will be processed via web view within the All-in-One SDK(Paytm hosted redirection flow).
Paytm processes the transaction with the user’s bank and returns the transaction response to your app.
Open Podfile and Update Platform Version
Navigate to the ios folder and open Podfile. You can do this using the following code.
$ cd ios && open podfile
Install Pods Using Cocoapods
Install pods after updating iOS platform. : pod install && cd ..
Add the following in ios project
Open the projectName.workspace in ios folder.
Open Info.plist : Add LSApplicationQueriesSchemes. Change its type to Array. Create a new item in it and set its value as "paytm"
Go to Info tab -> URL Types : Add a new URL Type that you’ll be using as the callback from Paytm App (URL Scheme: "paytm"+"MID"). Example: paytmMid123
Open AppDelegate.m: Add following method before the end of the file ended by @end
Import LinkingManager to the top of the file which has delegate methods for implementing and handling URLScheme(response from Paytm invoke will be received here in this method. Which in turns notifies the Plugin.)
Amount in INR payable by the customer. It should contain digits up to two decimal points and the amount should not include any separator like (",").
Defines the staging or production server (True for staging and False for production)
On completion of the transaction, Paytm Payment Gateway sends the response on this URL. This URL should be same as passed in callbackURL of Initiate Transaction API. It can be a dynamic or static response URL as mentioned below:
In case of failure, error will be consumed in catch block
Sample failure response:
[Error: Your payment has been declined by your bank. Please try again or use a different method to complete the payment.]
You should validate the transaction response via a server-side request using the Transaction Status API. This API requires checksumhash in request and response. You must verify the Order ID and Amount with your data. The status should be treated as the final status of the transaction in all cases.
Paytm provides payment response on both Callback URL and Webhook URL. Please click here for more details.