How to use paytm in your website to add money to your wallet using javascript.

Paytm wallets are used in almost all the websites we encounter these days. Also it is one of the best wallet used for handling digital transactions.

Although Paytm has provided us with the direct API for checking balance and making payments if we have sufficient balance in our wallet. But what if we do not have sufficient balance and we wanted to add money to our wallet from the current website.

So let us now look into how we can handle this use case for adding money to our Paytm wallet directly from the currently open website using javascript in backend and frontend.

This is done by handling redirection to the Paytm website from our current website. To do so we need to post a form to :

Staging:

https://pguat.paytm.com/oltp-web/processTransaction

Production:

https://secure.paytm.in/oltp-web/processTransaction

For this form we need the following parameters to our form:

Parameter Name Description Type Mandatory

REQUEST_TYPE

Type of transaction. Possible value: DEFAULT for normal transaction flow, SUBSCRIBE for subscription transaction

Alpha

Yes

MID

This is the “Merchant Identifier” that is issued by Paytm to the Merchant. This is unique for each merchant that integrates with Paytm

Alphanumeric

Yes

ORDER_ID

The “Order ID” is the Merchant’s Transaction ID which should be unique for every transaction. Duplicate order id will be rejected by the Paytm gateway. You may use UNIX time stamp appended with a random string to ensure that a duplicate Order Id is never passed.

Alphanumeric

Special characters allowed in Order Id are: “@” “-” “_”  “.”

Yes

CUST_ID

The “Customer ID” is the customer identifier. This could be a unique user Id that the Merchant has assigned to its customers.

Alphanumeric
Special characters e.g @, ! ,_ $ are allowed

Yes

TXN_AMOUNT

This is the “Transaction Amount” that is to be charged to the customer’s credit card /debit card /bank account / Paytm Wallet. Please ensure that the amount is in the same currency as defined for the Merchant ID being used.

Numeric

Yes

CHANNEL_ID

Pass the Channel ID
Ex :

  1. WEB – for desktop websites
  2. WAP – for mobile websites

Alpha

Yes

INDUSTRY_TYPE_ID

This will be provided by Paytm

Alphanumeric

Yes

WEBSITE

This will be provided by Paytm

Alphanumeric

Yes

CHECKSUMHASH

Checksum to be calculated based on a pre defined logic as given below in the “Generating Checksum” section. Checksum is used to ensure data is not tampered when a request is posted on the Paytm URL.

Numeric

Yes

MOBILE_NO

Consumer Mobile Number. Passing this enables faster login for customer into his/her mobile wallet.

Numeric

Yes

EMAIL

Consumer Email Id. Passing this enables faster login for customer into his/her mobile wallet.

Alphanumeric

Yes

PAYMENT_MODE_ONLY

If Merchant wants to allow payment mode selection on his website. Merchant can allow consumer to select CC/DC or NB on their website.

Alphanumeric

No

AUTH_MODE

Possible values of this parameter:

3D – Credit/Debit card & Operator Billing payment mode

USRPWD – for Net banking payment mode

Mandatory: If merchant wants to allow payment mode selection on his website. Paytm will enable this feature as per merchant’s request.

Alphanumeric

No

PAYMENT_TYPE_ID

Possible values of this parameter:
CC – for credit card payment mode
DC – for debit card payment mode
NB – for net banking payment mode
Telco – for Operator Billing
PPI – For Paytm Cash

Mandatory: If Merchant wants to allow payment mode selection on his website.

Alphanumeric

No

CARD_TYPE

Possible values of this parameter:
VISA/MASTER/AMEX
Mandatory: If Merchant wants to allow payment mode selection on his website.

Alphanumeric

No

BANK_CODE

This parameter is mandatory to pass if the customer is choosing Net banking option. Bank code’s list will be provided by Paytm upon request. Customer will directly move to Bank page in this case. Mandatory: If Merchant wants to allow payment mode selection on his website.

Alphanumeric

No

PROMO_CAMP_ID

