paytm developer docs logoDeveloperDocumentation
search

Configuration & Customization

Configure HTML Code for Responsiveness

You need to make the checkout page dynamically responsive across different device types (mobile / desktop etc) used by the customer. To do this, add the below line of code in your html code.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
 NOTE

 

You need to configure this HTML code for mobile and handheld devices.

 

Customize Your Payments Page Design

Paytm JS Checkout solution comes with a default payment page that is widely used by most merchants. Additionally, you can customize the design of the payment page by changing the background, theme, header panel, sorting payment options, and enabling/disabling Paytm's branding.

 

Following are the two ways for customizing payments page:

  • Customize via UMP Dashboard (easy-to-implement option and only available on production dashboard)
  • Customize via code

 

Customize via UMP Dashboard

  1. Login to the Merchant Dashboard (UMP Panel) and click the JS Checkout option from the left menu. If you're visiting JS Checkout on the Merchant Dashboard for the first time, an overview page with details will open to assist you to understand the solution. This page also has a video, taking you through the entire journey. If you're revisiting JS Checkout on the Merchant Dashboard, you’ll be directly taken to the theme customisation page.
  2. Design the payments screen as per your theme.
  3. Upload your Brand Logo and make it appear on the checkout page.
  4. Submit your changes.
 NOTE

 

If you are integrating the solution for the first time, you need to do the following:

 

Click the Generate JS Code button. Then, copy the code generated and paste it in the <body>tag of your HTML page.

 

If you've already integrated the JS solution and made some modifications, you just need to save your settings. You do not need to generate the JS again and do the integration.

 

 TIP

 

It is easier to start with the default checkout page configuration. In case you want to customize the checkout page, try doing it using the UMP dashboard.

 

Customize via Code 

You can integrate the JS Code Snippet, validate the integration, and do the customizations later.

 

    JS CODE 
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": {}
};

 

To know more about the configuration parameters, please refer to Appendix A.

​