search

All-in-One SDK Integration for Ionic platform

To merchants who have built their app on an ionic platform, Paytm provides a bridge to conveniently integrate All-in-One SDK for both Android and iOS. In this document, we will highlight the steps required to integrate All-in-One SDK with an Ionic bridge for your app. This bridge helps you build a seamless and responsive checkout experience for your iOS or Android 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 result 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 transactions and give results to you.

Overview of payment processing via ionic bridge

  1. 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 tokens.
    Within the Initiate Transaction API, you 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.

  2. Launch the Hybrid app bridge to invoke Paytm All-in-One SDK with the transaction token received in step 1.

  3. If Paytm app is installed on a 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).

  4. Paytm processes the transaction with the user’s bank and returns the transaction response to your app.

  5. You call the Transaction Status API to verify the transaction response.

  6. Notify the payment status to the user and proceed with the order/service fulfilment. 

Pre-requisites

Before you begin the integration, make sure you follow the steps below:

  1. Create an account on Paytm as a merchant. Click how to create an account.

    Note: Save the MID and merchant key generated in the above step.
  2. Go through the checksum logic to understand how to generate and validate the checksum.

  3. Get the staging android or iOS Paytm app for integration testing on the merchant staging environment.

  4. Go through the All-in-One SDK documentation before proceeding with integration.

  5. Call the Initiate Transaction API from your backend to generate Transaction Token.

Add plugins to your ionic project

npm install capacitor-paytm-allinone --save

Integration on Ionic for All-in-One SDK

  1. Open MainApplication.java class in android directory of react native project
    import com.paytm.allinone.capacitor.AllInOneSDK;
  2. Then use add method to implement  AllInOneSDK.class in onCreate() method
    @Override
     public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       // Initializes the Bridge
       this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
         // Additional plugins you've installed go here
         // Ex: add(TotallyAwesomePlugin.class);
          ...
         add(AllInOneSDK.class);
       }});
    
  3. Add below maven url in repositories of project  android/build.gradle
    allprojects {
       repositories {
           ...
           maven {
               url "https://artifactory.paytm.in/libs-release-local"
           }
       }
    }
    

Change the app settings

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

    LSApplication Queries Schemes
  2. 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.

    Additional URL Types

In Ionic Project

  1. Using plugin from ‘@capacitor/core’ fetch AllInOneSDKPlugin class
    import { Plugins } from "@capacitor/core";
    const { AllInOneSDK } = Plugins;
  2. Start process by calling AllInOneSDKPlugin.startTransaction with the appropriate parameters
    let response = await AllInOneSDK.startTransaction({
     mid: “mid”, amount: “1”, orderId: “orderId”, callbackUrl: "", 
    txnToken: “txnToken”, isStaging: false, restrictAppInvoke: true });
    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 in 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 URL should be same as passed in callbackURL of Initiate Transaction API. It can be a dynamic or 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

    restrictAppInvoke

    Boolean

    restrictAppInvoke is to define app invoke restriction (Only Redirection flow when True else AppInovke if paytm app is installed) 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 click here for more details.