Why is it not redirected when the payment is successful? using django and braintree dropin-ui

Question

I use this sandbox for the payment section of the store site. I want to redirect the user to page Done after successful payment, but the current page is loaded again! pealse help

view of 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})

page of Done.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 %}

this is pic of terminal when click to 'pay now!' button:

this is pic of process.html when befor click to 'pay now!' button:

this is pic of process.html when after click to 'pay now!' button:

Answer 1

I think you are rendering process.html after else statement.

Change this:

else:
    client_token = gateway.client_token.generate()
    return render(request, 'payment/process.html', {'order': order, 'client_token': client_token})

To this:

    else:
        client_token = gateway.client_token.generate()
    return render(request, 'payment/process.html', {'order': order, 'client_token': client_token})

Because of this problem, that is happening.