paytm developer docs logoDeveloperDocumentation
search

Invoke Payment Page

This step involves one frontend integration (Add JS Code Snippet) from merchant’s server side.

 

Add JS Code Snippet 

JS Code Snippet is used to initialize and invoke the JS module.

 

The JS code snippet must be integrated in the page where the checkout page will be invoked. Mostly, this is the order page where your website needs to make the payment to confirm their order. When the JS module is invoked, an iframe gets rendered on the merchant’s checkout page from where the customers can complete the payment.

 NOTE

 

Host Details are different for Staging and Production. Please configure accordingly.

Staging: https://securestage.paytmpayments.com

Production: https://secure.paytmpayments.com

 

You need to add the following Paytm’s JS script to your code.

 

    JS CODE 
<script type="application/javascript" src="{HOST}/merchantpgpui/checkoutjs/merchants/{MID}.js" onload="onScriptLoad();" crossorigin="anonymous"></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>

 

 NOTE

 

You need to configure this HTML code for mobile and handheld devices to make the checkout page dynamically responsive. To do this, add the below line of code in your html code.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>

 

 NOTE

 

First, you need to call Initiate Transaction API which will return a transaction token. Pass the transaction token obtained in the function as above.

 


 

Attribute Details

 

Attribute Purpose Return Example
init

Called after Initiate Transaction API. Initializes configuration.

Note: It is Mandatory.

 Promise<Object> 
<script>
 window.Paytm.CheckoutJS.init({}).then(function onSuccess() {
      console.log("merchant configuration updated successfully");
    }).catch(function onError(error){
        console.log("error while calling init method => ",error);
    });
</script>

 
invoke Called after init func. returns “fulfilled”. Invokes payment page. null 
<script>
  window.Paytm.CheckoutJS.init({}).then(function onSuccess() {
        // after successfully updating configuration, invoke JS Checkout
      window.Paytm.CheckoutJS.invoke();
    }).catch(function onError(error){});
</script>

 

 

 

 

 

 

 CAUTION
  • Please make sure that the script is loaded in the head section of your HTML page so that it gets loaded before the function is called.
  • If you are using Firefox Mozilla for integrating Paytm JS Checkout in asp.net C# application, the payment popup window might not open and it might give the following error in Mozilla console: Uncaught TypeError: window.Paytm.CheckoutJS.init is not a function. In such cases, please once clear your browser cache and cookies. If the issue still persists please raise a query on Paytm Developer Support

 


Sample Projects for JS Code Implementation

 

You can refer to the following sample projects for your preferred framework. These sample projects allow you to understand the implementation of the JS code better.