• 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 non UI SDK in your App and call the methods to perform further transactions on the Paytm platform using the different available payment methods. The SDK provides multiple benefits to the merchants e.g. Enhanced success rates and reduced transaction time because of saved payment instruments and native experience

      Features supported by Custom UI SDK are listed below:

      • Enables you to show your local and Paytm user's saved instruments
      • Paytm account linking without OTP
      • Supports Visa one click payment
      • Supports all UPI solutions e.g. UPI Intent, UPI Collect and Push
      • Supports Bank offers and EMI Subvention

      Demo of Paytm Custom UI SDK

      Demo GIF of Custom UI SDK

      Overview of Paytm Custom UI SDK


      1. User visits your mobile application and adds goods/services into the shopping/order cart.
      2. You call method isPaytmAppInstalled which checks on the user’s device if the Paytm App is installed or not.
      3. You show a user consent checkbox on the cart review page to fetch payment instruments as saved on Paytm.
      4. Once the user gives the consent and Proceeds for the payment, you call the method fetchAuthCode to get the auth code of the logged in user on Paytm App.
      5. Use the auth code received in step 5 to fetch the user token.
      6. Your backend server calls Initiate Transaction API with the user token received to get the transaction token.
      7. Your backend server calls Fetch Payment Options API with the transaction token to receive the Paytm user’s saved payment instruments.
      8. You initialize the Paytm Custom UI SDK using the transaction token.
      9. User is displayed your Payment UI listing all the available Payment Modes e.g. Paytm saved instruments, CC/DC, NB, UPI, EMI etc.
      10. User selects one of the payment options e.g. credit cards and enters the card details on the App.
      11. Your App will create a model of PaymentRequestModel type in Android and AINativeBaseParameterModel type in iOS. Call paytmSDK.startTransaction in Android and AIHandler().callProcessTransactionAPI in iOS with appropriate parameters to process the transaction.
      12. The SDK will call Paytm backend server to process the transaction.
      13. You will receive a payment response in interface implementation (PaytmSDKCallbackListener in Android) and (didFinish method of AIDelegate in iOS).
      14. The SDK calls the Transaction Status API to check the status of the transaction.
      15. Paytm will send the transaction details to your backend server which will validate the amount and other parameters.
      16. After the successful validation of the transaction, order status is shown to the user on the App.

      Integration steps for Paytm Custom UI SDK

      Perform the following steps to integrate the Paytm Custom UI SDK:
      1. Add Dependencies for the Paytm Custom UI SDK

        1. Add the below line to ‘repositories’ section of your project level build.gradle file
          maven {
              url "https://artifactory.paytm.in/libs-release-local" 
          }
          
        2. Add below line to ‘dependencies’ section of your app build.gradle
          implementation "com.paytm.nativesdk:tokensdk:0.7.4"
      2. Implement the following methods to extract Paytm user’s saved instruments.

        Implement the following methods in case you want to show Paytm user’s saved payment instruments including wallet. You need to check if the Paytm App is installed on the user’s phone and it supports the feature of getting the authToken for the logged in Paytm user.
        These methods can be accessed using an instance of PaytmPaymentsUtilRepository. This instance can be obtained as below.
        PaytmPaymentsUtilRepository paymentsUtilRepository = PaytmSDK.getPaymentsUtilRepository()
        After having the instance methods in this class you can call the following methods:
        1. You need to call the method isPaytmAppInstalled to check if the Paytm App is installed on the user’s phone.
          isPaytmAppInstalleddropdown
          Method Usage:
          paymentsUtilRepository.isPaytmAppInstalled(context)
          Method Params:
          Context context: The current application Context
          Response: Boolean
          ParameterDescription
          True In case Paytm App is installed
          False In case unable to find Paytm App on user’s phone
        2. You need to call the method fetchAuthCode on the background thread in order to get the authcode for the currently logged in user inside Paytm App. For fetching authCode using Paytm SDK , include Paytm's custom checkbox on your UI. The authCode will be fetched only if the user has checked the checkbox.
          fetchAuthCodedropdown
          Use the below line to include the custom checkbox in your xml, you can customize it as a normal checkbox.
          <net.one97.paytm.nativesdk.widget.PaytmConsentCheckBox
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Allow <Merchant> to fetch Paytm instruments" />
          Method Usage:
          paymentsUtilRepository.fetchAuthCode(context,clientId)
          Method Params:
          ParameterDescription
          Context context The current application Context
          String clientId The clientId issued from Paytm identifying a merchant
          Response
          ParameterDescription
          String Alphanumeric authCode string e.g. ‘Apfdf-2234-nhdjshj-wers’ in case auth code fetched
          Null In case authCode could not be fetched.
        sso-token-flow-chart
      3. Implement the interface PaytmSDKCallbackListener

        Implement the interface PaytmSDKCallbackListener to get the status of transaction for different payment instruments. This interface has the following callbacks methods.
        1. onTransactionResponse - This will provide the response status data related to a transaction. The response will contain a json string of TxnInfo. Refer to the
          // get json string of txnInfo
          public void onTransactionResponse(TransactionInfo bundle) {
             if (bundle != null) {
                 if (bundle.getTxnInfo() != null) {
                     String s = new Gson().toJson(bundle.getTxnInfo());
                     Toast.makeText(this, s, Toast.LENGTH_LONG).show();
                 }
             }
          }
          
          Sample TxnInfo data
          {
              "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. TransactionInfo.ResultInfo : This will contain the status of transaction, along with retry supported information in case payment can be retried for the same orderId. Status of transaction can be obtained using ResultInfo.resultStatuscontains the transaction status and has only three values: TXN_SUCCESS, TXN_FAILURE and PENDING.
        3. onBackPressedCancelTransaction - This method will be called if a user presses the Back button on any of the screen during transaction such as OTP page.
        4. onGenericError (String errorCode, String errorMsg) - This method will be called if you report No Network cases or Timeouts.
          Error codeError message
          101No Internet connection
          103TIMEOUT
          104UNKNOWN
      4. After the user adds the product in the cart and clicks the button to proceed for checkout, 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. Using the Transaction token received above, your backend server calls the Fetch Payment Options API to receive the different payment options including user's saved instruments and other instruments like CC/DC, NB, UPI, EMI etc.payment-transaction-flow-chart
      6. Initialization of the SDK

        Initialize the SDK using the parameters mid, orderId, txnToken, amount. The SDK can be initialized as shown below:

        Signature:
        PaytmSDK.Builder builder = 
        new PaytmSDK.Builder(this, mid, orderId, txnToken, amount, this /*PaytmSDKCallbackListener*/);
        builder.setMerchantCallbackUrl(Constants.callBackUrl); builder.setNativePlusEnabled(isNativePlusEnabled);

        PaytmSDK paytmSDK = builder.build();

        Method Parameters:
        ParameterDescription
        Context contextYour application context
        String midMerchant id identifying a merchant
        String orderId Unique identifier for current order
        String txnTokenTransaction token to identify the current transaction received in response of Initiate Transaction API from Paytm. Refer to Step 4.
        double amountOrder amount forcurrent transaction
        PaytmSDKCallbackListener callback Interface implementation to get the result of a payment transaction. Refer to Step 3.
      7. Proceed for the Transaction

        When the user clicks on the Pay button after entering the payment instrument’s details in the selected payment method, you need to proceed for the transaction. Please follow the steps below for proceeding with the transaction.
        1. Create a model of PaymentRequestModel type based on the type of payment mode chosen by the user.

          Model name : CardRequestModel

          Creation of Object:
          CardRequestModel cardRequestModel = new CardRequestModel(paymentMode, paymentFlow, 
          cardNumber, cardId, cardCvv, null, bankCode, channelCode, authMode, null, true)
          
          Constructor Parameters:
          ParameterDescription
          String paymentMode type of card (DEBIT_CARD, CREDIT_CARD)
          String paymentFlow current payment flow (NONE, HYBRID, ADDNPAY)
          String newCardNumber card number digits for a new card (null for saved card)
          String savedCardId cardId for a saved card (null for new card)
          String cardCvv cvv of the card
          String cardExpiry card expiry date in the format MM/YY (eg. 11/19)
          String channelCode channelCode of card obtained from fetchBinDetails API(eg. VISA,MASTER)
          String bankCode bankCode of card obtained from fetchBinDetails API(eg. ICICI,AXIS)
          String authMode the mode of 2FA chosen for card(either by 'pin' or 'otp'), options obtained from fetchBinDetails API
          String emiPlanId emiPlan id in case of an emi transaction
          Boolean shouldSaveCard flag to indicate if new card should be saved at Paytm’s end
        2. Call paytmSDK.startTransaction to call Process Transaction API. Once you have created the request model for the payment mode selected by the user, call below method, to start a payment transaction.
          Note: This step has been already mentioned above for UPI Intent based transactions and is not needed to be repeated for UPI Intent
          paytmSdk.startTransaction(Activity context, PaymentRequestModel paymentRequestModel)

          Method Params
          ParameterDescription
          Activity context Sdk needs the context of activity as it might have to further launch new activities bank otp pages/ website etc. based on payment mode selected.
          PaymentRequestModel paymentRequestModel The type of paymentRequestModel created for this transaction
        3. Fetch the payment result in PaytmSDKCallbackListenerThe result of the transaction will be received via PaytmSDKCallbackListener Interface described in Step 3.
        4. Clean up SDK instance
          After completing the transaction merchant should call the below method to clear payment sdk state when destroying the PG page.
          paytmSdk.clear()
      8. Additional/Optional methods available

        1. userHasSavedInstruments: This method is used to check if the user has any saved Payment instruments.
          userHasSavedInstruments dropdown
          Usage
          PaytmPaymentsUtilRepository paymentsUtilRepository =PaytmSDK.getPaymentsUtilRepository()
          paymentsUtilRepository.userHasSavedInstruments(context, mid)
          Method Params
          ParameterDescription
          Context context Context needed to make query
          String mid Merchant id needed to fetch saved instruments of user
          Response
          This method will return a boolean parameter
          ValueDescription
          True User is logged in and has saved instruments
          False Either user is not logged in or has no saved instruments
        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. 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