Razorpay Checkout Not Loading in Laravel Filament Custom View Field

I am trying to integrate Razorpay's checkout button into a custom view field in my Laravel Filament application. The Razorpay button and script work perfectly on a standalone Blade file but do not function as expected when added to a Filament custom view field.

Here is the code I am using:

Custom Blade View (razorpay-button.blade.php):

<div>
    <button id="rzp-button1" class="btn btn-primary">Pay</button>
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var options = {
                "key": "asdffff",
                "amount": "50000",
                "currency": "INR",
                "name": "Acme Corp",
                "description": "Test Transaction",
                "image": "https://example.com/your_logo",
                "order_id": "order_9A33XWu170gUtm",
                "callback_url": "https://eneqd3r9zrjok.x.pipedream.net/",
                "prefill": {
                    "name": "Gaurav Kumar",
                    "email": "[email protected]",
                    "contact": "9000090000"
                },
                "notes": {
                    "address": "Razorpay Corporate Office"
                },
                "theme": {
                    "color": "#3399cc"
                }
            };

            var rzp1 = new Razorpay(options);
            document.getElementById('rzp-button1').addEventListener('click', function (e) {
                rzp1.open();
                e.preventDefault();
            });
        });
    </script>
</div>

use Filament\Forms\Components\ViewField;

ViewField::make('razorpay_button')
    ->view('components.razorpay-button'),

Adding the View Field in Filament Form

things are tried

Checked for JavaScript errors in the browser console—none are present.