How to dynamically pass form input values to Razorpay checkout?

I am using Razorpay to collect on-time payments in one web page. In case you don’t know, Razorpay is an Indian Payment processor. Razorpay is like Stripe for India.
Before initiating the payment, I am using one form to collect some info from the user. And on clicking the submit button, I am passing these values and initiating a Razorpay payment instance.

The issue is, my form values are not captured by Razorpay.

Here is my code of my form

<form method="POST">
  <div class="py-3">
    <input type="text" name="name" id="name" placeholder="Tony Stark" required>
  <div class="py-3">
    <input type="email" name="email" id="email" placeholder="" required>
  <div class="py-3">
    <input type="phone" name="phone" id="phone" placeholder="9999999999" required>
  <daiv class="py-3">
    <textarea name="message" id="message" name="message" cols="30" rows="5"></textarea>
    <div class="py-3">
      <button id="pay">Pay ₹99</button>

And code to handle payment:

 <script src=""></script>

        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const phone = document.getElementById('phone').value;
        const message = document.getElementById('message').value;

          var options = {
            "key": "rzp_test_somekeyhere", 
            "name": "Index Daily",
            "description": "Buy Team Index Daily a coffee ☕ ",
            "callback_url": "/pay/success",
            "prefill": {
              "name": name,
              "email": email,
              "contact": phone,
            "notes": {
              "message": message

          var rzp1 = new Razorpay(options);
          document.getElementById('pay').onclick = function (e) {
            console.log(name, email, phone, message);

For reference, You can find the Razorpay docs here.

How can I resolve this issue?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.