Python(Django) :I want the payment form(code) triggered whenever a user clicks the submit button and only saved into DB if payment is succesful

Question

I am currently using DJANGO How can I make the payment form(code) triggered when a user clickn submit and also make it saved into DB after successful payment. Please help me out.. i have been trying to solved this days back.

Here is my models.py

from django.db import models
class Promoting(models.Model):
    yourname= models.CharField(max_length=60)
    fathername= models.CharField(max_length=60)
    mothername= models.CharField(max_length=60)
    imagefield=models.ImageField(upload_to='postedimages')

    def __str__(self):
        return self.promoterauthor

Here is my views.py

from django.shortcuts import render
from .models import Promoting
def homepage(request):
    if request.method == 'POST':
        yourname=request.POST.get('yourname')
        fathername=request.POST.get('fathername')
         mothername=request.POST.get(' mothername')
        imagefield=request.FILES['imagefield']       
 newdata=Promoting(promoterauthor=promoterauthor,websiteurl=websiteurl,tagline=tagline,imagefield=imagefield)
        newone.save()
        return render(request, 'success.html', {})
    else:
        return render(request, 'homepage.html', {})

Here is my form

<form action="{% url 'home' %}" method="POST" role="form" enctype="multipart/form-data class="contactForm">
            {% csrf_token %}

            <div class="form-row">
              <div class="form-group col-md-6">
                <input type="text" name="yourname" id="yourname" class="form-control"  placeholder="Youur username"  required>
              </div>
              <div class="form-group col-md-6">
                <input type="" class="form-control" name="fathername" id="fathername"  placeholder="Your Website"  required>
              </div>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="mothername" id="mothername" placeholder="Add a Tag line"  required>
            </div>
            <div class="form-group">
              <input type="file" class="form-control" name="imagefield" id="imagefield" placeholder="Your image"  accept="image/*" required>
            </div>
            <div class="text-center"><button type="submit">Send Message</button></div>
</form>

The form submits successfully into the database and also my payment gateway(Rave by flutterwave.COM is working well)n I ONLY NEED A WAY TO LINK BOTH TOGETHER

Precisely, what I want is the payment form triggered once the submit button is clicked and I only want a the data saved into DB if only payment is successful .. please help out The code snippet from my payment gateway also works when the pay button is clicked... Here it the payment code

<form>
    <script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>
    <button type="button" onClick="payWithRave()">Pay Now</button>
</form>

<script>
    const API_publicKey = "FLWPUBK-152e7e9e17c0f7e985f9fee5838eafcc-X";

    function payWithRave() {
        var x = getpaidSetup({
            PBFPubKey: API_publicKey,
            customer_email: "[email protected]",
            amount:5,
            customer_phone: "234099940409",
            currency: "USD",
            txref: "rave-123456",
            meta: [{
                metaname: "flightID",
                metavalue: "AP1234"
            }],
            onclose: function() {},
            callback: function(response) {
                var txref = response.tx.txRef; // collect txRef returned and pass to a 					server page to complete status check.
                console.log("This is the response returned after a charge", response);
                if (
                    response.tx.chargeResponseCode == "00" ||
                    response.tx.chargeResponseCode == "0"
                ) {
                    // redirect to a success page
                } else {
                    // redirect to a failure page.
                }

                x.close(); // use this to close the modal immediately after payment.
            }
        });
    }
</script>

THIS IS WHAT IS GENERATED BY THE PAYMENT CODE WHEN PAY IS CLICKED