使用Django+Braintree Drop-in UI支付成功后无法跳转问题求助

我在商店网站的支付模块使用Braintree沙箱环境，期望支付成功后将用户重定向至Done页面，但实际当前页面仅重新加载，请求协助解决。

相关代码 #

1. payment_process视图代码 #

def payment_process(request):
    order_id = request.session.get('order_id')
    order = get_object_or_404(Order, id=order_id)
    total_cost = order.get_total_cost()
    if request.method == 'POST':
        nonce = request.POST.get('paymentMethodNonce', None)
        result = gateway.transaction.sale({
            'amount': f'{total_cost:.2f}',
            'payment_method_nonce': nonce,
            'options': {
                'submit_for_settlement': True
            }
        })
        if result.is_success:
            order.paid = True
            order.braintree_id = result.transaction.id
            order.save()
            return redirect('payment:done')
        else:
            return redirect('payment:canceled')
    else:
        client_token = gateway.client_token.generate()
        return render(request, 'payment/process.html', {'order': order, 'client_token': client_token})

2. 支付页面代码（标注为Done.html，实际应为process.html） #

{% extends "shop/base.html" %}

{% block title %} Pay by credit card {% endblock %}

{% block sidenavigation %}

{% endblock %}

{% block content %}
    <h1>Pay by credit card</h1>

    <!-- includes the Braintree JS client SDK -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://js.braintreegateway.com/web/dropin/1.14.1/js/dropin.min.js"></script>

    <form method="post" autocomplete="off">
        {% if braintree_error %}
            <div class="alert alert-danger fade in">
                <button class="close" data-dismiss="alert">&times;</button>
                {{ braintree_error|safe }}
            </div>
        {% endif %}
        <div class="braintree-notifications"></div>
        <div id="braintree-dropin"></div>
        <input style="background-color: #0783ca" id="submit-button" class="btn btn-success btn-lg btn-block"
               type="button" value="Pay now!"/>
    </form>

    <script>
        var braintree_client_token = "{{ client_token}}";
        var button = document.querySelector('#submit-button');

        braintree.dropin.create({
            authorization: "{{client_token}}",
            container: '#braintree-dropin',
            card: {
                cardholderName: {
                    required: false
                }
            }
        }, function (createErr, instance) {
            button.addEventListener('click', function () {
                instance.requestPaymentMethod(function (err, payload) {
                    console.log('ok')
                    $.ajax({
                        type: 'POST',
                        url: '{% url "payment:process" %}',
                        data: {
                            'paymentMethodNonce': payload.nonce,
                            'csrfmiddlewaretoken': '{{ csrf_token }}'
                        },
                    }).done(function (result) {
                        //do accordingly
                    });
                });
            });
        });
    </script>

{% endblock %}

相关截图说明 #

• 点击“Pay now!”按钮后的终端日志截图
• 点击“Pay now!”按钮前的process.html页面截图
• 点击“Pay now!”按钮后的process.html页面截图

问题核心：你用AJAX发送支付请求，但视图返回的redirect对AJAX请求无效——AJAX只会接收响应内容，不会自动触发页面跳转。

1. 修改视图，返回JSON响应 #

将原有的redirect改为返回包含跳转URL的JSON数据，让前端处理跳转逻辑：

from django.http import JsonResponse
from django.urls import reverse

def payment_process(request):
    order_id = request.session.get('order_id')
    order = get_object_or_404(Order, id=order_id)
    total_cost = order.get_total_cost()
    if request.method == 'POST':
        nonce = request.POST.get('paymentMethodNonce', None)
        result = gateway.transaction.sale({
            'amount': f'{total_cost:.2f}',
            'payment_method_nonce': nonce,
            'options': {
                'submit_for_settlement': True
            }
        })
        if result.is_success:
            order.paid = True
            order.braintree_id = result.transaction.id
            order.save()
            return JsonResponse({'status': 'success', 'redirect_url': reverse('payment:done')})
        else:
            return JsonResponse({'status': 'error', 'redirect_url': reverse('payment:canceled')})
    else:
        client_token = gateway.client_token.generate()
        return render(request, 'payment/process.html', {'order': order, 'client_token': client_token})

2. 修改前端AJAX回调，手动跳转 #

在JS的$.ajax.done方法中，根据返回的JSON数据执行页面跳转：

$.ajax({
    type: 'POST',
    url: '{% url "payment:process" %}',
    data: {
        'paymentMethodNonce': payload.nonce,
        'csrfmiddlewaretoken': '{{ csrf_token }}'
    },
}).done(function (result) {
    if (result.status === 'success') {
        window.location.href = result.redirect_url;
    } else {
        window.location.href = result.redirect_url;
    }
}).fail(function() {
    alert('支付请求失败，请稍后重试');
});

3. 额外检查 #

确保urls.py中已正确定义payment:done和payment:canceled的路由，指向对应的视图页面。

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