I posted a question earlier, but it turned out to be more complex than I anticipated. In order to simplify things, here's the revised version of my question. I am currently working on payment processing using a JavaScript API and receiving the results successfully. However, I need to send these results to a Django backend for further processing. Due to my limited knowledge of JavaScript/Django interaction, I'm encountering some difficulties. Below are the relevant files:
Subscription.py This is a straightforward page that allows users to select 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')
And here is the corresponding Subscription.html file:
{% 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae0e5efcaeee5efa4e9e5e7">[email protected]</a>"
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 functions properly and displays the results from the payment event in the console. My challenge lies in finding a way to interact with the "results" within the subscription view above in order to process the payment event effectively. I've attempted various methods, but there seems to be a crucial element I'm overlooking.