search

All-in-One SDK Integration for Ionic platform via Cordova Plugin

For merchants who have built their app on an ionic platform - Paytm provides a bridge for you 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 cordova plugin for your app. This bridge helps you to build a seamless and responsive checkout experience for your iOS or Android application.

This integration will support following two flows:

  • App Invoke Flow: In case Paytm app is installed, it will be launched to complete the transaction and give the result back to your app.

  • Redirection Flow: In case Paytm app is not installed, All-in-One SDK will open a webview 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 Initiate Transaction API from your backend to generate transaction tokens.
    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.

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

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

  2. Get the merchant id and merchant key for the integration environment after creating the account.

  3. Go through the checksum logic to understand how to generate and validate the checksum.

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

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

  6. Call Initiate Transaction API from your backend to generate Transaction Token.

Integration on Ionic for All-in-One SDK with Cordova plugin

Please go through the following steps to integrate All-in-One SDK in your Ionic app:

  1. Add the plugin in your ionic application with the following command.

    ionic cordova plugin add cordova-paytm-allinonesdk

    It is also possible to install the plugin via repo url directly.

    ionic cordova plugin add https://github.com/paytm/paytm-allinonesdk-ionic-cordova.git 
  2. Add an ionic-native wrapper to your application. You can checkout from ionic-native public repository available at https://github.com/ionic-team/ionic-native.

  3. Add a wrapper for 'AllInOneSDK' in the ionic-native repository you created in the last step by adding the following command in your ionic-native directory.

    gulp plugin:create -n AllInOneSDK

    Running the command above will create a new directory 'src/@ionic-native/plugins/all-in-one-sdk/’ with a single file in there 'index.ts'. This file is where all the plugin definitions should be.

  4. Remove all the statements from the 'index.ts' file and add the following code in it.

    import { Injectable } from '@angular/core';
    import { Plugin, Cordova, CordovaProperty, CordovaInstance, InstanceProperty, IonicNativePlugin } from '@ionic-native/core';
    import { Observable } from 'rxjs';
    
    /**
    * @name AllInOneSDK
    * @description
    * Paytm All-in-One SDK plugin for Cordova/Ionic Applications
    * Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
    * Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
    * For more information about Paytm All-in-One SDK, please visit https://developer.paytm.com/docs/all-in-one-sdk/
    *
    * @usage
    * ```typescript
    * import { AllInOneSDK } from '@ionic-native/all-in-one-sdk/ngx';
    *
    *
    * constructor(private allInOneSDK: AllInOneSDK) { }
    *
    * 
    *
    * For below parameters see [documentation](https://developer.paytm.com/docs/all-in-one-sdk/)
    * let paymentIntent = { mid: merchantID, orderId: orderId, txnToken: transactionToken, amount: amount, isStaging: isStaging, callbackUrl: callBackURL }
    *
    * this.allInOneSDK.startTransaction(paymentIntent)
    *   .then((res: any) => console.log(res))
    *   .catch((error: any) => console.error(error));
    *
    * ```
    *
    * For iOS:
    * After adding the plugin, open the iOS project, you can find the same at <projectName>/platforms/ios.
    * In case merchant don’t have callback URL, Add an entry into Info.plist LSApplicationQueriesSchemes(Array) Item 0 (String)-> paytm
    * Add a URL Scheme “paytm”+”MID”
    *
    */
    @Plugin({
    pluginName: 'AllInOneSDK',
    plugin: 'cordova-paytm-allinonesdk',
    pluginRef: 'AllInOneSDK',
    repo: 'https://github.com/paytm/paytm-allinonesdk-ionic-cordova.git',
    platforms: ['Android','iOS']
    })
    export class AllInOneSDK extends IonicNativePlugin {
        /**
        * This function checks if Paytm Application is available on the device.
        * If Paytm exists then it invokes Paytm Application with the parameters sent and creates an order.
        * If the Paytm Application is not available the transaction is continued on a webView within All-in-One SDK.
        * @param options {PaymentIntentModel} These parameters are required and will be used to create an order.
        * @return {Promise<PaytmResponse>} Returns a promise that resolves when a transaction completes(both failed and successful).
        */
        @Cordova()
        startTransaction(options : PaymentIntentModel): Promise<PaytmResponse> {
            return;
        }
    }
    /**
    * The response that will be recieved when any transaction is completed
    */
    export interface PaytmResponse{
        message : string;
        response : string; // A stringified response of a hashmap returned from All-in-One SDK
    }
    
    /**
    * For below parameters see [documentation](https://developer.paytm.com/docs/all-in-one-sdk/)
    */
    export interface PaymentIntentModel{
        mid : string; // Merchant ID
        orderId : string; // Order ID
        txnToken : string; // Transaction Token
        amount : string; // Amount
        isStaging: boolean; // Environment
        callbackUrl: string; // Callback URL
    }
  5. Run the command npm run build in your 'ionic-native' directory, this will create a 'dist' directory. The dist directory will contain a subdirectory ''@ionic-native' with all the packages compiled in there. Copy the package(all-in-one-SDK) you created to your app's 'node_modules' under the ''@ionic-native' directory.
    For example: `cp -r ../ionic-native/dist/@ionic-native/plugins/all-in-one-sdk node_modules/@ionic-native`. Change the path of directories as per your project structure.

  6. This step is only for the iOS platform, you can avoid this step if your application is not available for iOS. Add iOS platform to your application.

    ionic cordova platform add ios

    This will create an iOS project for your application at the following path:
    'applicationName/platforms/ios/applicationName.xcworkspace'

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

    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.

  7. Add the plugin to your app's provider list.

    import { AllInOneSDK } from '@ionic-native/all-in-one-sdk/ngx'
    @NgModule({
      declarations: [...],
      entryComponents: [...],
      imports: [...],
      providers: [..., AllInOneSDK],
      bootstrap: [...]
    })
    export class AppModule {}
    
  8. In your page from where you want to invoke the All-in-One SDK, add the following code:

    import { AllInOneSDK } from '@ionic-native/all-in-one-sdk/ngx'
    constructor(private allInOneSDK : AllInOneSDK) {} 
    //Call Initiate Transaction API from your backend to generate Transaction Token.
    let paymentIntent = { mid : "<Merchant ID>",
                          orderId: "<Order ID>",
                          txnToken: "<Transaction Token generated by Initiate Transaction API from your backend>", 
                          amount: "<Amount>", 
                          isStaging: "<Environment(true/false)>", 
                          callbackUrl: "<Callback URL>"};
    this.allInOneSDK.startTransaction(paymentIntent).then(
    resp => {
      // The response received after the transaction is completed will be an object containing "message" and "response". You can parse both and use them as required in your application
      alert(JSON.parse(resp.response));
    }).catch(error => {
      alert(error);
    })
    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 the 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
  9. 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.