node-paytmpg 5.4.2 → 6.4.3

package/app/controllers/payment_controller.js

@@ -10,6 +10,7 @@ var PayU = require('./adapters/payu')
 const PaytmChecksum = require('./checksum/PaytmChecksum.js');
 const { stat } = require('fs');
 const { config } = require('process');
+const path = require('path');
 
 let loadingSVG = ` <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:#fff;display:block;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
 <g transform="rotate(0 50 50)">
@@ -132,7 +133,10 @@ module.exports = function (app, callbacks) {
         return text;
     }
 
-    var vp = __dirname + config.view_path
+    const viewRoot = config.templateDir
+        ? config.templateDir
+        : path.join(__dirname, '..', 'views');
+    var vp = config.resolved_view_path || (viewRoot.endsWith(path.sep) ? viewRoot : viewRoot + path.sep)
 
     module.home = (req, res) => {
 
@@ -144,7 +148,7 @@ module.exports = function (app, callbacks) {
 
     module.init = async function (req, res) {
 
-        if (!req.body.ORDER_ID && !req.body.EMAIL && req.query.to) {
+        if (!req.body.ORDER_ID && !req.body.EMAIL && req.query?.to) {
             let toData = JSON.parse(nodeBase64.decode(req.query.to));
             req.body.NAME = toData.NAME
             req.body.EMAIL = toData.EMAIL
@@ -478,8 +482,9 @@ module.exports = function (app, callbacks) {
                     openMoneyInstance.renderError(params, e, res)
                 }
             }
-            if (callbacks !== undefined)
+            if (callbacks && typeof callbacks.onStart === 'function') {
                 callbacks.onStart(params['ORDER_ID'], params);
+            }
         }
         else if ((req.body.ORDER_ID !== undefined && req.body.ORDER_ID.length > 2) || gotAllParams) {
 
@@ -512,7 +517,7 @@ module.exports = function (app, callbacks) {
                         let showConfirmation =
                             function (err, checksum) {
                                 res.render(vp + "init.hbs", {
-                                    action: '',
+                                    action:"/"+ config.path_prefix+"/init",
                                     readonly: 'readonly',
                                     BUTTON: 'Pay',
                                     NAME: params['NAME'],
@@ -644,7 +649,7 @@ module.exports = function (app, callbacks) {
 
             res.render(vp + "init.hbs", {
 
-                action: '',
+                action:"/"+ config.path_prefix+"/init",
                 readonly: '',
                 check: true,
                 BUTTON: 'Submit',
@@ -668,77 +673,96 @@ module.exports = function (app, callbacks) {
 
     }
 
-    function updateTransaction(req, res) {
-        var myquery = { orderId: req.body.ORDERID };
+    async function updateTransaction(req, res) {
+        var orderToFind = req.body.ORDERID || req.body.ORDER_ID || req.body.ORDERId || (req.query && req.query.order_id) || req.body.ORDER_ID;
+        var myquery = { orderId: orderToFind };
+
+        let objForUpdate = null;
+        try {
+            // try default
+            objForUpdate = await Transaction.findOne(myquery).catch(() => null);
+            // try id
+            if (!objForUpdate) objForUpdate = await Transaction.findOne({ id: orderToFind }).catch(() => null);
+            // try uppercase key
+            if (!objForUpdate) objForUpdate = await Transaction.findOne({ ORDERID: orderToFind }).catch(() => null);
+        } catch (e) {
+            // ignore lookup errors
+            objForUpdate = objForUpdate || null;
+        }
+
+        let returnUrl = objForUpdate ? objForUpdate.returnUrl : null;
+        if (returnUrl == 'undefined') returnUrl = undefined;
 
-        Transaction.findOne(myquery, function (err, objForUpdate) {
-            let returnUrl = objForUpdate ? objForUpdate.returnUrl : null;
-            if (returnUrl == 'undefined') {
-                returnUrl = undefined
+        if (!objForUpdate) {
+            if (returnUrl) {
+                let separator = returnUrl.indexOf('?') > -1 ? '&' : '?';
+                returnUrl = returnUrl + separator + 'status=FAILED&message=txn_not_found&ORDERID=' + req.body.ORDERID;
+                return res.redirect(returnUrl);
             }
-            if (err || !objForUpdate) {
-                if (returnUrl) {
-                    let separator = returnUrl.indexOf('?') > -1 ? '&' : '?';
-                    returnUrl = returnUrl + separator + 'status=FAILED&message=txn_not_found&ORDERID=' + req.body.ORDERID;
-                    return res.redirect(returnUrl);
-                }
-                res.send({ message: "Transaction Not Found !", ORDERID: req.body.ORDERID, TXNID: req.body.TXNID })
-                return;
+            return res.send({ message: "Transaction Not Found !", ORDERID: req.body.ORDERID, TXNID: req.body.TXNID });
+        }
+
+        if (objForUpdate.status != ("INITIATED") && objForUpdate.status != ("TXN_PENDING") && objForUpdate.status != ("PENDING")) {
+            objForUpdate.readonly = "readonly";
+            objForUpdate.action = config.homepage;
+            if (returnUrl) {
+                let separator = returnUrl.indexOf('?') > -1 ? '&' : '?';
+                returnUrl = returnUrl + separator + 'status=' + objForUpdate.status + '&ORDERID=' + objForUpdate.orderId + '&TXNID=' + objForUpdate.TXNID;
+                return res.redirect(returnUrl);
             }
-            if (objForUpdate.status != ("INITIATED") && objForUpdate.status != ("TXN_PENDING") && objForUpdate.status != ("PENDING")) {
-                objForUpdate.readonly = "readonly"
-                objForUpdate.action = config.homepage
+            else {
+                return res.render(vp + "result.hbs", objForUpdate);
+            }
+        }
+
+        if (req.body.status == "paid" && !req.body.STATUS) req.body.STATUS = "TXN_SUCCESS";
+        objForUpdate.status = req.body.STATUS;
+        objForUpdate.TXNID = req.body.TXNID;
+        objForUpdate.extra = JSON.stringify(req.body);
+
+        var newvalues = { $set: objForUpdate };
+        Transaction.updateOne(myquery, newvalues, function (err, saveRes) {
+            if (err) {
                 if (returnUrl) {
                     let separator = returnUrl.indexOf('?') > -1 ? '&' : '?';
-                    returnUrl = returnUrl + separator + 'status=' + objForUpdate.status + '&ORDERID=' + objForUpdate.orderId + '&TXNID=' + objForUpdate.TXNID;
+                    returnUrl = returnUrl + separator + 'status=FAILED&message=update_error&ORDERID=' + req.body.ORDERID;
                     return res.redirect(returnUrl);
                 }
-                else {
-                    res.render(vp + "result.hbs", objForUpdate);
-                }
-                console.log("Transaction already processed ", req.body.ORDERID)
-                // res.send({ message: "Transaction already processed", status: objForUpdate.status, ORDERID: objForUpdate.orderId, TXNID: objForUpdate.TXNID, TXNID: req.body.TXNID })
-                return;
+                return res.send({ message: "Error Occured !", ORDERID: req.body.ORDERID, TXNID: req.body.TXNID });
             }
-            if (req.body.status == "paid" && !req.body.STATUS) {
-                req.body.STATUS = "TXN_SUCCESS"
-            }
-            objForUpdate.status = req.body.STATUS;
-            objForUpdate.TXNID = req.body.TXNID;
-            objForUpdate.extra = JSON.stringify(req.body);
-
-            var newvalues = { $set: objForUpdate };
-            Transaction.updateOne(myquery, newvalues, function (err, saveRes) {
-
-                if (err) {
-                    if (returnUrl) {
-                        let separator = returnUrl.indexOf('?') > -1 ? '&' : '?';
-                        returnUrl = returnUrl + separator + 'status=FAILED&message=update_error&ORDERID=' + req.body.ORDERID;
-                        return res.redirect(returnUrl);
-                    }
-                    res.send({ message: "Error Occured !", ORDERID: req.body.ORDERID, TXNID: req.body.TXNID })
-                }
-                else {
 
-                    if (callbacks !== undefined)
-                        callbacks.onFinish(req.body.ORDERID, req.body);
-                    objForUpdate.readonly = "readonly"
-                    objForUpdate.action = config.homepage
-                    if (returnUrl) {
-                        let separator = returnUrl.indexOf('?') > -1 ? '&' : '?';
-                        returnUrl = returnUrl + separator + 'status=' + objForUpdate.status + '&ORDERID=' + objForUpdate.orderId + '&TXNID=' + objForUpdate.TXNID;
-                        return res.redirect(returnUrl);
-                    }
-                    res.render(vp + "result.hbs", objForUpdate);
-                }
-            });
-
-        }, usingMultiDbOrm ? Transaction : undefined)
+            if (callbacks && typeof callbacks.onFinish === 'function') {
+                callbacks.onFinish(req.body.ORDERID, objForUpdate);
+            }
+            objForUpdate.readonly = "readonly";
+            objForUpdate.action = config.homepage;
+            if (returnUrl) {
+                let separator = returnUrl.indexOf('?') > -1 ? '&' : '?';
+                returnUrl = returnUrl + separator + 'status=' + objForUpdate.status + '&ORDERID=' + objForUpdate.orderId + '&TXNID=' + objForUpdate.TXNID;
+                return res.redirect(returnUrl);
+            }
+            res.render(vp + "result.hbs", objForUpdate);
+        });
     }
 
     module.callback = async (req, res) => {
         console.log("request_data ", req.originalUrl, JSON.stringify(req.body))
 
+        // Normalize common order id and txn id field names (support ORDER_ID, ORDERID, etc.)
+        try {
+            if ((!req.body.ORDERID || req.body.ORDERID === '') && req.body.ORDER_ID) {
+                req.body.ORDERID = req.body.ORDER_ID;
+            }
+            if ((!req.body.TXNID || req.body.TXNID === '') && req.body.TXN_ID) {
+                req.body.TXNID = req.body.TXN_ID;
+            }
+            if ((!req.body.ORDERID || req.body.ORDERID === '') && req.query && req.query.order_id) {
+                req.body.ORDERID = req.query.order_id;
+            }
+        } catch (e) {
+            // ignore
+        }
+
         var result = false;
         let isCancelled = false;
         if (config.paytm_url) {
@@ -1050,8 +1074,9 @@ module.exports = function (app, callbacks) {
                                 res.send({ message: "Error Occured !", ORDERID: paytmResponse.ORDERID, TXNID: paytmResponse.TXNID })
                             }
                             else {
-                                if (callbacks !== undefined)
+                                if (callbacks && typeof callbacks.onFinish === 'function') {
                                     callbacks.onFinish(req.body.ORDER_ID, orderData);
+                                }
                                 res.send(paytmResponse)
                             }
                         });

package/app/views/init.hbs

@@ -1,93 +1,98 @@
-<h2>Payment Start</h2>
-
-<form action="{{action}}" method="POST">
-  <ul class="form-list">
-    {{#if check}}
-
-    <li class="form-list__row">
-      <label>Name</label>
-      <input type="text" name="NAME" required="" value="{{NAME}}" {{readonly}} />
-    </li>
-    {{else}}
-    <input type="hidden" name="NAME" required="" value="{{NAME}}" {{readonly}} />
+<div class="checkout-grid">
+  <aside class="product-panel card">
+     {{#if productImage}}
+        <div class="product-preview">
+            <img src="{{productImage}}" alt="{{PRODUCT_NAME}}" style="width:100%;height:100%;object-fit:cover" />
+        </div>
+       {{/if}}
+  
+    <div class="product-price">
+      <div class="pill">Product</div>
+      <div class="price">{{PRODUCT_NAME}}</div>
+    </div>
+     {{#if PRODUCT_DESC}}
+    <p class="helper" style="margin-top:14px;">{{PRODUCT_DESC}}</p>
+       {{/if}}
+  </aside>
+
+  <section class="form-panel card">
+    <header class="card__header">
+      <div>
+        <p class="eyebrow">Payment</p>
+        <h2>Review &amp; pay</h2>
+      </div>
+      <div class="amount-chip">₹ {{TXN_AMOUNT}}</div>
+    </header>
 
-    {{/if}}
-    <li class="form-list__row">
-      <label>E-Mail</label>
-      <input type="text" name="EMAIL" required="" value="{{EMAIL}}" {{readonly}} />
-    </li>
+    <p class="helper">Your payment is processed over an encrypted channel. Double-check the details before you continue.</p>
 
-    <li class="form-list__row">
-      <label>Phone</label>
-      <input type="text" name="MOBILE_NO" required="" value="{{MOBILE_NO}}" {{readonly}} />
-    </li>
+    <form action="{{action}}" method="POST" class="form-grid" id="payment-form">
+      {{#if check}}
+      <label class="field">
+        <span class="field__label">Full Name</span>
+        <input type="text" name="NAME" required value="{{NAME}}" {{readonly}} />
+      </label>
+      {{else}}
+      <input type="hidden" name="NAME" required value="{{NAME}}" {{readonly}} />
+      {{/if}}
 
+      <label class="field">
+        <span class="field__label">Email address</span>
+        <input type="email" name="EMAIL" required value="{{EMAIL}}" {{readonly}} />
+      </label>
 
-    <li class="form-list__row">
+      <label class="field">
+        <span class="field__label">Phone</span>
+        <input type="text" name="MOBILE_NO" required value="{{MOBILE_NO}}" {{readonly}} />
+      </label>
 
       {{#if check}}
-
-      <div>
-        <label>
-          Product
-        </label>
-        <input type="text" name="PRODUCT_NAME" required="" value="{{PRODUCT_NAME}}" {{readonly}} />
-      </div>
+      <label class="field">
+        <span class="field__label">Product</span>
+        <input type="text" name="PRODUCT_NAME" required value="{{PRODUCT_NAME}}" {{readonly}} />
+      </label>
       {{else}}
-      <input type="hidden" name="PRODUCT_NAME" required="" value="{{PRODUCT_NAME}}" {{readonly}} />
+      <input type="hidden" name="PRODUCT_NAME" required value="{{PRODUCT_NAME}}" {{readonly}} />
       {{/if}}
 
-    </li>
-    <li class="form-list__row">
+      <label class="field">
+        <span class="field__label">Amount</span>
+        <input type="text" name="TXN_AMOUNT" required value="{{TXN_AMOUNT}}" {{readonly}} />
+      </label>
 
-      <div>
-        <label>
-          Amount
+      <div style="grid-column:1 / -1; display:flex; gap:10px; align-items:center; justify-content:space-between;">
+        <label class="checkbox" style="margin:0">
+          <input type="checkbox" name="save_cc" checked="checked" />
+          <span>I agree to the merchant terms</span>
         </label>
-        <input type="text" name="TXN_AMOUNT" required="" value="{{TXN_AMOUNT}}" {{readonly}} />
+        <div style="font-size:12px; color:rgba(255,255,255,0.6)">Secure by PCI-DSS</div>
       </div>
 
-    </li>
-
-    {{#if check}}
-
-    <li class="form-list__row form-list__row--agree">
-      <label>
-        <input type="checkbox" name="save_cc" checked="checked">
-        I agree to terms and conditions
-      </label>
-    </li>
-    {{/if}}
-
-    <li>
-      <button id="show_button" type="submit" class="button">{{BUTTON}}</button>
-    </li>
-
-  <script>
-          var button = document.getElementById('show_button')
-          button.addEventListener('click',hideshow,false);
-
-          function hideshow() {
-              document.getElementById('show_button').style.display = 'none'; 
-          }   
-    </script>
-
-  </ul>
-
-
-
-  <input type="hidden" name="MID" value="{{MID}}" {{readonly}}>
-  <input type="hidden" name="WEBSITE" value="{{WEBSITE}}" {{readonly}}>
-  <input type="hidden" name="ORDER_ID" value="{{ORDER_ID}}" {{readonly}}>
-  <input type="hidden" name="CUST_ID" value="{{CUST_ID}}" {{readonly}}>
-  <input type="hidden" name="INDUSTRY_TYPE_ID" value="{{INDUSTRY_TYPE_ID}}" {{readonly}}>
-  <input type="hidden" name="CHANNEL_ID" value="{{CHANNEL_ID}}" {{readonly}}>
-  <input type="hidden" name="CALLBACK_URL" value="{{CALLBACK_URL}}" {{readonly}}>
-  <input type="hidden" name="CHECKSUMHASH" value="{{CHECKSUMHASH}}" {{readonly}}>
-
-
-
-
-
-
-</form>
+      <button id="pay-button" type="submit" class="button">{{BUTTON}}</button>
+
+      <input type="hidden" name="MID" value="{{MID}}" {{readonly}} />
+      <input type="hidden" name="WEBSITE" value="{{WEBSITE}}" {{readonly}} />
+      <input type="hidden" name="ORDER_ID" value="{{ORDER_ID}}" {{readonly}} />
+      <input type="hidden" name="CUST_ID" value="{{CUST_ID}}" {{readonly}} />
+      <input type="hidden" name="INDUSTRY_TYPE_ID" value="{{INDUSTRY_TYPE_ID}}" {{readonly}} />
+      <input type="hidden" name="CHANNEL_ID" value="{{CHANNEL_ID}}" {{readonly}} />
+      <input type="hidden" name="CALLBACK_URL" value="{{CALLBACK_URL}}" {{readonly}} />
+      <input type="hidden" name="CHECKSUMHASH" value="{{CHECKSUMHASH}}" {{readonly}} />
+    </form>
+  </section>
+</div>
+
+{{!-- <script>
+  (function(){
+    if (window.__npPayBtnBound) return;
+    window.__npPayBtnBound = true;
+    const payBtn = document.getElementById('pay-button');
+    if (payBtn) {
+      payBtn.addEventListener('click', () => {
+        payBtn.setAttribute('data-loading', 'true');
+        payBtn.setAttribute('disabled', 'disabled');
+        setTimeout(() => payBtn.innerText = 'Processing…', 10);
+      });
+    }
+  })();
+</script> --}}

package/app/views/layouts/index.hbs

@@ -1,58 +1,53 @@
 <!DOCTYPE html>
-<html>
-
+<html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>Secure Pay</title>
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-
-  <link rel="stylesheet" href="css/style.css">
-
-
-</head>
-
-<body>
-
-  <div class="modal">
-    <div class="modal__container">
-
-      <div class="modal__content">
-
-
-
-
-        {{{body}}}
-
-
-
-      </div> <!-- END: .modal__content -->
-    </div> <!-- END: .modal__container -->
-  </div> <!-- END: .modal -->
-  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
-
-  <script src="js/index.js"></script>
-
-
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{brand}} · Secure Checkout</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Crect%20width='16'%20height='16'%20rx='3'%20fill='%23ff5722'/%3E%3C/svg%3E" />
+  <link rel="shortcut icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Crect%20width='16'%20height='16'%20rx='3'%20fill='%23ff5722'/%3E%3C/svg%3E" />
   <style>
-
-    input:focus {
-      border-color: {{theme_color}};
-    }
-   /* 
-    body,
-    .form-list__row label {
-      color: #cc0f0f;
-    }
-    input {
-      color: #cc0f0f;
+    :root {
+      --color-primary: {{theme.primary}};
+      --color-accent: {{theme.accent}};
+      --color-surface: {{theme.surface}};
+      --color-text: {{theme.text}};
+      --color-success: {{theme.success}};
+      --color-danger: {{theme.danger}};
+      --color-outline: rgba(255,255,255,0.08);
+      --radius: 14px;
     }
-
-    */
   </style>
+</head>
+<body class="theme-{{themeName}}">
+  <div class="shell">
+    <header class="shell__header">
+      <div class="brand">
+        {{#if logo}}
+          <span class="brand__mark brand__mark--img"><img src="{{logo}}" alt="{{brand}} logo"></span>
+        {{else}}
+          <span class="brand__mark">{{brand}}</span>
+        {{/if}}
+        <div class="brand__text">
+          <div class="brand__title">{{brand}}</div>
+          <div class="brand__meta">Secure checkout</div>
+        </div>
+      </div>
+      <div class="pill">Encrypted</div>
+    </header>
+
+    <main class="shell__content">
+      {{{body}}}
+    </main>
+
+    <footer class="shell__footer">
+      <span>Protected by {{brand}}</span>
+    </footer>
+  </div>
 </body>
-
 </html>

package/app/views/result.hbs

@@ -1,50 +1,40 @@
-  <h2>Payment Status</h2>
+<section class="card" style="text-align:center; padding:36px 28px;">
+  <div style="display:flex; flex-direction:column; align-items:center; gap:18px;" class="status-{{status}}">
+    <div style="width:84px; height:84px; border-radius:999px; display:grid; place-items:center; background:rgba(255,255,255,0.03);">
+      <svg class="icon-success" width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 17l-5-5" stroke="#4cff9f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <svg class="icon-fail" width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:none"><circle cx="12" cy="12" r="9" stroke="#ff9b9b" stroke-width="2.2"/><path d="M12 8v5" stroke="#ff9b9b" stroke-width="2.2" stroke-linecap="round"/><path d="M12 16h.01" stroke="#ff9b9b" stroke-width="2.2" stroke-linecap="round"/></svg>
+    </div>
 
-        <form action="{{action}}" method="POST">
-          <ul class="form-list">
- 
+    <div>
+      <h2 style="margin:0">Payment</h2>
+      <p class="helper" style="margin-top:6px">{{message}}</p>
+    </div>
 
-            <li class="form-list__row">
-              <label>Order ID</label>
-              <input type="text" name="NAME" required=""  value="{{orderId}}" {{readonly}}/>
-            </li> 
+    <div class="result-grid" style="max-width:560px; width:100%;">
+      <div class="result-item">
+        <p class="label">Order ID</p>
+        <p class="value">{{orderId}}</p>
+      </div>
+      <div class="result-item">
+        <p class="label">Transaction ID</p>
+        <p class="value">{{TXNID}}</p>
+      </div>
+      <div class="result-item">
+        <p class="label">Amount</p>
+        <p class="value">{{amount}}</p>
+      </div>
+      <div class="result-item">
+        <p class="label">Date &amp; Time</p>
+        <p class="value">{{date}}</p>
+      </div>
+    </div>
 
-            <li class="form-list__row">
-              <label>Status</label>
-              <input type="text" name="NAME" required=""  value="{{status}}" {{readonly}}/>
-            </li> 
-         
-            <li class="form-list__row">
-              <label>E-Mail</label>
-              <input type="text" name="EMAIL" required=""  value="{{email}}" {{readonly}}/>
-            </li> 
-              
-            <li class="form-list__row">
-              <label>Phone</label>
-              <input type="text" name="MOBILE_NO" required="" value="{{phone}}" {{readonly}}/>
-            </li> 
-           
- 
-            <li class="form-list__row form-list__row--inline">
-  
-               <div>
-                <label> 
-                    Amount
-                </label>
-                 <input type="text" name="TXN_AMOUNT" required="" value="{{amount}}" {{readonly}} />
-              </div>
-
-            </li>
- 
- 
-  
-            <li>
-              <button type="submit" class="button">DONE</button>
-            </li>
-          </ul>
-
- 
- 
-
-
-        </form>
+    <div style="display:flex; gap:12px; margin-top:8px; width:100%; justify-content:center;">
+      <div class="success-buttons" style="display:flex; gap:12px;">
+        <a href="{{receiptUrl}}" class="button" style="text-decoration:none;">Download Receipt</a>
+        <form action="{{homeAction}}" method="GET" style="display:inline"><button type="submit" class="button">Done</button></form>
+      </div>
+      
+    </div>
+  </div>
+</section>