paytm developer docs logoDeveloperDocumentation
search

Appendix A: Customization via Code

 
By using the configuration you can change the following:

  • Header
  • Footer
  • Theme
  • Brand Logo
  • Payment Option ordering/filtering
let defaultMerchantConfiguration = {
    "root": "",
    "style": {
        "bodyColor": "",
        "themeBackgroundColor": "",
        "themeColor": "",
        "headerBackgroundColor": "",
        "headerColor": "",
        "errorColor": "",
        "successColor": ""
    },
    "flow": "DEFAULT",
    "data": {
        "orderId": "",
        "token": "",
        "tokenType": "TXN_TOKEN",
        "amount": "",
        "userDetail": {
            "mobileNumber": "",
            "name": ""
        }
    },
    "merchant": {
        "mid": "",
        "name": "",
        "redirect": true
    },
    "labels": "DEFAULT",
    "payMode": {
        "labels": {},
        "filter": [],
        "order": []
    },
    "handler": {}
};

 

Configuration Details 

 

You can make the configuration on the runtime as per the window.Paytm.CheckoutJS.init.

Following are the details for customization parameters:

 

Attribute Purpose Type Default Example
root The DOM element to be mounted on initialization. It can be a CSS selector string or an actual HTMLElement. String | HTMLElement #paytm-checkoutjs 
window.Paytm.CheckoutJS.init({
  // using CSS selector string
  root:"#checkout-hook",       

  // using HTMLElement
  root:document.querySelector(".checkout-class") 
});

 
flow Type of JS Checkout integration. It will be  DEFAULT. String DEFAULT 
window.Paytm.CheckoutJS.init({  
  flow:"DEFAULT"       
});

 
labels Change the label text of paymodes Object {} 
window.Paytm.CheckoutJS.init({
  payMode:{
    "labels": {
      "UPI":"Bhim UPI"
    }    
  } 
});

 

 

style: 

 

Description: Style the layout of the payment page. Merchant can customize the header, body and theme of the page.
Type: Object
Default: {}

NOTE

 

Color code should be in hexadecimal values.

 

Attribute Purpose Type Example
themeBackgroundColor Primary color of the theme i.e. background color of HTML elements such as button, radio button and checkbox. String 
window.Paytm.CheckoutJS.init({
  style:{
    "themeBackgroundColor":"#33cc33",    
  }
});

 
themeColor Secondary color of the theme i.e. text color of HTML elements such as button, radio button & checkbox String 
window.Paytm.CheckoutJS.init({
  style:{
    "themeColor":"#33cc80"    
  }
});

 
headerBackgroundColor Primary/background color of header and footer. String 
window.Paytm.CheckoutJS.init({
  style:{
    "headerBackgroundColor":"#3333cc"    
  }
});

 
headerColor Secondary color of the header and footer i.e. text color of content in header and footer. String 
window.Paytm.CheckoutJS.init({
  style:{
    "headerColor":"#5933cc"    
  }
});

 

 

data:

 

Description: Configure transaction-related data of each request.

Type: Object

window.Paytm.CheckoutJS.init({
  "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);
    }
  }
});

 

NOTE

 

orderId, amount,token, and tokenType are mandatory fields on the data object.

 

Attribute Purpose Type Note Example
orderId Order ID String(50) Special Characters allowed in Order ID are: “@” “-” “_” “.” 
window.Paytm.CheckoutJS.init({
  data:{
    "orderId":"ORDER_ID_12345"        
  }
});

 
amount Transaction amount String | Number

Must contain upto two decimal points. The amount should not include any separator like (“,”)

 
window.Paytm.CheckoutJS.init({
  data:{
    "amount":"4594"        
  }
});

 
token Transaction token received from calling Initiate Transaction API. String If token is present then tokenType field is mandatory 
window.Paytm.CheckoutJS.init({
  data:{
    "tokenType":"TXN_TOKEN",
    "token":"<Alpha-numeric string>"        
  }
});

 
tokenType

Type of token for doing transaction

 

 String

Token field is a prerequisite.
For JS Checkout tokenType will be TXN_TOKEN

 
window.Paytm.CheckoutJS.init({
  data:{
    "orderId":"ORDER_ID_12345",
    "amount":"4594",
    "tokenType":"TXN_TOKEN",
    "token":"<Alpha-numeric string>"    
  }
});

 

merchant:

 

Description: Configure merchant related properties

Type: Object

 

Attribute Purpose Type Default Values Example
name Change merchant name String   
window.Paytm.CheckoutJS.init({
  merchant:{
    name: 'Merchant name'
  }
});

 
redirect Handling of payment response after successful transaction Boolean

True


Note: If redirect field is false then transactionStatus callback in part of configuration is mandatory.		 
window.Paytm.CheckoutJS.init({
  merchant:{
    redirect: false
  },
  handler:{ 
      transactionStatus:function(data){
        console.log("payment status ", data);  
      } 
    }
});

 

 

 

payMode:

 

Description: List of supported payment options. Customize order, filter and labels for payment options render on the page using payMode's value.

Type: Object

 

Key Value
Paytm Wallet BALANCE
Paytm Payment Bank PPBL
Paytm Postpaid PDC
Credit/Debit Card CARD
EMI EMI
Net Banking NB
UPI UPI

 

 

Attribute Purpose Type Default Values Example
order Reorder payment option as per their priority defined Array [ ] 
window.Paytm.CheckoutJS.init({
  payMode:{
    "order": ['UPI','CARD']
  } 
});

 
filter Filter payment options fetch from backend APIs      
exclude Remove payment option from the server response Array [ ] 
window.Paytm.CheckoutJS.init({
  payMode:{
    "filter": {
        "exclude": ['UPI']
    }
  } 
});

 

handler:

 

Description: Callback handler for communicating with merchant page and notify about the state of payment

Type: Object

Attribute Purpose Type Default Values Example
transactionStatus It is used to provide information to the merchant about the payment status. Object

Null

Note: This callback is mandatory if merchant.redirect is false

 

window.Paytm.CheckoutJS.init({
  handler:{
    transactionStatus:function transactionStatus(paymentStatus){
      console.log("paymentStatus => ",paymentStatus);              
    } 
  }
});

 
notifyMerchant It is used to provide information to the merchant about the state of the payment page ( invalid token, session expire, cancel transaction etc.) eventName: String , data:<Any-JS-Type></code>

Null

Note: This callback is mandatory.

 

window.Paytm.CheckoutJS.init({
  handler:{
    notifyMerchant:function notifyMerchant(eventName,data){
      console.log("notify merchant about the payment state");
    } 
  }
});