search

Code Snippets

Configuration snippets for easy integration of JS Checkout.

 

A default basic configuration to get started with JS Checkout. Implement the handler functions body and pass the configuration object into window.Paytm.CheckoutJS.init method.

 

Note : update values of root,data.orderId,data.tokendata.tokenTypedata.amount.

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

The JS Snippet, if generated (for first-time integration), will be in the following format:

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

As mentioned earlier, initialisation using Access token is required only in the cases when your cart has an item for which you offer a payment option of Zero/No cost EMI. An additional object of emiSubvention with relevant parameters needs to be passed in the config. Zero/No cost EMI solution can be offered in two ways:

  1. Item based EMI subvention

  2. Amount based EMI subvention

The sample values of the config for both the strategies are given below. For more details, please visit EMI Subvention-Zero/No Cost EMI.

Note

  1. The Reference ID to be passed is same as used in access token API. 
  2. miniCart object is to be used only if the merchant wants to show the mini cart screen on the UI, if no key is passed then the relevant screen will not be shown in UI
{
   "root":"",
      "emiSubvention":{
      "strategy": "ITEM_BASED",
      "customerId": "CUST_001",
      "referenceId":"1234",
      "items": [{
            "itemId":"ITEMID_98765",
            "productId":"PRODUCTID_98765",
            "brandId":"BRANDID_98765",
            "categoryList":[
               "Electronics"
             ],
            "quantity":"1",
            "amount":"1000",
            "verticalId":"PAYTM_EMI",
            "isEmiEnabled": true
        },
        ], 	          
        "miniCart": [{
            "itemId":"ITEMID_98765",
            "imageUrl":"https://merchant-static.paytm.com/merchant-dashboard/logo/AliOPG01851465523919/org/logo",
            "name":"Item Test",
            "amount":"1000",
        },
        ],     
   },
   "flow":"DEFAULT",
   "jsFile":"",
   "data":{
      "orderId":"test1234",
      "amount":"10",
      "token":"ACCESS_TOKEN",
      "tokenType":"ACCESS",
      "userDetail":{
         "mobileNumber":"",
         "name":""
      }
   },
   "merchant":{
      "mid":"wHNUTH68224456779429",
      "name":"Nitin Khan D'souza",
      "logo":"",
      "redirect":true,
      "callbackUrl":"",
      "hidePaytmBranding":false
   },
   "mapClientMessage":{
 
   },
   "labels":{
 
   },
   "payMode":{
      "labels":{
 
      },
      "filter":[
 
      ],
      "order":[
         "LOGIN",
         "CARD",
         "NB",
         "UPI"
      ]
   },
   "handler":{
 
   }
}
{
"root":"",
   "emiSubvention":{
      "strategy": "AMOUNT_BASED",
      "referenceId":"1234"
      "amount":"5" // subvention amount
   },
   "data":{
      "orderId":"test1234",
      "amount":"10", // total price
      "token":"ACCESS_TOKEN0",
      "tokenType":"ACCESS",
      "userDetail":{
         "mobileNumber":"",
         "name":""
      }
   },
   "merchant":{
      "mid":"wHNUTH68224456779429",
      "name":"Nitin Khan D'souza",
      "logo":"",
      "redirect":true,
      "callbackUrl":"",
      "hidePaytmBranding":false
   },
   "mapClientMessage":{
 
   },
   "labels":{
 
   },
   "payMode":{
      "labels":{
 
      },
      "filter":[
 
      ],
      "order":[
         "LOGIN",
         "CARD",
         "NB",
         "UPI"
      ]
   },
   "handler":{
 
   }
}