Paytm payment gateway integration in flutter using paytmkaro plugin.

Flutter is an open source UI software development tool created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.

Payment Gateway Integration is a soaring trend in the app development industry. This has made online purchasing easier for both sellers and buyers as a seller does not need to wait for the payment and the buyer can make a hassle-free online payment. Integrating payment gateways in an application allows a successful payment in just a few clicks. Nowadays many services require an option of online payment and many payment gateways are available for the same.

Now, let’s talk about Paytm payment gateway integration in Flutter. Flutter is a cross-platform app development framework which supports Android and iOS platform. Apps on Flutter are built using a high-performance language called Dart.

We are going to see how we integrate a paytm payment gateway in flutter using paytmkaro plugin.

We can do this just in 3 steps. Follow the below steps and we are done.

1.First of all make a change the minsdk version to 19.

android/app/build.gradle
minSdkVersion 19

2. Add a Server Side code which generate a transection token for you in paytm server.

You get a server code from this github repo

We need a 2 files , first one PaytmChecksum.php , Second file intiateTansection.php. We need to upload this file to server.

After uploading the files we get a url like : https://example.com/intiateTansection.php

Copy Paste this Url we needed this.

3. Start Adding Dart code.

First add the plugin paytmkaro in dependencies in pubspec.yaml

dependencies:   
   paytmkaro: ^1.1.0

Then create a object of paytmkaro

PaytmKaro _paytmKaro = PaytmKaro();

Call the function named startTransaction and passs the required arguments.

try {
    Paytmresponse paymentResponse = await _paytmKaro.startTransaction(
      url: "SERVER SIDE URL"(pass the url of intiate transection),
      mid: "merchant_Id",
      isStaging: "For testing use true for production false ",
      mkey: "merchant_key",
      customerId: "customer_Id",
      amount: "amount",
      orderId: "order_Id",
    );
    if (paymentResponse.status == "TXN_SUCCESS") {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => txnSuccessful(
            PaytmResponse: paymentResponse,
          ),
        ),
      );
    } else if (paymentResponse.status == "TXN_FAILURE") {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => txnFailed(
            PaytmResponse: paymentResponse,
          ),
        ),
      );
    }
  } catch (e) {
    print(e);
    key.currentState.showSnackBar(SnackBar(content: Text(e.toString())));
  }
}

Its give a result in model named Paytmresponse . You can adjust screens as per status of transection .

Note: If you are using testing data please make sure that paytm app is not installed in device. If paytm app is installed in device it show’s error .