how to write the fetch in that case - django app payment

Question

hello I am working on a django app 'my app is about paying for someone service' client will access to the page and click on their selected person and then they will fill a form and click on get the service and then people who work in the plateform will go to another page and they can find a list of forms of people who want to get their service .... but I want the form not to be posted until the payment is done so my database will not be fall. so this is my views.py I have actually 2 functions :

#here where client can select people they are willing to take service from 
@login_required(login_url='login')
def pSelected(request,slug):
    profile = get_object_or_404(Profile,slug=slug)

    form = MessageForm()
    if request.method == 'POST':
        form = MessageForm(request.POST,request.user)
        form.sender = request.user.username
        form.receiver = request.POST.get('receiver', '')
        if form.is_valid():
            form.sender = request.user.username
            form.receiver = request.POST.get('receiver', '')
            messages.success(request, f'succed')
            form.save()
            print(form.sender,form.receiver)
    else:
        form = MessageForm()
    return render(request,'base/p-selected.html',context)
#here for workers in the platefrorm 
@login_required(login_url='login')
def giveService(request):
    requests = Message.objects.all().order_by('-id')

    context={'requests':requests}
    return render(request, 'base/giveService.html',context)

now in my p-selected.html

<form>
<!--I have here for example a form method post *inside of my form I have input get and payment with paypal -->

<input type="submit" value="GET" class="btn get" style="outline: none; margin:auto;"/>

<div id="paypal-button-container"></div>

</form>
<!-- Include the PayPal JavaScript SDK -->
    <script src="https://www.paypal.com/sdk/js?client-id=I-Already-Put-Here-The-Id&currency=USD"></script>

    <script>
        // Render the PayPal button into #paypal-button-container
        paypal.Buttons({

            // Call your server to set up the transaction
            createOrder: function(data, actions) {
                return fetch('/demo/checkout/api/paypal/order/create/', {
                    method: 'post'
                }).then(function(res) {
                    return res.json();
                }).then(function(orderData) {
                    return orderData.id;
                });
            },

            // Call your server to finalize the transaction
            onApprove: function(data, actions) {
                return fetch('/demo/checkout/api/paypal/order/' + data.orderID + '/capture/', {
                    method: 'post'
                }).then(function(res) {
                    return res.json();
                }).then(function(orderData) {
                    // Three cases to handle:
                    //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
                    //   (2) Other non-recoverable errors -> Show a failure message
                    //   (3) Successful transaction -> Show confirmation or thank you

                    // This example reads a v2/checkout/orders capture response, propagated from the server
                    // You could use a different API or structure for your 'orderData'
                    var errorDetail = Array.isArray(orderData.details) && orderData.details[0];

                    if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
                        return actions.restart(); // Recoverable state, per:
                        // https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
                    }

                    if (errorDetail) {
                        var msg = 'Sorry, your transaction could not be processed.';
                        if (errorDetail.description) msg += '\n\n' + errorDetail.description;
                        if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
                        return alert(msg); // Show a failure message (try to avoid alerts in production environments)
                    }

                    // Successful capture! For demo purposes:
                    console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                    var transaction = orderData.purchase_units[0].payments.captures[0];
                    alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');

                    // Replace the above to show a success message within this page, e.g.
                    // const element = document.getElementById('paypal-button-container');
                    // element.innerHTML = '';
                    // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                    // Or go to another URL:  actions.redirect('thank_you.html');
                });
            }

        }).render('#paypal-button-container');
    </script>

I want the workers in plateform to not receive the form until the payment is done by clients how I can do it in that case I already tried but I really couldn't succed many times maybe because I am not that good in js ..I hope you guys can help me in that I won't forget your help thank you so much.