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 >
<div >
{% if company.paid_till < today %}
<form action="" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div >
<h1 >
<i 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 >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 >
<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
data-amount="10"
data-currency="KES"
data-email="[email protected]"
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.
CodePudding user response：
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