paytm developer docs logoDeveloperDocumentation
search

JS Checkout - Amazingly Fast Checkout Solution

JS Checkout is an ideal solution for businesses who would like to collect payment on their platform with minimal coding. It offers a high level of customisation to the merchant with no redirection to bank pages and enhanced merchant visibility. You can do this by simply integrating a few lines of the code snippet, prepared by Paytm exclusively for you. This enables you to 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 the 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 payment 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 here to launch our demo page.

 

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

Experience the flow

Demo of JS Checkout

Pre-requisites

Before you begin the integration, make sure you follow the steps below:

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

    Note: Save the MID and merchant key generated in the above step.

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

  3. Please note that you will have to add the below line of code in your html code to ensure the JS Checkout page dynamically adapts to the device height/width (for mobile/desktop users)

     

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
Staging Credentials
  1. Login to dashboard.paytm.com with your Paytm account details.
  2. Click on API keys under the Developer settings in the left menu.
  3. Click the Generate now button under the Test API Details.
Note: MID and merchant keys generation may take few minutes. In case you do not see these details, please logout and login after 5 minutes. Proceed now to generate these keys.

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

Note:

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

Set up preferences and customize themes

  1. Login to the Merchant Dashboard (UMP Panel) and click JS Checkout. Alternatively, you can directly integrate the JS Code Snippet shared below, validate the integration, and do the customizations later.

    • If you're visiting JS Checkout on the Merchant Dashboard for the first time, an overview page with details will open to assist you to understand the solution. This page also has a video, taking you through the entire journey.

    • If you're revisiting JS Checkout on the Merchant Dashboard, you’ll be directly taken to the theme customisation page.

  2. Select among multiple options to customise the payments page. Some available enhancements are:

    • Color of Header panel and Header text

    • Color of Pay button and Pay button text

    • Background colour and text

    • Sort paymodes

    • Enable/Disable Paytm's branding

  3. Submit your changes.

    • In case you're integrating the solution for the first time, click the Generate JS Code button, copy the code generated and paste it in the <body>tag of your HTML page.

    • If you've already integrated this solution 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>
<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
                  window.Paytm.CheckoutJS.invoke();
              }).catch(function onError(error){
                  console.log("error => ",error);
              });
          });
      } 
  }
</script>

 

Host:

  • Merchant Staging - https://securegw-stage.paytm.in

  • Production - https://securegw.paytm.in

 

MID:

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 after setting preferences

  1. When the user loads the cart page, the merchant creates order at their backend and calls the Initiate Transaction API.

    Note:In case you intend to offer No cost EMI as a payment option to the user for the transaction, then please include the "simplifiedSubvention" object in the Initiate Transaction API call. Refer here for the detailed steps.

  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 required parameters are:

    • orderID

    • transactionAmount

    • tokenType

    • 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 their preferred payment instrument.

  7. Customer fills the payment details and is redirected to bank page for authorization.

 

Once the transaction is authorized, the following actions take place:
 

1.  Paytm receives the response from the bank and returns a status to your website via your callback URL. Response attributes description and the sample HTML form post is provided below:
 

Response Attributes Description

MID

String(20)

 Unique identifier provided by Paytm to every merchant

TXNID

String(64)

 Unique transaction ID issued by Paytm for each transaction

ORDERID

String(50)

 Unique reference ID generated by merchant for a transaction and sent in the request

BANKTXNID

String

 The transaction ID sent by the bank. In case of Paytm proprietary instruments too, there is a unique reference number generated by Paytm's system. In case the transaction does not reach the bank, this will be a NULL or empty string. The 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 the customer in INR

CURRENCY

String(3)

 Currency in which the transaction has taken place. Currently, only "INR" is the supported currency of the transaction.

STATUS

String(20)

 Status of the transaction and it has only three values: TXN_SUCCESS, TXN_FAILURE and PENDING

RESPCODE

String(10)

 Particular reason of payment failure/success. List in this PDF.

RESPMSG

