Flutter Paytm Integration
How to Integrate Paytm Payment Gateway in Flutter? Flutter Paytm Integration with Example.
Introduction
- Paytm is a leading digital payment method in India. Millions of users rely on it to pay or recharge their mobile phones.
- In this blog, I will show you how to integrate Paytm Payment Gateway in your Flutter applications using a simple example.
- This blog has a built-in sample app that uses the library: paytm_allinonesdk.
- You can find the documentation of the Paytm plugin for Flutter at :
- This article will show you how to make a simple Flutter app integrating payment gateway with Paytm in Flutter.
- You will get to know what all things are necessary and how to proceed with integration.
Create a merchant account
- Before we proceed with the integration part, we have to first create a merchant Paytm account.
- To do that go to Dashboard and log in with your Paytm account details.
Generating API Keys
- Click on API keys under the Developer settings in the left menu.
- Now, Click the Generate now button under the Test API Details.
Building and Deploying Backend
- Paytm requires to generate and validate the checksum.
Checksum🤔 ??
- In a nutshell, Paytm uses the checksum signature to verify that API requests and replies transmitted between your app and Paytm over a network are not tampered with.
- Another thing is that the customer adds goods/services to the shopping/order cart and then goes to checkout on your mobile app.
- When the user proceeds to checkout, the Developer needs to call the Initiate Transaction API from the backend to generate a transaction token.
Transaction token🤔 ??
- To start transactions in our app, as a developer we need to first call this transaction API and this API will return the txn Token, which is a mandatory parameter that we must give in the AllInOneSdk to begin transactions in our app.
- So the question is how to generate the Checksum and Transaction Token?
- Here you have two options :
1) Use the below URL
- I have already created the backend and also deployed it on the Heroku server.
- flutter-paytm-backend.herokuapp.com/generat...
- You can simply make a POST request using
http
in Flutter and it will return you the Txn Token. - However, because this URL is publicly available, I would not recommend using it if you are integrating Paytm into your production application or if you are using it in a commercial project. This URL can be used for testing purposes.
2) Create and Deploy your own backend on your own Server. (Recommended)
- It's not as difficult as it appears.
- You only need to download the zip folder from the URL below, which contains all of the information needed to produce txnToken. As a result, you won't have to start from the beginning.
- After downloading it. You can deploy it on the server of your own choice.
- Okay, So these all are the
Pre-requisites
before we begin with the integration part.
Integration Of Paytm AllInOneSdk
in Flutter
Step: 1 - Add Dependency
- Inside the pubspec.yaml, add the latest
paytm_allinonesdk
package.dependencies: paytm_allinonesdk: ^1.1.4
Step: 2 - Create PaytmConfig
class
- Now to sperate the business logic, create a file named paytm_config.dart under lib.
Create PaytmConfig class and define the required variables.
class PaytmConfig { final String _mid = "..."; final String _mKey = "..."; final String _website = "DEFAULT"; // or "WEBSTAGING" in Testing final String _url = 'https://flutter-paytm-backend.herokuapp.com/generateTxnToken'; // Add your own backend URL String get mid => _mid; String get mKey => _mKey; String get website => _website; String get url => _url; }
- You can get the mid(Merchant Id) and mKey(Merchant Key) from the API Keys section in the Paytm Dashboard
- Now create one method
getMap
which will return a JSON encoded string. This string contains all the information required to generate txn Token.String getMap(double amount, String callbackUrl, String orderId) { return json.encode({ "mid": mid, "key_secret": mKey, "website": website, "orderId": orderId, "amount": amount.toString(), "callbackUrl": callbackUrl, "custId": "122", // Pass users Customer ID here }); }
Now, let's create a function called generateTxnToken which is used to make a POST request to the backend.
Future<void> generateTxnToken(double amount, String orderId) async { final callBackUrl = 'https://securegw.paytm.in/theia/paytmCallback?ORDER_ID=$orderId'; final body = getMap(amount, callBackUrl, orderId); try { final response = await http.post( Uri.parse(url), body: body, headers: {'Content-type': "application/json"}, ); String txnToken = response.body; await initiateTransaction(orderId, amount, txnToken, callBackUrl); } catch (e) { print(e); } }
- After getting TxnToken we can now initiate the transaction. Create a function called initiateTransaction
Future<void> initiateTransaction(String orderId, double amount, String txnToken, String callBackUrl) async { String result = ''; try { var response = AllInOneSdk.startTransaction( mid, orderId, amount.toString(), txnToken, callBackUrl, false, // isStaging false, // restrictAppInvoke ); response.then((value) { // Transaction successfull print(value); }).catchError((onError) { if (onError is PlatformException) { result = onError.message! + " \n " + onError.details.toString(); print(result); } else { result = onError.toString(); print(result); } }); } catch (err) { // Transaction failed result = err.toString(); print(result); } }
PaytmConfig Full Source Code : Here
Step:3 - Make Payment
- Now after all the configuration, we can make payment by calling the
generateTxnToken
function from our UI. FloatingActionButton( onPressed: () async { await paytmConfig.generateTxnToken(amount, orderId); }, child: const Icon(Icons.payment), ),
Final Output:
Wrapping Up
- I hope you found this article to be beneficial. If you have any feedback/queries, leave them in the comments.
- Thank you for spending time reading this article. See you in the next article. So, until then...