search

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 buttonradio 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 buttonradio 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 : orderIdamount,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);
    });
}