This parameter is required to be passed when merchant is running any promotional campaign and it is configured at Paytm payment gateway. Merchant will get in touch with Paytm to launch any Promocode campaign.

Alphanumeric

No

ORDER_DETAILS

Text which merchants want to be displayed on Paytm’s payment page. This will have order details of the product/service

Alphanumeric

No

DOB

Date of birth of customer

Alpha

No

VERIFIED_BY

Parameter will contain any one value mentioned below on which merchant has verified customer.
EMAIL , MOBILE_NO

Alpha

No

IS_USER_VERIFIED

YES – if merchant has verified customer
on the field mentioned in “VERIFIED_BY”
parameter.

NO – if merchant has not verified customer.

Alphanumeric

No

ADDRESS_1
ADDRESS_2
CITY
STATE
PINCODE

Different parameters for the address and location

Alphanumeric

No

LOGIN_THEME

This parameter is used to display customized Paytm login page requested by merchant

Alphanumeric

No

CALLBACK_URL

Merchant will get response on this URL if this parameter is sent in transaction request. This call back URL will get priority over the static call back URL configured during the time of integration.

URL

No

THEME

Format: THEME|SUBTHEME
Default Value : merchant
Theme used to display Paytm payment page. Subtheme is used to customize payment page as requested by merchant

Alphanumeric

No

As we can see, the checksum is a mandatory field needed to post this form. But from where can we get  this checksum.

First of all, our website will need an API where we can generate a “checksum” which is a mandatory fields need to redirect to the Paytm website. Let us look at how to generate this checksum in the below section.

How to generate checksum

With servers build in node, we have a npm package called Paytm_App_Checksum_Kit_NodeJs which provides us two methods for generating and verifying checksum.

These are:

  • genchecksum(paramarray: Object , merchant_key: string, callback):

example code:

 

var paytm_checksum = require('./paytm/checksum'); //use checksum.js of the above module to generate checksum

var paramarray = {};
paramarray['MID'] = 'xxxxxxxxxxxxxx';  //You merchant ID provided by paytm
paramarray['ORDER_ID'] = 'ORDER00001'; //unique OrderId for every request
paramarray['CUST_ID'] = 'CUST0001'; // unique customer identifier 
paramarray['INDUSTRY_TYPE_ID'] = 'xxxxxxxxx'; //Provided by Paytm
paramarray['CHANNEL_ID'] = 'WEB'; //Provided by Paytm
paramarray['TXN_AMOUNT'] = '1.00'; // transaction amount
paramarray['WEBSITE'] = 'xxxxxxxxxxxx'; //Provided by Paytm
paramarray['CALLBACK_URL'] = 'http://xyz/handlecallbackresponse'; //the callback url where you want paytm to be redirected after adding money to the wallet
paramarray['EMAIL'] = 'abc@gmail.com'; // customer email id
paramarray['MOBILE_NO'] = '9999999999'; // customer 10 digit mobile no.

