For Paytm JS Checkoput - payment

Question

<div id="paytm-checkoutjs"></div>
<script type="application/html" crossorigin="anonymous" src="https://securegw-stage.paytm.in/merchantpgpui/checkoutjs/merchants/demoKey.js" onload="onScriptLoad();"> </script>
<script>
function onScriptLoad(){
var config = {
"root": "",
"flow": "DEFAULT",
"data": {
"orderId": "", /* update order id */
"token": "", /* update token value */
"tokenType": "TXN_TOKEN",
"amount": "" /* update amount */
},
"handler": {
"notifyMerchant": function(eventName,data){
console.log("notifyMerchant handler function called");
console.log("eventName => ",eventName);
console.log("data => ",data);
}
}
};
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>
The form after selecting the payment option will be shown below.
Please let me know how to take values from the below form to the function written in above and work the payment gateway.
<div class="container" style="padding-top:100px;">
<form action="" method="post">
<input type="hidden" id="CUST_ID" name="CUST_ID" value="<?php echo $txtMarketCode; ?>">
<input type="hidden" id="INDUSTRY_TYPE_ID" name="INDUSTRY_TYPE_ID" value="Retail">
<input type="hidden" id="CHANNEL_ID" name="CHANNEL_ID" value="WEB">
<div class="form-group">
<label>Order ID:</label>
<input type="text" class="form-control" id="ORDER_ID" name="ORDER_ID" size="20" maxlength="20" autocomplete="off" tabindex="1" value="<?php echo $txtTranID; ?>">
</div>
<div class="form-group">
<label>Amount to Pay:</label>
<input type="text" class="form-control" id="TXN_AMOUNT" name="TXN_AMOUNT" autocomplete="off" tabindex="5" value="<?php echo $txtTxnAmount; ?>">
</div>
<div class="form-group">
<input type="submit" name="submit" value="CheckOut" class="btn btn-success btn-lg" style="background-
color:#0000FF; margin-left: 37%;">
</div>
</form>
</div>
</body>
I have tried to add JS Checkout for Paytm payment gateway integration to my webite. How to pass value from my php form to above onScriptLoad() function. please help me incorporate this function.

Answer 1

First, you need to call initiate transaction API which will return you with a transaction token. Pass the transaction token obtained in the function as below -
function onScriptLoad(){
var config = {
"root": "",
"flow": "DEFAULT",
"data": {
"orderId": "<?php echo $orderid;?>", /* update order id */
"token": "<?php echo $txn_token;?>", /* update token value */
"tokenType": "TXN_TOKEN",
"amount": "<?php echo $amount;?>" /* update amount */
},
"handler": {
"notifyMerchant": function(eventName,data){
console.log("n`enter code here`otifyMerchant handler function called");
console.log("eventName => ",eventName);
console.log("data => ",data);
}
}
};
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);
});
});
}
}
If it still doesn't resolve your problem please raise a query on "Paytm Developer Support"