paytm developer docs logoDeveloperDocumentation
search

Configuration Options

By using the configuration you can change the Style (Header, footer, and theme), paymode ordering/filtering.

  • Default

copy icon
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": {},
    "payMode": {
        "labels": {},
        "filter": [],
        "order": []
    },
    "handler": {}
};

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

 

root

The DOM element to be mounted on initialization. It can be a CSS selector string or an actual HTMLElement.

  • Type: String | HTMLElement

  • Default: #paytm-checkoutjs

copy icon
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.

  • Type: String

  • Default: DEFAULT

default

This is a default checkout implementation.

copy icon
window.Paytm.CheckoutJS.init({  
  flow:"DEFAULT"       
});

style

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.

themeBackgroundColor

Primary color of the theme i.e. background color of HTML elements such as button, radio button & checkbox

  • Type: String

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

  • Type: String
copy icon
window.Paytm.CheckoutJS.init({
  style:{
    "themeColor":"#33cc80"    
  }
});

headerBackgroundColor

Primary/background color of header and footer.

  • Type: String

copy icon
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.

  • Type: String
copy icon
window.Paytm.CheckoutJS.init({
  style:{
    "headerColor":"#5933cc"    
  }
});

bodyColor

Secondary color of the body i.e. text color of content on the payment page.

  • Type: String

copy icon
window.Paytm.CheckoutJS.init({
  style:{
    "bodyColor":"#cccc33",    
  }
});

data

Configure transaction-related data of each request.

  • Type: Object

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

copy icon
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);
    }
  }
});

orderId

  • Type: String(50)

  • Special characters allowed in Order ID are: "@" "-" "_" ".".

copy icon
window.Paytm.CheckoutJS.init({
  data:{
    "orderId":"ORDER_ID_12345"        
  }
});

amount

Transaction amount

  • Type: String|Number

  • Should contain digits up to two decimal points.

  • The amount should not include any separator like (",")

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

token

Transaction token received from calling Initiate Transaction API.

  • Type: String

Note : If token is present then tokenType field is mandatory.

copy icon
window.Paytm.CheckoutJS.init({
  data:{
    "tokenType":"TXN_TOKEN",
    "token":"fe795335ed3049c78a57271075f2199e1526969112097"        
  }
});

tokenType

Type of token for doing transaction. For JS Checkout tokenType will be TXN_TOKEN.

  • Type: String

 token field is mandatory.

copy icon
window.Paytm.CheckoutJS.init({
  data:{
    "orderId":"ORDER_ID_12345",
    "amount":"4594",
    "tokenType":"TXN_TOKEN",
    "token":"fe795335ed3049c78a57271075f2199e1526969112097"    
  }
});

merchant

Configure merchant related properties

  • Type: Object

name

Change merchant name.

  • Type: String
copy icon
window.Paytm.CheckoutJS.init({
  merchant:{
    name: 'Merchant name'
  }
});

redirect

Handling of payment response after successful transaction.

  • Type: Boolean

  • Default: true

Note : If redirect field is false then transactionStatus callback in handler part of configuration is mandatory.

copy icon
window.Paytm.CheckoutJS.init({
  merchant:{
    redirect: false
  },
  handler:{ 
      transactionStatus:function(data){
        console.log("payment status ", data);  
      } 
    }
});

payMode

List of supported paymodes.

  • 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

Customize order , filter and labels for paymodes render on the page using by payMode's value.

 

order

Reorder paymodes as per their priority defined.

  • Type: Array

  • Default: []

copy icon
window.Paytm.CheckoutJS.init({
  payMode:{
    "order": ['UPI','CARD']
  } 
});

filter

Filter paymodes fetch from backend API's

 

exclude

Remove paymode from the server response.

  • Type: Array

  • Default: []

copy icon
window.Paytm.CheckoutJS.init({
  payMode:{
    "filter": {
        "exclude": ['UPI']
    }
  } 
});

labels

Change the label text of paymodes

  • Type: Object

  • Default: {}

copy icon
window.Paytm.CheckoutJS.init({
  payMode:{
    "labels": {
      "UPI":"Bhim UPI"
    }    
  } 
});

handler

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

  • Type: Object

copy icon
window.Paytm.CheckoutJS.init({
  handler:{
    // add merchant specific handler for communication 
  }
});

transactionStatus

Purpose: It's used to provide information to the merchant about the payment status.

Callback Signature

  • Name : transactionStatus

  • Input : Object

  • Return : null

This callback is mandatory if merchant.redirect is false

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

notifyMerchant

Purpose: It's used to provide information to the merchant about the state of the payment page ( invalid token, session expire, cancel transaction etc.).

Callback Signature

  • Name : notifyMerchant

  • Input : eventName: String , data:<Any-JS-Type></code>

  • Return : null

Note: This callback is mandatory.

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

initiateTransaction

Purpose: This handler is to be used when the initialisation of JS is done using the Access token. JS will be passing emiSubventionToken, payableAmount ( after applying bank offer if any), txnAmount and offer (offer payload of apply promo API call if any offer is applied) to the merchant and then the merchant will return to JS module, the token(txn token) and orderId based on the above values.

Note: To be used only when the initialisation of JS module is done using Access Token.

copy icon
initiateTransaction: function(emiSubventionToken, payableAmount, txnAmount, offer) {
    console.log("initiateTransaction called", emiSubventionToken, payableAmount, txnAmount, offer)
    return new Promise(function (res) {
       setTimeout( function (){ res({token: , orderId: 'checkout5345'})}, 2000);
    });
}