订单支付完成后状态无法更新为Complete的技术问题求助

我需要实现的功能是：订单完成支付后，支付状态变更为Complete，页面跳转至首页且购物车清空。但目前订单支付后状态始终处于Pending。以下是相关Models、Views及JS代码，请求协助解决：

Models #

class Order(models.Model):
    PAYMENT_STATUS_PENDING = 'P'
    PAYMENT_STATUS_COMPLETE = 'C'
    PAYMENT_STATUS_FAILED = 'F'

    PAYMENT_STATUS_CHOICES = [
        (PAYMENT_STATUS_PENDING, 'Pending'),
        (PAYMENT_STATUS_COMPLETE, 'Complete'),
        (PAYMENT_STATUS_FAILED, 'Failed')
    ]
    customer = models.ForeignKey(
        Customer, on_delete=models.PROTECT, null=True, blank=True)
    order_id = models.IntegerField(null=True)
    order_date = models.DateTimeField(auto_now_add=True)
    payment_status = models.CharField(
        max_length=1, choices=PAYMENT_STATUS_CHOICES, default=PAYMENT_STATUS_PENDING
    )

    def __str__(self):
        return str(self.id)
    
    @property
    def get_cart_items(self):
        order_items = self.orderitem_set.all()
        total = sum([item.quantity for item in order_items])
        return total
    
    @property
    def get_cart_total(self):
        order_items = self.orderitem_set.all()
        total = sum([item.get_total for item in order_items])
        return total

Views #

if request.user.is_authenticated:
        customer = request.user.customer
        order, created = Order.objects.get_or_create(customer=customer, payment_status='P')
        #TODO: add float field?
        total = data['form']['total']
        order.order_id = order_id


        if total == order.get_cart_total:
            order.payment_status = 'C'
        order.save()

JavaScript代码 #

var total = '{{order.get_cart_total}}'
    
        var form = document.getElementById('form')
    
        form.addEventListener('submit', function(e){
            e.preventDefault()
            console.log('Form Submitted..')
            document.getElementById('form-button').classList.add('hidden');
            document.getElementById('payment-info').classList.remove('hidden');
        })

        document.getElementById('make-payment').addEventListener('click', function(e){
            submitFormData()
        })

       function submitFormData(){
            console.log('Payment button clicked')

            var userFormData = {
                'first_name':null,
                'last_name':null,
                'email':null,
                'total':total, 
            }
          
            var url = '/process_order/'

            fetch(url, {
                method:'POST',
                headers:{
                    'Content-Type':'application/json',
                    'X-CSRFToken':csrftoken,
                },
                body:JSON.stringify({'form':userFormData, 'shipping':shippingInfo}),
            })
            .then((response) =>{
                response.json()
            })
            .then((data) => {
                console.log('Success:', data);
                alert('Transaction completed');
                window.location.href = "{% url 'home' %}"
            })
        }
    </script>

问题修复方案 #

1. 解决类型不匹配导致的状态未更新
   前端传递的total是字符串类型（模板渲染输出），后端order.get_cart_total返回数值类型，直接用==比较会不相等，无法触发状态变更。修改后端代码：

# 将接收的total转为浮点型
total = float(data['form']['total'])
# 使用模型常量替代硬编码字符，提升可维护性
if total == order.get_cart_total:
    order.payment_status = Order.PAYMENT_STATUS_COMPLETE
order.save()

2. 添加购物车清空逻辑
   支付完成后删除订单下的所有商品项，实现购物车清空：

if total == order.get_cart_total:
    order.payment_status = Order.PAYMENT_STATUS_COMPLETE
    # 删除当前订单的所有商品条目
    order.orderitem_set.all().delete()
order.save()

3. 修复前端Fetch响应处理漏洞
   第一个then块未返回response.json()，导致后续无法获取响应数据，修改JS代码：

.then((response) =>{
    return response.json()
})

内容的提问来源于stack exchange，提问作者David Henson