How to assign store's order value(amount) while checking out to the amount in my payment gateway checkout process?

Question

I'm trying to integrate a Razorpay payment gateway to my online store which is build on ecwid. According to the process outlined in the docs of ecwid, I need to decrypt the order details provided by my store, send, the details to my payment gateway for processing and finally redirect the customer back to the store.

Based on Razorpay's docs I need a form based script code is placed in the button tag. When the button is clicked, the checkout form is sent and the customer goes about carrying out the payment.

<button id="rzp-button1">Pay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
  "key": "YOUR_KEY_ID",
  "amount": "2000", // 2000 paise = INR 20
  "name": "Merchant Name",
  "description": "Purchase Description",
  "image": "/your_logo.png",
  "handler": function (response){
      alert(response.razorpay_payment_id);
  },
  "prefill": {
      "name": "Harshil Mathur",
      "email": "[email protected]"
  },
  "notes": {
    "address": "Hello World"
  },
  "theme": {
    "color": "#F37254"
  }
};
var rzp1 = new Razorpay(options);

document.getElementById('rzp-button1').onclick = function(e){
  rzp1.open();
  e.preventDefault();
}
</script>

Now here is my problem. i've successfully managed to decrypt the payload from Ecwid's store to get the order details which includes the amount. How do I assign the amount in the button with the amount obtained from the store?

This is my code up until now. It seems very roundabout and it still doesn't work. Any help will be appreciated.

purchaseRouter.route('/')
.post((req, res, next) => {
  var algorithm = encryptionHelper.CIPHERS.AES_128_CBC;
  var originalBase64 = req.body.data.replace(/-/g, "+").replace(/_/g, "/");
  const key = process.env.ECWID_CLIENT_SECRET.slice(0, 16);
  var decText = encryptionHelper.decryptText(algorithm, key, originalBase64, 
   "base64");
  var jsonText = JSON.parse(decText);
  var amount = jsonText.cart.order.total;
  //var name = jsonText.billingPerson.name;
  var email = jsonText.cart.order.email;
  amount = amount*100;
  var options = {
   "key": process.env.RAZORPAY_KEY_ID,
   "amount": amount,
   "name": "Fluvium",
   "description": "Board & Combat Sportswear",
   "image": "/your_logo.png",
   "handler": function (response){
     console.log(response.razorpay_payment_id);
     if (typeof response.razorpay_payment_id == 'undefined' ||  
        response.razorpay_payment_id < 1) {
      console.log("Error" + response.razorpay_payment_id);;
     } else {
       document.getElementById('razorpay_payment_id').value =  
          response.razorpay_payment_id;
       document.getElementById('razorpay_signature').value = 
        response.razorpay_signature;
       document.razorpayform.submit();
     }
     location.href = redirect_url;
    },
    "prefill": {
      "name": "",
      "email": email
    },
    "notes": {
       "address": "Hello World"
    },
    "theme": {
       "color": "#F37254"
    }
   };
    //res.send(JSON.stringify(options));
  var html='';
  html += "<form name='razorpayform' action='/purchase/razorpay' 
      method='POST'>";
  html += "<input type='hidden name='razorpay_payment_id' 
      id='razorpay_payment_id'>"
  html += "<input type='hidden' name='razorpay_signature'  
      id='razorpay_signature' >"
  html += "</form>"
  html += "<script src='https://checkout.razorpay.com/v1/checkout.js'> 
      </script>";
  html += "<script>";
  html += "var options = " + JSON.stringify(options);
  html += "; var rzp1 = new Razorpay(options);";
  html += "rzp1.open();";
  html += "</script>";
 res.send(html);
});

Answer 1

options.handler is a function, which gets lost when you run JSON.stringify(options).

In order to preserve it, we would need to convert the function logic into a string. This string is an IIFE, which returns your original handler.

So, your code would now be

purchaseRouter.route('/')
.post((req, res, next) => {
  var algorithm = encryptionHelper.CIPHERS.AES_128_CBC;
  var originalBase64 = req.body.data.replace(/-/g, "+").replace(/_/g, "/");
  const key = process.env.ECWID_CLIENT_SECRET.slice(0, 16);
  var decText = encryptionHelper.decryptText(algorithm, key, originalBase64, 
   "base64");
  var jsonText = JSON.parse(decText);
  var amount = jsonText.cart.order.total;
  //var name = jsonText.billingPerson.name;
  var email = jsonText.cart.order.email;
  amount = amount*100;
  var options = {
   "key": process.env.RAZORPAY_KEY_ID,
   "amount": amount,
   "name": "Fluvium",
   "description": "Board & Combat Sportswear",
   "image": "/your_logo.png",
    "handler": "(function getHandler (response) { return function (response) { console.log(response.razorpay_payment_id); if (typeof response.razorpay_payment_id == 'undefined' || response.razorpay_payment_id < 1) { console.log('Error' + response.razorpay_payment_id); } else { document.getElementById('razorpay_payment_id').value = response.razorpay_payment_id; document.getElementById('razorpay_signature').value = response.razorpay_signature; document.razorpayform.submit(); } location.href = redirect_url; } })()",
    "prefill": {
      "name": "",
      "email": email
    },
    "notes": {
       "address": "Hello World"
    },
    "theme": {
       "color": "#F37254"
    }
   };
    //res.send(JSON.stringify(options));
  var html='';
  html += "<form name='razorpayform' action='/purchase/razorpay' 
      method='POST'>";
  html += "<input type='hidden name='razorpay_payment_id' 
      id='razorpay_payment_id'>"
  html += "<input type='hidden' name='razorpay_signature'  
      id='razorpay_signature' >"
  html += "</form>"
  html += "<script src='https://checkout.razorpay.com/v1/checkout.js'> 
      </script>";
  html += "<script>";
  html += "var options = " + JSON.stringify(options);
  html += "; options.handler = eval(options.handler);";
  html += "var rzp1 = new Razorpay(options);";
  html += "rzp1.open();";
  html += "</script>";
 res.send(html);
});

I added html += "; options.handler = eval(options.handler);"; and morphed the handler key to become a string.