• Callback Response
  • Getting Started
    • Mobile Integration (Android/IOS)
      Enterprise Solutions
      Retail Solutions
      Accept Payments
      Process Payments
      Paytm Payouts
      API References
      Other links
      Mini Apps Platform
  • Features for Investments PG
  • JS Checkout - Amazingly Fast Checkout Solution

    JS Checkout is a solution for businesses who would like to collect payment on their platform with minimal coding. What else? This solution enables a high level of customisation for the merchant, no redirection to bank pages and enhanced merchant visibility. All of this by simply integrating a couple of lines of code snippet, prepared by Paytm exclusively for you. Integrate and start accepting payments within an hour.

    With this solution, you'll be able to:

    • Start accepting payments within minutes by integrating a few lines of code snippet, prepared by Paytm.
    • Design the payments screen as per your theme - adjust header, background and text colour.
    • Improve success rate by removing redirection altogether - complete payment on your own page.
    • Enhance business visibility - display your logo on payment's page.
    • Control paymode sequencing - want to promote Debit Card over Net Banking transactions on your page? JS Checkout solution gives you the option to do so.

    Try it out

    You can get a quick feel of how your checkout page may appear and do a sample transaction. Please click the button below to launch our demo page.

    Note: The payment will be done through your actual payment instrument. The amount will be refunded within 3~4 days.

    Demo of JS Checkout


    Before starting the integration make sure, you follow the following steps:

    1. Create an account on Paytm as a merchant. Click on 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.

    Overview of complete process to customise the checkout flow,
    integrate the solution and accept payment

    • Integrating Initiate Transaction API is mandatory for the merchant to consume this solution.
    • In case of third party webviews (if you are posting/promoting your website on social media platforms like Facebook, Twitter, LinkedIn etc) the callback URL in Initiate Transaction API is a mandatory parameter. Once the transaction is completed, Paytm will post the response on this callback URL

    Setting up preferences and theme customisation

    1. Login to the Merchant Dashboard (UMP Panel) and click on JS Checkout. Alternatively, you can also directly integrate the JS Code snippet shared below and validate the integration and do customizations later.
    2. If you're visiting JS Checkout on the Merchant Dashboard for the first time, an overview page with details will open to assist you in understanding the solution. This page also has a video, taking you through the entire journey.
      1. If you're revisiting the section, you’ll be directly taken to the theme customisation page.
    3. Select among multiple options to customise the payments page. Some available enhancements are:
      1. Color of Header Panel and Header Text
      2. Color of Pay Button and Pay Button Text
      3. Background colour and Text
      4. Sort paymodes
      5. Enable / Disable Paytm's branding
    4. Submit your changes
      1. In case you're integrating the solution for the first time, click on the button - 'Generate JS Code', copy the code generated and paste it in the <body> tag of your HTML page.
      2. If you've already integrated this solution previously and have made some modifications, you just need to save your settings. You do not need to generate the JS again and do the integration.
    Note: You'll be able to test or integrate the feature only if you're registered as a merchant with Paytm.

    JS Code Snippet

    <script type="application/javascript" crossorigin="anonymous" src="{HOST}/merchantpgpui/checkoutjs/merchants/{MID}.js" onload="onScriptLoad();"> </script>
      function onScriptLoad(){
          var config = {
            "root": "",
            "flow": "DEFAULT",
            "data": {
            "orderId": "", /* update order id */
            "token": "", /* update token value */
            "tokenType": "TXN_TOKEN",
            "amount": "" /* update amount */
            "handler": {
              "notifyMerchant": function(eventName,data){
                console.log("notifyMerchant handler function called");
                console.log("eventName => ",eventName);
                console.log("data => ",data);
          if(window.Paytm && window.Paytm.CheckoutJS){
              window.Paytm.CheckoutJS.onLoad(function excecuteAfterCompleteLoad() {
                  // initialze configuration using init method 
                  window.Paytm.CheckoutJS.init(config).then(function onSuccess() {
                      // after successfully updating configuration, invoke JS Checkout
                  }).catch(function onError(error){
                      console.log("error => ",error);



    Testing MID can be fetched from the API Keys section of the Merchant Dashboard. Production MID is generated by Paytm post successful activation of your account and can be fetched from the same dashboard.


    Accepting Payments

    Accepting payments after setting preferences

    1. When the user loads the cart page, the merchant creates an order at their backend and calls Initiate Transaction API.
    2. Paytm receives this request and returns a response containing transaction token (TXN_TOKEN) to the merchant.
    3. The merchant uses the transaction token, along with other parameters to initialise JS module. The other parameters required are:
      1. orderID
      2. transactionAmount
      3. tokenType
      4. token
    4. Merchant invokes the JS module.
    5. JS module renders the cashier page on the browser, preset with the configurations received.
    6. User selects his preferred payment instrument.
    7. Customer fills the payment details and is redirected to bank page for authorization. Once the transaction is authorized, Paytm receives the response from the bank and returns a status to your website via your callback URL. Response attributes description and sample HTML form post is provided below
      Response Attributes
      MID String(20)This is a unique identifier provided to every merchant by Paytm
      TXNID String(64)This is a unique Paytm transaction ID that is issued by Paytm for each transaction
      ORDERID String(50)Unique reference ID for a transaction which is generated by merchant and sent in the request
      BANKTXNID StringThe transaction ID sent by the bank. In case of Paytm proprietary instruments too, there is unique reference number generated by Paytm's system. In case the transaction does not reach the bank, this will be NULL or empty string. Primary reason for this is user dropping out of the payment flow before the transaction reaches to bank servers.
      TXNAMOUNT String(10)Amount paid by customer in INR
      CURRENCY String(3)Currency in which the transaction has taken place. Currently only "INR" is the supported currency of transaction
      STATUS String(20)This contains the transaction status and has only three values: TXN_SUCCESS, TXN_FAILURE and PENDING
      RESPCODE String(10)Codes refer to a particular reason of payment failure/success. List in this PDF
      RESPMSG String(500)Description message is linked with each respcode. List in this PDF
      TXNDATE DateTimeDate and Time of transaction in the format "yyyy-MM-dd HH:mm:ss.S" Example: "2015-11- 02 11:40:46.0"
      GATEWAYNAME String(15)Gateway used by Paytm to process the transactions. Details are provided below paymode wise
      Credit, debit cards UPI - Gateway used to process the transaction. For example, if HDFC gateway has been used to process SBI credit card transactions, the value will be HDFC
      Net banking - Netbanking transactions are not routed via gateway. Hence issuing bank name is passed in this field
      Paytm Wallet - The value will be 'WALLET'
      Paytm Postpaid - The value will be 'PAYTMCC'
      BANKNAME String(500)Name of issuing bank of the payment instrument used by customer. Details are provided below paymode wise
      Credit, debit cards, net banking - Name of the issuing bank. Example in case customer uses SBI's credit card, the value will be "SBI"
      Paytm Wallet - Wallet
      Note that in case of UPI - This parameter will not be present in the response.
      PAYMENTMODE String(15)The payment mode used by customer for transaction
      Credit card - CC
      Debit card - DC
      Net banking - NB
      UPI - UPI
      Paytm wallet - PPI
      Postpaid - PAYTMCC
      CHECKSUMHASH String(108)Security parameter to avoid tampering. Verified using server side checksum utility provided by Paytm.
    8. Checksumhash received in response of transaction needs to be verified on merchant server using Paytm library with all the parameters in key value pairs. Code snippets and Github links for the checksum utility are provided here
      String paytmChecksum = null;
      /* Create a TreeMap from the parameters received in POST */ TreeMap<String, String> paytmParams = new TreeMap<String, String>(); for (Entry<String, String[]> requestParamsEntry : request.getParameterMap().entrySet()) { if ("CHECKSUMHASH".equalsIgnoreCase(requestParamsEntry.getKey())){ paytmChecksum = requestParamsEntry.getValue()[0]; } else { paytmParams.put(requestParamsEntry.getKey(), requestParamsEntry.getValue()[0]); } }
      /** * Verify checksum * Find your Merchant Key in your Paytm Dashboard at https://dashboard.paytm.com/next/apikeys */ boolean isValidChecksum = CheckSumServiceHelper.getCheckSumServiceHelper().verifycheckSum("YOUR_KEY_HERE", paytmParams, paytmChecksum); if (isValidChecksum) { System.out.append("Checksum Matched"); } else { System.out.append("Checksum Mismatched"); }
    9. Validate transaction response via server side request using Transaction Status API. This API requires checksumhash in request and its verification in response. The status should be treated as the final status of the transaction. Paytm provides payment response on both Callback URL and Webhook URL. Please refer to the sample response for different payment sources here.

    Transaction Token Flow Chart
    Note: All the user sensitive information like card details, account details etc is fetched from the merchant's page using an iFrame rendered by Paytm. This way, all the information entered by the user remains safe and is securely transmitted to Paytm.

    For enhanced configurations, you may visit our API Documentation.

    Testing the JS Checkout integration

    Once the integration is complete, you may test it using the staging credentials available at API Keys section of the Merchant Dashboard and using the test paymode credentials listed here.

    Once the test transaction is complete, move your code to live environment with production account details. Note that production accounts details are available after you have activated your account on the dashboard

    We would also recommend you to read about Refund Management.

    In case of any issues with integration, please get in touch.

    Note: If you still did not find the right solution, you may refer to our standard checkout solution. Please refer to the link https://developer.paytm.com/docs/v1/payment-gateway/?ref=webIntegration