search
Your Paytm for business app is working and will keep working beyond March 15th, 2024. Click to know more

Getting Started

Setup

Merchant will need to add mentioned below script tag within their <head></head> section.

<script type="application/javascript" src="{HOST}/merchantpgpui/checkoutjs/merchants/{MID}.js" crossorigin="anonymous"></script>

{HOST} - Server host from where merchant configurations are loaded.

 

Following are the list of host-based on the environment:

{MID} - This is a unique identifier provided to every merchant by Paytm. MID is part of your account credentials and is different on staging and production environment. Your staging MID is available here & production MID will be available once your activation is complete.

Example

A sample example to showcase how the URL looks like:

  • HOST - Production

  • MID - dummyExampleMIDIdentifier

<script type="application/javascript" src="https://securegw.paytm.in/merchantpgpui/checkoutjs/merchants/dummyExampleMIDIdentifier.js" crossorigin="anonymous" ></script>

Usage

After adding the script and JS Snippet code the basic HTML page will look like the mentioned below HTML. You can also add some configuration if needed.

<html>
    <head>
        <title>JS Checkout Demo</title>
    </head>
    <body>
        <div id="paytm-checkoutjs"></div>
        <script type="application/javascript" crossorigin="anonymous" src="https://securegw.paytm.in/merchantpgpui/checkoutjs/merchants/dummyExampleMIDIdentifier.js" onload="onScriptLoad();"></script>
        <script>
            function onScriptLoad(){
                if(window.Paytm && window.Paytm.CheckoutJS){
                    window.Paytm.CheckoutJS.onLoad(function excecuteAfterCompleteLoad() {
                        // initialze configuration using init method 
                        window.Paytm.CheckoutJS.init(config).then(function onSuccess() {
                            // after successfully updating configuration, invoke JS Checkout
                            window.Paytm.CheckoutJS.invoke();
                        }).catch(function onError(error){
                            console.log("error => ",error);
                        });
                    });
                }  
            }   
        </script>
    </body>
</html>