• Getting Started
    • Mobile Integration (Android/IOS)
      Enterprise Solutions
      Retail Solutions
      Accept Payments
      Process Payments
      Disbursals
      API References
      Testing
      Refunds
      Guides
      Other Processes
      Mini Program Platform

      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 Blink 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 : orderIdamount,token ,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 Blink 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 successfull 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
      KEYVALUE
      Paytm WalletBALANCE
      Paytm Payment BankPPBL
      Paytm PostpaidPDC
      Credit/Debit CardCARD
      EMIEMI
      Net BankingNB
      UPIUPI

      Customize order , filter and labels for paymodes render on 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 server response.

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

      labels

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