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:
<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>