Laravel Filament自定义视图字段中Razorpay支付按钮无法加载

问题原因 #

Filament采用动态DOM渲染机制（依赖Alpine.js），你的原代码使用DOMContentLoaded事件监听，该事件在Filament表单元素挂载到DOM之前就已触发，导致Razorpay实例无法正确绑定到按钮；另外固定ID可能在多次渲染表单时引发冲突，重复加载脚本也可能导致潜在问题。

解决方案 #

方案1：使用Alpine.js适配动态渲染 #

修改你的razorpay-button.blade.php视图，利用Alpine的x-init在元素挂载时初始化Razorpay，同时避免重复加载脚本：

<div x-data="{ rzpInstance: null }" x-init="
    // 全局标记脚本是否已加载，避免重复引入
    if (!window.razorpayScriptLoaded) {
        const script = document.createElement('script');
        script.src = 'https://checkout.razorpay.com/v1/checkout.js';
        script.onload = initRazorpay;
        document.head.appendChild(script);
        window.razorpayScriptLoaded = true;
    } else {
        initRazorpay();
    }

    function initRazorpay() {
        const 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: 'gaurav.kumar@example.com',
                contact: '9000090000'
            },
            notes: {
                address: 'Razorpay Corporate Office'
            },
            theme: {
                color: '#3399cc'
            }
        };
        rzpInstance = new Razorpay(options);
    }
">
    <button class="btn btn-primary" @click.prevent="rzpInstance.open()">Pay</button>
</div>

方案2：全局加载Razorpay脚本（更简洁） #

在AppServiceProvider的boot方法中全局注入Razorpay脚本，避免重复加载：

use Illuminate\Support\Facades\Blade;

public function boot()
{
    Blade::push('scripts', function () {
        return '<script src="https://checkout.razorpay.com/v1/checkout.js"></script>';
    });
}

然后简化视图代码：

<div x-data="{ rzpInstance: null }" x-init="
    rzpInstance = new Razorpay({
        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: 'gaurav.kumar@example.com',
            contact: '9000090000'
        },
        notes: {
            address: 'Razorpay Corporate Office'
        },
        theme: {
            color: '#3399cc'
        }
    });
">
    <button class="btn btn-primary" @click.prevent="rzpInstance.open()">Pay</button>
</div>

进阶优化：动态传递参数 #

不要硬编码支付参数，从后端动态传递到视图：

// 在ViewField中传递数据
ViewField::make('razorpay_button')
    ->view('components.razorpay-button')
    ->with([
        'order_id' => $yourOrder->razorpay_order_id,
        'amount' => $yourOrder->amount * 100, // Razorpay要求使用最小货币单位（如派萨）
        'customer_name' => $yourOrder->customer_name,
        'customer_email' => $yourOrder->customer_email,
        'customer_contact' => $yourOrder->customer_contact,
        'razorpay_key' => config('services.razorpay.key'),
    ]);

视图中使用动态参数：

<div x-data="{ rzpInstance: null }" x-init="
    rzpInstance = new Razorpay({
        key: '{{ $razorpay_key }}',
        amount: '{{ $amount }}',
        currency: 'INR',
        name: 'Acme Corp',
        description: 'Test Transaction',
        image: 'https://example.com/your_logo',
        order_id: '{{ $order_id }}',
        callback_url: '{{ route('razorpay.callback') }}',
        prefill: {
            name: '{{ $customer_name }}',
            email: '{{ $customer_email }}',
            contact: '{{ $customer_contact }}'
        },
        notes: {
            address: 'Razorpay Corporate Office'
        },
        theme: {
            color: '#3399cc'
        }
    });
">
    <button class="btn btn-primary" @click.prevent="rzpInstance.open()">Pay</button>
</div>

内容的提问来源于stack exchange，提问作者bilal basheer