Unlike JS checkout, with JS Elements you can create an inline payment page without the need to render an iframe on top of your cart page. With our pre-built UI blocks, you can create the payment page exactly as you desire with the utmost ease.
You can see the demo below to see JS elements in action.
Note: Integrating Initiate Transaction API is mandatory for the merchant to consume this solution.
Step 1. Load the JS library
<script type="application/javascript" crossorigin="anonymous" src="{HOST}/merchantpgpui/checkoutjs/merchants/{MID}.js"></script>
Where, {HOST} - Server host from where merchant configurations are loaded.
Following are the host domains based on the environment:
- Production - https://securegw.paytm.in
- Staging - https://securegw-stage.paytm.in
{MID} - Merchant ID (unique identifier assigned to each merchant )
Testing MID can be fetched from the API Keys section of the Merchant Dashboard. Production MID is generated by Paytm post successful activation of your account and can be fetched from the same dashboard.
Step 2. Initialise the config options
The config details can be checked from here.
var config = {
flow:"DEFAULT",
//Optional to hide paymode label when only one paymode is available
hidePaymodeLabel: true,
data:{
orderId:"orderId",
amount: 200,
token:"token",
tokenType:"TXN_TOKEN"
},
style: {
//Optional: global style that will apply to all paymodes
bodyColor: "green"
},
merchant:{
mid:"mid"
},
handler: {
notifyMerchant: function(eventType, data) {
console.log("notify merchant called", eventType, data);
}
}
};
*hidePaymodeLabel: An option config to hide paymode label where only one paymode is available. For example: In case of card paymode(element), when there are no saved card available this config can be used to hide "Card/debit card" label.
Step 3. Create an Elements instance
var elements = window.Paytm.CheckoutJS.elements(config);
Step 4. Render a payment source instance from the elements instance
List of available payment source to create jsElement are given below:
- CARD: Used to render the element to make payment with Debit/Credit card
- NB: Used to render the element to make payment with Net Banking
- UPI: Used to render the element to make payment with UPI
- PAY_WITH_PAYTM: Used to render the element to make payment with Paytm Wallet
- SCAN_AND_PAY: Used to render the element to make payment with QR code scanner
- EMI: Used to render the element to make payment with EMI
var cardElement = elements.createElement(
//paymode
window.Paytm.CheckoutJS.ELEMENT_PAYMODE.CARD,
//element config
{
//Mandatory: selector where you want to render/display it
root: "#card",
//Optional: element style
style: {
bodyBackgroundColor: "white"
}
}
);
cardElement.invoke();
The createElement instance exposes two methods:
- invoke: To render the paymode (element)
- close: To manually close/remove the rendered element
Sample Code Snippet:
<html>
<head>
<title>Js Element Demo</title>
</head>
<body>
<!-- Card paymode container -->
<div id="card"></div>
<script type="application/javascript" crossorigin="anonymous" src="https://securegw.paytm.in/merchantpgpui/checkoutjs/merchants/dummyExampleMIDIdentifier.js" onload="onScriptLoad();"></script>
<script>
function onScriptLoad(){
//Check if CheckoutJS is available
if(window.Paytm && window.Paytm.CheckoutJS){
//Add callback function to CheckoutJS onLoad function
window.Paytm.CheckoutJS.onLoad(function excecuteAfterCompleteLoad() {
//Config
var config = {
flow:"DEFAULT",
hidePaymodeLabel: true,
data:{
orderId:"orderId",
amount: 200,
token:"token",
tokenType:"TXN_TOKEN"
},
merchant:{
mid:"mid"
},
handler: {
notifyMerchant: function(eventType, data) {
console.log("notify merchant called", eventType, data);
}
}
};
//Create elements instance
var elements = window.Paytm.CheckoutJS.elements(config);
//Create card element
var cardElement = elements.createElement(window.Paytm.CheckoutJS.ELEMENT_PAYMODE.CARD, {root: "#card", style: {bodyBackgroundColor: "blue"}});
//Render element
cardElement.invoke();
});
}
}
</script>
</body>
</html>
Once the integration is complete, you may test it using the staging credentials available at the API Keys section of the Merchant Dashboard and using the test paymode credentials listed here.
Once the test transaction is complete, move your code to a live environment with production account details. Note that production accounts details are available after you have activated your account on the dashboard.
We would also recommend you to read about Refund Management.
In case of any issues with integration, please Get in touch.
