search

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>