All-in-One SDK Integration for Ionic platform (Deprecated)

Follow the steps below to integrate All-in-One SDK in your Ionic app:

Steps for Capacitor Project

1. Add the line below to ‘repositories’ section of your project level build.gradle file.

   maven {
       url "https://artifactory.paytm.in/libs-release-local"
   }

2. Add the line below to 'dependencies' section of your app build.gradle.

   implementation 'com.paytm.appinvokesdk:appinvokesdk:1.5.3'

3. Add AllInOneSDKPlugin class in project (see Appendix at the end of this document), and then in the MainActivity, use add function in OnCreate ( add(AllInOneSDKPlugin.class) ).

4. Update setResult method in AllInOneSDKPlugin class as per your response requirement in the ionic app.

5. Call startTransaction method from your Ionic app to invoke Paytm module.

For further queries visit the SDK based integration documentation.

Steps for Ionic Project

1. Using plugin from ‘@capacitor/core’ fetch AllInOneSDKPlugin class.

   import { Plugins } from "@capacitor/core";
   const { AllInOneSDKPlugin } = Plugins;

2. Start the process by calling AllInOneSDKPlugin.startTransaction with the appropriate parameters.

   let response = await AllInOneSDKPlugin.startTransaction({
       mid: mid, orderId: orderId, txnToken: txnToken, amount: amount,
       isStaging: isStaging, callbackUrl: callbackUrl 
   });

   Attributes	Description	Mandatory
   mid String(20)	This is a unique identifier provided to every merchant by Paytm. MID is part of your account credentials and is different on staging and production environment.	Yes
   orderid String(50)	Unique reference ID for a transaction which is generated by merchant Special characters allowed in Order ID are: "@" "-" "_" ".".	Yes
   txnToken String	Transaction token received from calling Initiate Transaction API (Note - pass same order id in SDK which was used for initiateTransaction).	Yes
   amount String	Amount in INR payable by the customer. Should contain digits up to two decimal points. The amount should not include any separator like (",")	Yes
   IsStaging Boolean	IsStaging is to define staging or production server (True for staging and False for production)	Yes
   callbackurl String(255)	On completion of transaction, Paytm payment gateway will send the response on this URL. This can be a static response URL as mentioned below: Staging Environment: "https://securegw-stage.paytm.in/theia/paytmCallback?ORDER_ID=<order_id>" Production Environment: "https://securegw.paytm.in/theia/paytmCallback?ORDER_ID=<order_id>"	Yes

3. Callback will be received in the above “response” object in JSObject format. 
   Sample Response:

   Bundle[
   {
       STATUS=TXN_SUCCESS,
       ORDERID="Order Id",
       CHARGEAMOUNT=0.00,
       TXNAMOUNT=1.00,
       TXNDATE=2020-07-21 19:00:05.0,
       MID="Merchant Id",
       TXNID="Transaction Value",
       RESPCODE=01,
       PAYMENTMODE=UPI,
       BANKTXNID="Bank transaction Id",
       CURRENCY=INR,
       GATEWAYNAME=ICICI,
       RESPMSG=Txn Success
   }]

4. Verifying Payment

   1. 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.

   2. Paytm provides payment response on both Callback URL and Webhook URL. Please refer to the sample response for different payment sources here.

Appendix

AllInOneSDKPlugin class

package;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import com.getcapacitor.JSObject;
import com.getcapacitor.NativePlugin;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;
import com.paytm.pgsdk.PaytmOrder;
import com.paytm.pgsdk.PaytmPaymentTransactionCallback;
import com.paytm.pgsdk.TransactionManager;

@NativePlugin(requestCodes = {AllInOneSDKPlugin.REQ_CODE})

public class AllInOneSDKPlugin extends Plugin {
    protected static final int REQ_CODE = 0;

    @PluginMethod
    public void startTransaction(PluginCall call) {
        saveCall(call);
        String orderId = call.getString("orderId");
        String mid = call.getString("mid");
        String txnToken = call.getString("txnToken");
        String amount = call.getString("amount");
        String callbackUrl = call.getString("callbackUrl");
        boolean isStaging = call.getBoolean("isStaging");
        if (orderId == null || mid == null || txnToken == null || amount == null ||
        orderId.isEmpty() || mid.isEmpty() || txnToken.isEmpty() || amount.isEmpty()) {
            if (txnToken == null || txnToken.isEmpty()) {
                Toast.makeText(getContext(), "txnToken error", Toast.LENGTH_LONG).show();
            } 
            else {
                Toast.makeText(getContext(), "Please enter all field", Toast.LENGTH_LONG).show();
            }
            return;
        }
        String host = "https://securegw.paytm.in/";
        if (isStaging) {
                host = "https://securegw-stage.paytm.in/";
        }
        if(callbackUrl == null || callbackUrl.trim().isEmpty()) {
                callbackUrl = host + "theia/paytmCallback?ORDER_ID=" + orderId;
        }

        PaytmOrder paytmOrder = new PaytmOrder(orderId, mid, txnToken, amount, callbackUrl);
        TransactionManager transactionManager = new TransactionManager(  paytmOrder, new PaytmPaymentTransactionCallback() {

            @Override
            public void onTransactionResponse(Bundle bundle) {
                Log.d("LOG", "Payment Transaction is successful " + bundle);
                setResult("Payment Transaction response " + bundle.toString(), call);
            }

            @Override
            public void networkNotAvailable() {
                setResult("networkNotAvailable", call);
            }

            @Override
            public void onErrorProceed>(String s) {
                setResult(s, call);
            }

            @Override
            public void clientAuthenticationFailed(String s) {
                setResult(s, call);
            }

            @Override
            public void someUIErrorOccurred(String s) {
                setResult(s, call);
            }

            @Override
            public void onErrorLoadingWebPageString inFailingUrl) {
                setResult(inErrorMessage, call);
            }

            @Override
            public void onBackPressedCancelTransaction() {
                setResult("onBackPressedCancelTransaction", call);
            }


            @Override
            public void onTransactionCancel(String s, Bundle bundle) {
                setResult(s + " " + bundle, call);
            }
        });
        transactionManager.setShowPaymentUrl(host + "theia/api/v1/showPaymentPage");
        transactionManager.startTransaction(getActivity(), REQ_CODE);
    }

    @Override
    protected void handleOnActivityResult(int requestCode, int resultCode, Intent data) {
        super.handleOnActivityResult(requestCode, resultCode, data);
        if (requestCode == REQ_CODE && data != null) {
            PluginCall call = getSavedCall();
            setResult(data.getStringExtra("nativeSdkForMerchantMessage") + 
            data.getStringExtra("response"), call);
        }
    }

    private void setResult(String message, PluginCall call) {
        if (call != null) {
            JSObject result = new JSObject();
            result.put("result", message);
            call.resolve(result);
        } 
        else {
            Toast.makeText(getContext(), "call is null", Toast.LENGTH_LONG).show();
        }
    }
}