//Generate checksum using
paytm_checksum.genchecksum(paramarray, paytm_config.MERCHANT_KEY, function (err, checksum) {
      paramarray['CHECKSUMHASH'] = checksum;
      response.writeHead(200, {'Content-type' : 'text/json','Cache-Control': 'no-cache'});
      response.write(JSON.stringify(paramarray)); 
      response.end();       
}

 

Above method will receive two parameters, params object with necessary fields and your merchant key. On the basis of these parameters it will generate an encrypted checksum.

Posting paytm form for redirection

Now we will use this checksum hash to post a form to the paytm website.

On our client side, we just need to add an invisible form which will post all the required parameters the paytm server:

Example:

 

<div style="display: none;">

  <!--Paytm Redirection Form-->
  <form name="paytmform" id="paytmform"
        action="https://pguat.paytm.com/oltp-web/processTransaction"
        method="POST">
    <input type="hidden" readonly="readonly" name="REQUEST_TYPE" value="DEFAULT"/>
    <input type="hidden" readonly="readonly" name="MID" value=""/>
    <input type="hidden" readonly="readonly" name="ORDER_ID"
           value=""/>
    <input type="hidden" readonly="readonly" name="CUST_ID" value=""/>
    <input type="hidden" readonly="readonly" name="TXN_AMOUNT" value=""/>
    <input type="hidden" readonly="readonly" name="CHANNEL_ID" value="WEB"/>
    <input type="hidden" readonly="readonly" name="CALLBACK_URL"
           value=""/>
    <input type="hidden" readonly="readonly" name="INDUSTRY_TYPE_ID"
           value=""/>
    <input type="hidden" readonly="readonly" name="WEBSITE"
           value=""/>
    <input type="hidden" readonly="readonly" name="CHECKSUMHASH"
           value=""/>
  </form>
</div>

Add all the parameters to the above form using the api used for creating checksum hash and submit this form. Rest will be handled by the paytm itself.

var form = $('#paytmform');
document.forms["paytmform"]["REQUEST_TYPE"].value = "DEFAULT";
document.forms["paytmform"]["MID"].value = response.MID;
document.forms["paytmform"]["ORDER_ID"].value = response.ORDER_ID;
document.forms["paytmform"]["CUST_ID"].value = response.CUST_ID;
document.forms["paytmform"]["TXN_AMOUNT"].value = response.TXN_AMOUNT;
document.forms["paytmform"]["CHANNEL_ID"].value = response.CHANNEL_ID;
document.forms["paytmform"]["CALLBACK_URL"].value = response.CALLBACK_URL;
document.forms["paytmform"]["INDUSTRY_TYPE_ID"].value = response.INDUSTRY_TYPE_ID;
document.forms["paytmform"]["WEBSITE"].value = response.WEBSITE;
document.forms["paytmform"]["CHECKSUMHASH"].value = response.CHECKSUM;

document.forms["paytmform"].submit();

And rest will be handled by paytm from adding money to your wallet, to making transactions.

Hope now you can easily integrate paytm wallet to your website effortlessly 🙂

Recent Post

  • Building Intelligent AI Models For Enterprise Success: Insider Strategies 

    Just picture a world where machines think and learn like us. It might sound like a scene straight out of a sci-fi movie, right? Well, guess what? We are already living in that world now. Today, data, clever algorithms, and AI models are changing the way businesses operate. AI models are serving as a brilliant […]

  • Introducing Google Vids in Workspace: Your Ultimate AI-Powered Video Creation Tool

    Hey there, fellow content creators and marketing gurus! Are you tired of drowning in a sea of emails, images, and marketing copy, struggling to turn them into eye-catching video presentations? Fear not, because Google has just unveiled its latest innovation at the Cloud Next conference in Las Vegas: Google Vids- Google’s AI Video Creation tool! […]

  • Achieve High ROI With Expert Enterprise Application Development

    Nowadays modern-day enterprises encounter no. of challenges such as communication breakdown, inefficient business processes, data fragmentation, data security risks, legacy system integration with modern applications, supply chain management issues, lack of data analytics and business intelligence, inefficient customer relationship management, and many more. Ignoring such problems within an organization can adversely impact various aspects of […]

  • State Management with Currying in React.js

    Dive into React.js state management made easy with currying. Say goodbye to repetitive code and hello to streamlined development. Explore the simplicity and efficiency of currying for your React components today!

  • How Much Does It Cost to Develop an App in 2024?

    The price of bringing your app to life typically ranges from $20,000 to $200,000. This cost varies based on factors like which platform you choose, the complexity of features you want, and the size of your intended audience. However, costs can climb even higher for more complex projects, reaching up to $350,000.

  • Mastering Software Testing Strategies: Your Guide

    Implementing best software testing strategies is a crucial part of software development, ensuring that digital products meet industry standards. Defined by the International Software Testing Qualification Board, it encompasses a range of activities, both static and dynamic, throughout the software’s lifecycle. As an essential component of the Software Development Life Cycle (SDLC), the Software Testing […]