JS Checkout 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

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.
Design the payments screen as per your theme.
Upload your Brand Logo and make it appear on the checkout page.
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.