[BUG] Razorpay not auto-opening on pay.php

[ArchanRD]

Describe the bug
When users are redirected to pay.php after initiating a checkout process, the screen is completely white, and neither the Razorpay button nor the payment form is visible. This prevents users from completing the payment process.

To Reproduce
Steps to reproduce the behaviour:

1. Select items from restaurant menu.
2. Click on checkout button.
3. Fill the details on checkout form.
4. Click on place order button.

You'll get redirected to pay.php and encounter a white screen.

Step 1:

Step 2:

Step 3:

Expected behavior
Instead of getting a white screen, a razorpay payment form should appear.

Screenshots
Already added above.

Desktop (please complete the following information):

• OS: [Ubuntu]
• Browser [Brave]
• Version [v1.70.123

Additional context
This can give a bad user experience and stop a workflow. Solving this issue could be a step towards creating a proper flow.

Possible reasons according to me

<form action="/homemade/verify.php" method="POST">
    <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="<?php echo $_SESSION['orderid'] ?>" 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 } ?>>
    </script>
    <!-- Any extra fields to be submitted with the form but not sent to Razorpay -->
    <input type="hidden" name="shopping_order_id" value="<?php echo $_SESSION['orderid'] ?>">
</form>

The script tag in the form might not be rendering the button or proper javascript needed.

<script type="text/javascript">
$(document).ready(function() {

    $('.razorpay-payment-button').click();
});
</script>

As needed js in not loaded, it is causing error to activate the button click.

Improvement that can be done

Instead of rendering the button and click it using javascript, use latest code to directly render the form.

@Vimall03 I would like to work on this issue under "gssoc-ext" and "hacktoberfest". I appreciate you if you can assign a level 2 or level 3 label on this, as it took bit more efforts to brainstorm this issue and find an optimal solution. Thank you!

[github-actions]

🎉 Thank you for your interest in contributing to this repository! Please wait while we review and assign this issue to you. In the meantime, feel free to ⭐ the repo to stay updated on future developments.

Stay awesome! 😎

[Vimall03]

Sure give it a try, I'll assign this an appropriate level based on the PR. You can get started now.