String(500)

 Description message linked with each respcode. List in this PDF.

TXNDATE

DateTime

Date 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. Paymode wise details are provided below: 
  • Credit Card/Debit Card/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 the gateway. Hence, issuing bank name is passed in this field.
  • Paytm Wallet - The value of the GATEWAYNAME will be 'WALLET'
  • Paytm Postpaid - The value of the GATEWAYNAME will be 'PAYTMCC'

BANKNAME

String(500)

 Name of issuing bank of the payment instrument used by customer. Paymode wise details are provided below:
  • Credit Card/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
  • UPI - This parameter will not be present in the response.

PAYMENTMODE

String(15)

 Payment mode used by customer for a 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 which is verified using the server-side checksum utility provided by Paytm.

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

 

/* 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");
}
/**
* import checksum generation utility
*/
const checksum_lib = require('./checksum');

var paytmChecksum = "";

/**
* Create an Object from the parameters received in POST
* received_data should contains all data received in POST
*/
var paytmParams = {};
for(var key in received_data){
	if(key == "CHECKSUMHASH") {
		paytmChecksum = received_data[key];
	} else {
		paytmParams[key] = received_data[key];
	}
}

/**
* Verify checksum
* Find your Merchant Key in your Paytm Dashboard at https://dashboard.paytm.com/next/apikeys 
*/
var isValidChecksum = checksum_lib.verifychecksum(paytmParams, "YOUR_KEY_HERE", paytmChecksum);
if(isValidChecksum) {
	console.log("Checksum Matched");
} else {
	console.log("Checksum Mismatched");
}
<?php
/**
* import checksum generation utility
*/
require_once("encdec_paytm.php");

$paytmChecksum = "";

/* Create a Dictionary from the parameters received in POST */
$paytmParams = array();
foreach($_POST as $key => $value){
	if($key == "CHECKSUMHASH"){
		$paytmChecksum = $value;
	} else {
		$paytmParams[$key] = $value;
	}
}

/**
* Verify checksum
* Find your Merchant Key in your Paytm Dashboard at https://dashboard.paytm.com/next/apikeys 
*/
$isValidChecksum = verifychecksum_e($paytmParams, "YOUR_KEY_HERE", $paytmChecksum);
if($isValidChecksum == "TRUE") {
	echo "Checksum Matched";
} else {
	echo "Checksum Mismatched";
}
# import checksum generation utility
import Checksum

paytmChecksum = ""

# Create a Dictionary from the parameters received in POST
# received_data should contains all data received in POST
paytmParams = {}
for key, value in received_data.items(): 
	if key == 'CHECKSUMHASH':
		paytmChecksum = value
	else:
		paytmParams[key] = value

# Verify checksum
# Find your Merchant Key in your Paytm Dashboard at https://dashboard.paytm.com/next/apikeys 
isValidChecksum = Checksum.verify_checksum(paytmParams, "YOUR_KEY_HERE", paytmChecksum)
if isValidChecksum:
	print("Checksum Matched")
else:
	print("Checksum Mismatched"
String paytmChecksum = "";

/* Create a Dictionary from the parameters received in POST */
Dictionary<String, String> paytmParams = new Dictionary<String, String>();
foreach (string key in Request.Form.Keys) {
	if (key.Equals("CHECKSUMHASH")) {
            paytmChecksum = Request.Form[key];
        } else {
            paytmParams.Add(key.Trim(), Request.Form[key].Trim());
	}
}

/**
* Verify checksum
* Find your Merchant Key in your Paytm Dashboard at https://dashboard.paytm.com/next/apikeys 
*/
bool isValidChecksum = CheckSum.verifyCheckSum("YOUR_KEY_HERE", paytmParams, paytmChecksum);
if (isValidChecksum) {
	Response.Write("Checksum Matched");
} else {
	Response.Write("Checksum Mismatched");
}

3.  Validate transaction response via server-side request using the 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.
 

Note: All the user sensitive information such as card details, account details, etc. are 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.