How to dynamically pass form input values to Razorpay checkout?

[mrdshyml]

Hi
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>
  <div class="py-3">
    <input type="email" name="email" id="email" placeholder="tony@avengers.com" required>
  </div>
  <div class="py-3">
    <input type="phone" name="phone" id="phone" placeholder="9999999999" required>
  </div>
  <daiv class="py-3">
    <textarea name="message" id="message" name="message" cols="30" rows="5"></textarea>
    </div>
    <div class="py-3">
      <button id="pay">Pay ₹99</button>
    </div>
</form>

And code to handle payment:

 <script src="https://checkout.razorpay.com/v1/checkout.js"></script>

      <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;
    
        axios.post("/pay/coffee").then((info)=>{
          console.log(info);

          var options = {
            "key": "rzp_test_somekeyhere", 
            "order_id": info.data.id, 
            "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);
            rzp1.open();
            e.preventDefault();
          }
        })
      </script>

For reference, You can find the Razorpay docs here.

How can I resolve this issue?