paytm developer docs logoDeveloperDocumentation
search

Paytm Custom UI SDK

Paytm Custom UI SDK facilitates you to build your 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.

 

You can see below the list of features supported by Custom UI SDK:

  • 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 payment through Paytm 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 the 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 the Paytm app.

  5. Your backend server hits the OAuth Token API using the auth code received above to get the Paytm user's SSO token.

  6. Your backend server calls the Initiate Transaction API with the user token received to get the transaction token.

  7. Your backend server calls the 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 presented your Payment UI listing all the available Payment Modes e.g. Paytm saved instruments, CC/DC, NB, UPI, EMI, etc.

  10. The user selects one of the payment options e.g. Credit Card 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 platforms for Paytm Custom UI SDK

Paytm Custom UI SDK integration is supported for apps built on both native and hybrid frameworks.

For the apps built using native frameworks, the solution can be integrated using the native SDK and for the apps built using hybrid frameworks, the relevant plugins are available to integrate the custom UI SDK solution.

  • Native Apps: You can integrate the desired version of SDK based on the feature requirement. Please refer to the different versions available and the integration steps here.
  • Hybrid Apps: If your app is built on a hybrid platform, Paytm provides a plugin for your platform to easily integrate the Custom UI SDK in your app. Paytm provides plugins for the following hybrid frameworks. Please click the link below for detailed integration steps.