RazorPay form auto load on page load without clicking Pay Now button

Question

I am trying to integrate Razorpay in my application. Here is a code that controls loading of payment model when "Pay Now" button is clicked. I want to make the modal load on page load instead of button click. I tried submitting form via javascript to see if that loads the modal but that's not working.

Here is the code:

<form action="verify.php" method="POST" id="gateway">
  <script
    src="https://checkout.razorpay.com/v1/checkout.js"
    data-key="<?php echo $data['key']?>"
    data-amount="<?php echo $data['amount']?>"
    data-currency="INR"
    data-name="<?php echo $data['name']?>"
    data-image="<?php echo $data['image']?>"
    data-description="<?php echo $data['description']?>"
    data-prefill.name="<?php echo $data['prefill']['name']?>"
    data-prefill.email="<?php echo $data['prefill']['email']?>"
    data-prefill.contact="<?php echo $data['prefill']['contact']?>"
    data-notes.shopping_order_id="3456"
    data-order_id="<?php echo $data['order_id']?>"
    <?php if ($displayCurrency !== 'INR') { ?> data-display_amount="<?php echo $data['display_amount']?>" <?php } ?>
    <?php if ($displayCurrency !== 'INR') { ?> data-display_currency="<?php echo $data['display_currency']?>" <?php } ?>
  >
    document.getElementById("gateway").submit(); // Not working
  </script>
  <!-- Any extra fields to be submitted with the form but not sent to Razorpay -->
  <input type="hidden" name="shopping_order_id" value="3456">
</form>

However, I also noticed that form actions to page verify.php so if the form is submitted it will go to that page where I just want to load the payment modal. Hence, what I tried can just not be the solution.

Answer 1

I found the solution. Posting as it may be of help for someone in the future:

In razorpay/checkout/automatic.php (or manual.php) place this right after the opening <form> element:

<script>
  $(window).on('load', function() {
    $('.razorpay-payment-button').click();
  });
</script>