Configuration Options

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

Default

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

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.

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

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

window.Paytm.CheckoutJS.init({
  style:{
    "themeColor":"#33cc80"    
  }
});

headerBackgroundColor

Primary/background color of header and footer.

Type: 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.

Type: String

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

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.

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: "@" "-" "_" ".".

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 (",")

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.

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.

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

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.

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: []

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: []

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

labels

Change the label text of paymodes

Type: Object
Default: {}

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

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

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.

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.

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