search

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 the 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 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 - A 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 here 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.

 

Experience the flow

Demo of JS Checkout

Pre-requisites

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

  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

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.

Setting up preferences and theme customisation

  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.

  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.

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

    • 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

  4. 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 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/html" 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

The JS module can be initialised using either the transaction token or access token. Initialisation using the access token is required to be done only in the case when you intend to provide payment option of EMI Subvention i.e. Zero cost EMI for the cart item. In case the user doesn’t have an item on which EMI Subvention is applicable, then you can continue to initialise the JS module using transaction token only.

 

  1. When the user loads the cart page, the merchant creates order at their backend and calls the 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 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 his 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)

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

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)

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

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

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");
}

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

Note: All the user sensitive information like 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.

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.