How to send an Javascript object to be processed on a Django Backend

Question

I had asked this question but I found out it was a bit complicated. I have simplified the question here. I am doing payment processing with a javascript API. I get the results, but I want to send it to a Django backend to be processed. I am not too familiar with this Javascript/Django interaction, hence my issue. The following are the files.

Subscription.py It's a simple page that lets users choose their subscription.

@csrf_exempt
@login_required(login_url='login')
def subscription(request):
    user = request.user
    user_organization = OrganizationUser.objects.get(user=user)
    company = Company.objects.filter(name = user_organization.organization.name).first()
    today = datetime.date.today()
    form = CompanyForm(request.POST)
    subscription = Subscription.objects.all()

    if user_organization.is_admin == True:

        context = {'user_organization': user_organization, 'form': form, 
                'subscription': subscription, 'company': company, 'today': today,}
        return render(request, 'registration/subscription.html', context)
    else:
        return HttpResponse('You are not authorised to view this page')

Here is the corresponding Subscription.html

{% block content %} 


<div class="columns is-centered">

   <div class="column is-5 box">
  
    {% if company.paid_till < today %}
    <form action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="content">
      
      <h1 class="title is-4">
          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
          Account is not active
      </h1>
      Your company <strong>{{user_organization.organization}}</strong> is not active. Please renew the subscription.<br>
    </div>
    {% else %}
    
    <p class="label">We have great subcription options for you. Choose from our list either for monthly or annual plans</p><br>

    {% endif %}
    <h2>Subscription Packages</h2><br>
    <div class="select"> 
      <select
        name="search"
        hx-get="{% url 'searched-subs' %}"
        hx-target="#searched-subs"
        hx-trigger="change"
        hx-swap="innerHTML"
        onchange="updateButtonDataAmount(event)"
      >
      <option value="select-a-plan">Select A Plan</option>
      <option value="7.99">Starter - Monthly ($7.99/Month)</option>
      <option value="79.00">Starter - Annually ($79.00/Year)</option>
      <option value="49.90">Business - Monthly ($49.90/Month)</option>
      <option value="499.00">Business - Annually ($499.00/Year)</option>
      </select>
    </form>
    </div><br><br>

    <div id="searched-subs"></div><br><be>
    
    <button class="intaSendPayButton button is-btn-mycolor is-fullwidth" 
    data-amount="10" 
    data-currency="KES" 
    data-email="joe@doe.com" 
    data-first_name="JOE" 
    data-last_name="DOE" 
    data-country="KE">
    Pay Now
    </button><br>
  
    </div>
    </div>

<script>


  new window.IntaSend({
    publicAPIKey: "publishing-key",
    live: false //set to true when going live
  })
  .on("COMPLETE", (results) => console.log("Payment in COMPLETE status", results))
  .on("FAILED", (results) => console.log("Payment in FAILED status", results))
  .on("IN-PROGRESS", (results) => console.log("Payment in progress status", results))
  </script>
  {% endblock %}

The code works well and prints to the console the results from the payment event. I need a way to interact with the "results" in the subscription view above, to be able to process the payment event. I have tried several ways, but I think there is something I am missing.

Answer 1

Generally speaking, when you need to send some data from the browser to a server, then you want to make HTTP request. On Django side - you write regular view (request handler) that will receive the request, take the data from it and do something (supposingly useful) with it. On Javascript side - you write some code to issue request with the data that you need. Read about using XMLHTTPRequest or more modern fetchAPI in browser, this should help you get started. MDN and w3schools are great learning resources:

https://www.w3schools.com/js/js_ajax_intro.asp

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API