Steps for Capacitor Project

1. Add the latest Paytm All-in-One SDK to the capacitor app (Drag and Drop).

2. Change the app settings in Capacitor.

   1. General -> Frameworks, Libraries and Embedded Content: verify that the SDK is added and change the Embed to “Embed & Sign”.
      
      

   2. Info: Add LSApplicationQueriesSchemes. Change the type to Array. Create a new item in it and set its value as “paytm”.
      
      

   3. Info -> URL Types: Add a new URL Type that you’ll be using as the callback from Paytm app (URL Scheme: “paytm”+”MID”). Example: paytmMid123.
      
      

3. Add the Plugin classes below to your project.

   1. AllInOneSDKPlugin.swift

      //  AllInOneSDKPlugin.swift
      //  App
      import Foundation
      import Capacitor
      import AppInvokeSDK
      @objc(AllInOneSDKPlugin)
      public class AllInOneSDKPlugin: CAPPlugin {
          var call: CAPPluginCall?
          let handler = AIHandler()
          @objc func openPaytm(_ call: CAPPluginCall) {
              self.call = call
              let mid = call.getString("mid") ?? ""
              let amount = call.getString("amount") ?? ""
              let orderId = call.getString("orderId") ?? ""
              let txnToken = call.getString("txnToken") ?? ""
              let isStaging = call.getBool("isStaging") ?? false
              var callbackUrl: String?
              if let callback = call.getString("callbackUrl"), !callback.isEmpty {
                  callbackUrl = callback
              }
              print("mid:", mid, ", amount:", amount, ", orderId:", orderId, ", txnToken:", txnToken, ", callbackUrl:", callbackUrl, ", isStaging:", isStaging)
              self.handler.openPaytm(merchantId: mid, orderId: orderId, txnToken: txnToken, amount: amount, callbackUrl: callbackUrl, delegate: self, environment: isStaging ? .staging : .production)
          }
      }
      extension AllInOneSDKPlugin: AIDelegate {
          public func openPaymentWebVC(_ controller: UIViewController?) {
              if let vc = controller {
                  DispatchQueue.main.async {[weak self] in
                      self?.bridge.viewController.present(vc, animated: true, completion: nil)
                  }
              }
          }
          public func didFinish(with status: PaymentStatus, response: [String : Any]) {
              print(status, response)
              self.call?.resolve(response)
          }
      }

   2. Add AllInOneSDKPlugin.m

      //  AllInOneSDKPlugin.m
      //  App
      #import <Foundation/Foundation.h>
      #import <Capacitor/Capacitor.h>
      // Define the plugin using the CAP_PLUGIN Macro, and
      // each method the plugin supports using the CAP_PLUGIN_METHOD macro.
      CAP_PLUGIN(AllInOneSDKPlugin, "AllInOneSDKPlugin",
                 CAP_PLUGIN_METHOD(openPaytm, CAPPluginReturnPromise);
      )

   3. It will ask to add a bridging header. Allow it.
       

Steps for Ionic Project

1. Calling the plugin

   1. import Plugins in your react code.

      import { Plugins } from "@capacitor/core";
      const { AllInOneSDKPlugin, App } = Plugins;

   2. In your react code, call AllInOneSDKPlugin.openPaytm method with the appropriate parameters Call Initiate Transaction API from your backend to generate Transaction Token (txnToken).

      let response = await AllInOneSDKPlugin.openPaytm({mid: mid, amount: amount,
          orderId: orderId, callbackUrl: callbackUrl, txnToken: txnToken, isStaging: isStaging });

2. Handling the callback

   1. When Paytm app is not installed - you’ll receive the response when calling AllInOneSDKPlugin.openPaytm.

      let response = await AllInOneSDKPlugin.openPaytm({mid: mid, amount: amount, 
          orderId: orderId, callbackUrl: callbackUrl, txnToken: txnToken, isStaging: isStaging });
      console.log("Paytm Callback Response: " + response);

   2. When the Paytm app is installed - you need to use app Plugin to listen to the Capacitor notification appUrlOpen.

      App.addListener("appUrlOpen", (data: any) => {
          console.log("Paytm Callback Response: ", data.url, data.options);
      });

3. Verifying Payment

   1. 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.

   2. Paytm provides payment response on both Callback URL and Webhook URL. Please refer to the sample response for different payment sources here.