DJANGO SENDING ORDERS TO THE DATABASE WITHOUT ANY PAYMENT GATEWAY - django

Question

How do i send my order to my database in django
i'm beginner in django, and i'm trying to build an ecoomerce sute . although i'm not using the same payment gateway so its difficult for me to fllow up.
i want the order details to be saved in the database.
help
my orders view
from django.shortcuts import render
from django.http.response import JsonResponse
from django.shortcuts import render
from cart.cart import Cart
from .models import Order, OrderItem
Create your views here.
def add(request):
cart = Cart(request)
if request.POST.get('action') == 'post':
user_id = request.user.id
carttotal = cart.get_total_price()
# Check if order exists
if Order.objects.filter(order_key=order_key).exists():
pass
else:
order = Order.objects.create(user_id=user_id, full_name='name', address1='add1',
address2='add2', total_paid=carttotal, order_key=order_key)
order_id = order.pk
for item in cart:
OrderItem.objects.create(order_id=order_id, product=item['product'], price=item['price'], quantity=item['qty'])
response = JsonResponse({'success': 'Return something'})
return response
def payment_confirmation(data):
Order.objects.filter(order_key=data).update(billing_status=True)
def user_orders(request):
user_id = request.user.id
orders = Order.objects.filter(user_id=user_id).filter(billing_status=True)
return orders
{% extends "../store/base.html" %}
{% load static %}
{% block title %}Order{% endblock %}
{% block content %}
<style>
.account-form input,
{
border: 2px solid #ccc;
height: calc(2em + .75rem + 2px);
}
.form-control {
border: 2px solid #ccc;
}
.account-form input:focus {
border-color: #1497ff;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075), 0 0 0px rgba(255, 0, 0, 0.6);
}
</style>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div id="payment-form" class="col-12 col-lg-6 mx-auto">
<h3 class="mb-3">Billing address</h3>
<!-- Error messages in this element -->
<div id="card-errors" class="a" role="alert"></div>
<form>
<div class="row g-3">
<div class="col-sm-7">
<label for="firstName" class="form-label">Customer Name</label>
<input type="text" name="name" class="form-control" id="custName" placeholder="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-12">
<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
<input type="email" name="email" class="form-control" id="email" placeholder="you#example.com">
</div>
<div class="col-12">
<label for="address" class="form-label">Address</label>
<input type="text" name="address" class="form-control" id="custAdd" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your address.
</div>
</div>
<div class="col-md-5">
<label for="country" name="country" class="form-label">Country</label>
<select class="form-select" id="country" required>
<option value="">Choose...</option>
<option>Zambia</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4">
<label for="state" name="state" class="form-label">State</label>
<select class="form-select" id="state" required>
<option value="">Choose...</option>
<option>Lusaka (Evelyne Hone College)</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
</div>
</div>
<hr class="my-4">
<h4 class="mb-3">Orders</h4>
<label for="card-element">Credit or debit card</label>
<div id="card-element" class="form-control form-control-payment">
<!-- Payment elements will appear here -->
</div>
<hr class="my-4">
<button id="submit" id="make-payment" class="btn btn-primary w-100 fw-bold">Order Now</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var total={{'basket.get_subtotal_price'}}
document.getElementById("make-payment").addEventListener('click',function(e){
submitFormData()
})
function submitFormData(){
console.log("payment button clicked")
var userFormData={
'name':null,
'email':null,
'total':total
'address':null,
'state':null,
'country':null,
}
if (user=='AnonymousUser'){
userFormData.name=form.name.value
userFormData.name=form.email.value
userFormData.name=form.address.value
userFormData.name=form.state.value
userFormData.name=form.country.value
}
var url='/order_placed/'
fetch=(url,{
method:'post'
headers:{
'content-type':'application/json',
'x-CSRF_Token':csrf_token
},
body:JSON.stringify({'form':userFormData})
} )
</script>
{% endblock %}