Laravel集成Moyasar支付时AJAX保存交易仅beforeSend生效问题

核心问题定位 #

你的代码存在3个直接导致回调不生效的错误：

• jQuery AJAX配置项中不存在fail、done回调字段，这两个是链式调用方法，写在配置参数里不会被识别
• 你指定了dataType:'json'，如果后端返回非JSON格式数据、或者接口返回4xx/5xx错误，jQuery会直接终止执行你配置的success回调，你没有配置合法的错误捕获回调无法感知
• Moyasar支付完成后会自动跳转到你配置的callback_url，AJAX请求还没收到响应页面就已经跳转，后续回调自然无法触发

修复步骤 #

1. 修正AJAX回调写法，补充错误捕获逻辑
2. 移除callback_url参数避免支付完成自动跳转，或者跳转前等待AJAX执行完成
3. 确认后端initialize_transaction路由为POST类型，返回值为标准JSON格式

修复后参考代码 #

<script>
    Moyasar.init({
        element: '.mysr-form',
        amount: {{ $order->total * 100 }},
        currency: 'SAR',
        description: 'مادة , رقم الطلب :   {{$order->id}} {{ $order->subject->name }}',
        publishable_api_key: '{{ config('moyasar.publishable_key') }}',
        // 不需要自动跳转可以删掉callback_url参数，如果要保留跳转建议把存储逻辑放到callback_url对应的后端接口里
        // callback_url: '{{ route('order.checkout', $order->id) }}',
        methods: [
            'creditcard',
        ],
        on_completed: function (payment) {
            $.ajax({
                url: '{{route('initialize_transaction')}}',
                method: 'POST',
                dataType: 'json',
                data: {
                    'order': {{$order->id}},
                    'payment': payment.id,
                    '_token': '{{csrf_token()}}',
                },
                beforeSend : function() {
                    alert('before')
                },
                success: function (res) {
                    alert('success');
                    console.log(res);
                    // 业务执行完成后再手动跳转
                    // window.location.href = '{{ route('order.checkout', $order->id) }}'
                },
                error: function (xhr, status, error) {
                    alert('请求错误：' + error);
                    console.log(xhr.responseText);
                },
                complete: function () {
                    alert('请求完成，无论成功失败都会触发')
                }
            })
        }
    });
</script>

额外排查项 #

如果修改后还是有问题，可以按以下顺序排查：

• 打开浏览器开发者工具的网络标签，查看AJAX请求有没有正常发送，响应状态码是多少
• 如果返回419状态码，说明CSRF校验失败，确认你传的_token是否正确
• 如果返回404状态码，检查initialize_transaction路由拼写是否正确，有没有加路由前缀
• 如果返回500状态码，查看后端Laravel日志排查代码错误

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