• Getting Started
    • Mobile Integration (Android/IOS)
      Enterprise Solutions
      Accept Payments
      Process Payments
      Disbursals
      API References
      Webhooks
      Testing
      Refunds
      Guides
      Other Processes
      Mini Program Platform
        Website Integration

      Paytm Custom UI SDK

      Paytm Custom UI SDK facilitates you to build your own Payment UI or Checkout page as per your requirements.

      You can easily integrate this UI SDK in your app and call the methods to perform further transactions on the Paytm platform using the different available payment methods.

      Demo of Paytm Custom UI SDK

      Demo of Paytm Custom UI SDK

      Overview of Paytm Custom UI SDK

      1. A user visits the mobile app and adds a product to the Shopping/Order Cart.
      2. Your backend server calls Initiates the Transaction API to get the Transaction Token.
      3. Initiate the Paytm Custom UI SDK integration with the Transaction Token received in Step 2.
      4. User clicks the Proceed button and it will display your custom Payment UI listing all the available Payment Modes e.g. Debit Card, Credit Card, Netbanking, EMIs etc.
      5. User selects a Payment Mode e.g. Credit Cards and fill the card details on the app.
      6. Your app calls the relevant methods available with SDK to process the transaction and then SDK calls Paytm backend server to process the transaction.
      7. Paytm processes the transaction and responds to your backend server.
      8. Later, your backend server calls the Transaction Status API to check the status of the transaction.
      9. Simultaneously, Paytm sends the transaction details to your backend server which then validates the amount and other parameters.
      10. After successful validation of the transaction, Order Status will appear to a user on the app.

      Flow diagram for Paytm Custom UI SDK

      Android SDK Flowchart

      Integration steps for Paytm Custom UI SDK

      Perform the following steps to integrate the Paytm Custom UI SDK:

      1. Add the following line to the 'Repositories' section of your project level build. gradle file
        maven {
            url "https://artifactory.paytm.in/libs-release-local" 
        }
        
      2. Add the following line to the 'Dependencies' section of your app level build.gradle file
        implementation "com.paytm.nativesdk:apisdkx:0.2.4"
      3. Implement the following callbacks to get a response of the methods to be integrated:
        1. PaytmSDKCallbackListener - Implement this callback, to get the status of different methods invoked for making the payment and processing the transaction through Paytm backend server.

          This listener has the following callback methods:

          1. onTransactionResponse - This method will be called to provide the data related to a transaction. It includes two objects:

            ResultInfo: To get the payment transaction result and retry payment status

            TxnInfo: To know the extra data about current transaction. You get the following response in the json string:

            public void onTransactionResponse(TransactionInfo bundle) {
                if (bundle != null) {
                    ResultInfo resultInfo = bundle.getResultInfo();
                    String resultStatus = resultInfo.getResultStatus();
                    String resultCode = resultInfo.getResultCode();
                    boolean retry = resultInfo.getRetry();
                    if (bundle.getTxnInfo() != null) {
                        String s = new Gson().toJson(bundle.getTxnInfo());
                        Toast.makeText(this, s, Toast.LENGTH_LONG).show();
                    }
                }
            }

            ResultInfo.resultStatus contains the transaction status that can have any one of these values: TXN_SUCCESS, TXN_FAILURE, and PENDING.

            Sample TxnInfo Response:

            {
               "ORDERID":"PARCEL15816826759",
               "MID":"AliSub58582630351896",
               "TXNID":"20200214111212800110168052313701129",
               "TXNAMOUNT":"1.00",
               "PAYMENTMODE":"CC",
               "CURRENCY":"INR",
               "TXNDATE":"2020-02-14 17:48:13.0",
               "STATUS":"TXN_SUCCESS",
               "RESPCODE":"01",
               "RESPMSG":"Txn Success",
               "MERC_UNQ_REF":"test4",
               "UDF_1":"test1",
               "UDF_2":"test2",
               "UDF_3":"test3",
               "ADDITIONAL_INFO":"test5",
               "GATEWAYNAME":"ICICIPAY",
               "BANKTXNID":"68568621250",
               "BANKNAME":"HSBC",
               "PROMO_CAMP_ID":"PROMO CODE",
               "PROMO_RESPCODE":"702",
               "PROMO_STATUS":"FAILURE"
            }
          2. onBackPressedCancelTransaction - This method will be called if a user presses the Back button on any of the screen during transaction such as OTP page.

          3. onGenericError(String errorCode,String errorMsg) - This method will be called if you report No Network cases or Timeouts.

            ErrorCodeErrorMsg
            101No Internet connection
            103TIMEOUT
            104UNKNOWN
        2. PaymentMethodDataSource.Callback - Implement this callback, to get the relevant data as per the need. The following methods take this callback to provide the parametrized results as per the method.
          1. getNBList - Use this method, to fetch the list of all the net banking supported banks.dropdown
            Method Signature
            fun getNBList(callback: PaymentMethodDataSource.Callback<NBResponse>)

            The returned result will be of NBResponse type. The banks list can be fetched using the PayChannelOptions object that includes the list of banks.


            Method Parameters
            AttributeDescription
            callbackCallback to get the response received by the API request invoked by the above method
            Usage
            PaytmSDK.getPaymentsHelper()
               .getNBList(
                   object : PaymentMethodDataSource.Callback<NBResponse> {
                       override fun onErrorResponse(
                           error: VolleyError?,
                           errorInfo: NBResponse?
                       ) {
                           Log.d("NetBanking List", "{error?.localizedMessage}")
                       }
                       override fun onResponse(response: NBResponse?) {
                           if (response != null && response.body != null) {
                               val nbPayOption: NbPayOption = response.body.nbPayOption
                               val nbList = nbPayOption.payChannelOptions;
                               nbList.forEach {
                                   Log.d("NetBanking List", "{it.channelCode}")
                               }
                           }
                       }
                   })
            

            The NBResponse object includes the NbPayOption which contains the information about the NetBanking supported banks. 

            The following keys are present in the NbPayOption Object:

            1. ArrayList<PayChannelOptions> payChannelOptions - The list of banks.

            PayChannelOptions contains the items listed below:

            • String channelName - Bank Name
            • String channelCode - Bank Code
            • String iconUrl - Bank Logo URL
            • HasLowSuccess hasLowSuccess - Information about bank’s success rate (HasLowSuccess contains Boolean status and String msg )
          2. fetchEmiDetails - Use this method, to fetch the list of EMI plans offered by a bank.dropdown
            Method Signature
            fun fetchEmiDetails( channelCode: String, emiType: String, callback: PaymentMethodDataSource.Callback&lt;EmiResponse&gt; )

            The returned result will be of EmiResponse type. The banks list can be fetched using the EmiChannelInfo object that includes a list of EMI plans.


            Method Parameters
            AttributeDescription
            channelCodeChannel Code for a bank (eg. HDFC, AXIS)
            emiTypeType of EMI plans to be fetched (DEBIT_CARD/CREDIT_CARD)
            callbackCallback to get the response received by an API request invoked by the above method
            Usage
            PaytmSDK.getPaymentsHelper().fetchEMIDetails(channelCode!!, 
                    paymentMode, 
                    object : PaymentMethodDataSource.Callback<EmiResponse> { 
                        override fun onErrorResponse(error: VolleyError?, errorInfo: EmiResponse?) {
                       Log.d("Emi Details", "{error?.localizedMessage}")
                   }
                   override fun onResponse(response: EmiResponse?) {
                       if (response != null && response.body != null) {
                           val emiDetailsList = response.body.emiDetail.emiChannelInfos
                           emiDetailsList.forEach {
                               Log.d("Emi Details", "{it.planId}")
                           }
                       }
                   }
               })
            

            The EmiDetail object has List<EmiChannelInfo> that can be used to get details of the EMI plan.The following keys are available inside the EmiChannelInfo:

            • String planId - PlanId for an EMI plan (eg. ICICI|3, HDFC|6)
            • String interestRate - Rate of interest for the plan
            • String ofMonths - Number of installation in terms of months of the plan
            • MinAmount minAmount - Minimum amount needed for the EMI to be applicable
            • MaxAmount maxAmount - Maximum amount on which the EMI is applicable (MinAmount, MaxAmount contain keys value and currency to get the amount details)
            • EmiAmount emiAmount - The pending amount after applying EMI
          3. fetchBinDetails - Use this method, to fetch the bin (card) details for a Debit/Credit Card.dropdown
            Method Signature
            fun fetchBinDetails( cardSixDigit: String, callback: PaymentMethodDataSource.Callback<BinResponse>)

            The returned result will be of BinResponse type. The banks list can be fetched using EmiChannelInfo object which will include various objects containing information about the card.


            Method Parameters
            AttributeDescription
            cardSixDigitsFirst six digits of the card
            callbackCallback to get the response received by an API request invoked by the above method
            Usage
            PaytmSDK.getPaymentsHelper()
               .fetchBinDetails(cardSixDigit, object : PaymentMethodDataSource.Callback<BinResponse> {
                   override fun onResponse(response: BinResponse?) {
                        val bankCode = binResponse?.body?.binDetail?.issuingBankCode  // get bankCode
                        val channelCode = binResponse?.body?.binDetail?.channelCode  // get channel code (VISA,MASTER)
                        val = binResponse?.body?.binDetail?.paymentMode  // CREDIT_CARD,DEBIT_CARD
                   }
                   override fun onErrorResponse(error: VolleyError?, errorInfo: BinResponse?) {
                   }
               })
            

            The BinDetail object present inside the BinResponse has the following useful keys:

            • String issuingBank - Name of card issuing bank
            • String issuingBankCode - Code for card issuing bank
            • String paymentMode - Type of card (CREDIT/DEBIT)
            • String channelName - Name of the card issuing channel (eg. MASTER,VISA)
            • String channelCode - Code for the card issuing channel
            • String cardNumberMinLength - Minimum digits for card number
            • String cardNumberMaxLength - Maximum digit for card number
            • String expR - Is card expiry required?
            • String cvvRequired - Is CVV required?
            • String cvvLength - Length of the CVV
      4. When a user adds a product in the cart, your app calls the backend server to get the order payout. Then, your backend server calls Initiate Transaction API from the backend to generate the Transaction Token.
      5. Start Paytm Custom UI SDK with the Transaction Token received from the Paytm server and other attributes using initialize method as explained below:
        Initialize Methoddropdown
        Method Signature
        PaytmSDK.getInstance().initialize(Context context, String txnToken, double amount, String merchantId, String orderId, PaytmSDKCallbackListener paytmSDKCallbackListener)

        Method Parameters
        AttributeDescription
        txnTokenTransaction Token received in Step 1 from the response of Initiate transaction API
        amountOrder amount
        merchantIdYour merchantId issued by Paytm
        orderIdUnique identifier for the current order transaction
        paytmSDKCallbackListenerCallback to get the payment flow status results (It has multiple methods which will be invoked in different stages of a payment flow and explained later)
        Usage
        PaytmSDK.getPaymentsHelper()
           .fetchBinDetails(cardSixDigit, object : PaymentMethodDataSource.Callback<BinResponse> {
               override fun onResponse(response: BinResponse?) {
                   val bankCode = binResponse?.body?.binDetail?.issuingBankCode  // get bankCode
                    val channelCode = binResponse?.body?.binDetail?.channelCode  // get channel code (VISA,MASTER)
                   val = binResponse?.body?.binDetail?.paymentMode  // CREDIT_CARD,DEBIT_CARD
               }
               override fun onErrorResponse(error: VolleyError?, errorInfo: BinResponse?) {
               }
           })
        
      6. When a user selects the payment method and enters the payment instrument’s detail, you need to call the relevant methods in order to process the payments using Paytm Custom UI SDK. The final transaction result will be delivered in PaytmSDKCallbackListener.
        1. When a user enters the first 6 digits of the card, call fetchBinDetails method as explained below to get the detailed card information.
          fetchBinDetails Methoddropdown
          Method Signature
          fun fetchBinDetails( cardSixDigits: String, Callback: PaymentMethodDataSource.Callback<BinResponse>)

          Method Parameters
          AttributeDescription
          cardSixDigitsFirst six digits of the Debit/Credit Card (eg. 486269)
          callbackCallback to get the response received by an API request invoked by the above method
        2. Post receiving the successful response for the card information, the user enters the complete card details. You need to call the doNewCardTransaction method as explained below to perform the transaction.
          doNewCardTransaction Methoddropdown
          Method Signature
          fun doNewCardTransaction (context: Context, cardNumber: String, cardCvv: String, cardExpiry: String, bankCode: String?, channelCode: String?, authMode: AUTH_MODE, paymentMode:String, emiChannelId: String?, shouldSaveCard: Boolean)

          Method Parameters
          AttributeDescription
          contextContext of activity needed to launch Bank pages
          cardNumberDigits of the Debit/Credit Card (eg. 4862698904169364)
          cardCvvCVV number of the card (eg. 712)
          cardEpiryExpiry date of the card (eg.11/23)
          bankCodeBank identifier present in the binResponse (eg. SBI, AXIS)
          channelCodeChannel identifier such as VISA/MASTER present in the response of fetchBin
          authModeAUTH_MODE.OTP/ AUTH_MODE.PIN corresponds to authModes array response in fetchBinDetails/fetchPaymentOptions response
          paymentModePayment mode present in the response of fetchBin method (eg. DEBIT_CARD/CREDIT_CARD)
          emiChannelIdId of an EMI plan fetched from fetchEmiDetails method. (eg. AXIS|3, HDFC|6)
          shouldSaveCardFlag to indicate, if the card needs to be saved at Paytm’s (true/false) Backend
          Response for Credit Card
          {
            "indent_size": "4",
            "indent_char": " ",
            "max_preserve_newlines": "5",
            "preserve_newlines": true,
            "keep_array_indentation": false,
            "break_chained_methods": false,
            "indent_scripts": "normal",
            "brace_style": "collapse",
            "space_before_conditional": true,
            "unescape_strings": false,
            "jslint_happy": false,
            "end_with_newline": false,
            "wrap_line_length": "0",
            "indent_inner_html": false,
            "comma_first": false,
            "e4x": false,
            "indent_empty_lines": false
          }