Django与DRF集成Razorpay支付网关如何用Django Templates替代ReactJS做前端

原有教程中Razorpay的核心配置、订单创建、签名验证逻辑都可以直接复用，只需要调整后端的返回逻辑和前端实现方式即可，具体步骤如下：

1. 后端部分调整（可简化原有DRF逻辑） #

• 保留原教程中Razorpay密钥配置项到Django的settings.py中，不需要额外编写DRF序列化器和API视图，直接替换为普通Django视图即可：
  首先编写支付页面渲染视图，在视图中提前生成Razorpay订单，把所需参数直接传入模板上下文，示例代码如下：

# views.py
import razorpay
import hmac
import hashlib
from django.conf import settings
from django.shortcuts import render
from django.http import HttpResponseBadRequest, HttpResponse
from django.views.decorators.csrf import csrf_exempt

def payment_page(request):
    # 初始化Razorpay客户端
    client = razorpay.Client(auth=(settings.RAZORPAY_KEY_ID, settings.RAZORPAY_KEY_SECRET))
    # 创建支付订单，金额单位为分，可按业务需求调整
    order_data = {
        'amount': 100 * 100, # 示例金额为100元
        'currency': 'INR',
        'payment_capture': 1
    }
    order = client.order.create(data=order_data)
    # 把支付所需参数传入模板
    context = {
        'razorpay_key_id': settings.RAZORPAY_KEY_ID,
        'order_id': order['id'],
        'amount': order['amount'],
        'currency': order['currency']
    }
    return render(request, 'payment.html', context)

• 再编写支付回调验证视图，逻辑和原教程一致，直接处理Razorpay返回的POST数据即可：

@csrf_exempt
def payment_callback(request):
    if request.method == 'POST':
        data = request.POST
        # 验证签名合法性
        signature = hmac.new(
            settings.RAZORPAY_KEY_SECRET.encode(),
            f"{data['razorpay_order_id']}|{data['razorpay_payment_id']}".encode(),
            hashlib.sha256
        ).hexdigest()
        if signature == data['razorpay_signature']:
            # 签名验证通过，此处编写业务逻辑，比如更新订单状态、跳转成功页
            return HttpResponse("支付成功")
        else:
            return HttpResponseBadRequest("签名验证失败，支付无效")

• 配置对应URL路由：

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('payment/', views.payment_page, name='payment_page'),
    path('payment/callback/', views.payment_callback, name='payment_callback'),
]

如果不想改动原有DRF后端的接口逻辑，也可以在Django模板中用fetch请求原有的创建订单接口，拿到参数后再初始化Razorpay实例，逻辑和React中的请求逻辑一致，只是把组件内的状态替换为模板变量或普通JS变量即可。

2. 前端Django模板实现 #

新建payment.html模板文件，直接引入Razorpay官方SDK，用模板变量填充参数即可，不需要React相关的组件逻辑：

<!-- templates/payment.html -->
<!DOCTYPE html>
<html>
<head>
    <title>订单支付</title>
</head>
<body>
    <button id="pay-btn">立即支付</button>

    <!-- 引入Razorpay官方SDK -->
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>
        var options = {
            "key": "{{ razorpay_key_id }}", // 后端传入的公钥ID
            "amount": "{{ amount }}", 
            "currency": "{{ currency }}",
            "name": "你的商户名称",
            "description": "商品订单支付",
            "order_id": "{{ order_id }}", // 后端生成的Razorpay订单ID
            "handler": function (response){
                // 支付成功后提交数据到回调接口验证
                var form = document.createElement('form');
                form.method = 'POST';
                form.action = "{% url 'payment_callback' %}";
                // 加入CSRF Token
                var csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = 'csrfmiddlewaretoken';
                csrfInput.value = '{{ csrf_token }}';
                form.appendChild(csrfInput);
                // 加入Razorpay返回的验证参数
                for (const key in response) {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = key;
                    input.value = response[key];
                    form.appendChild(input);
                }
                document.body.appendChild(form);
                form.submit();
            },
            "prefill": {
                "name": "用户姓名",
                "email": "用户邮箱",
                "contact": "用户手机号"
            }
        };
        var rzp1 = new Razorpay(options);
        document.getElementById('pay-btn').onclick = function(e){
            rzp1.open();
            e.preventDefault();
        }
    </script>
</body>
</html>

3. 测试验证 #

配置好Razorpay测试密钥到settings.py后，访问/payment/路径点击支付按钮即可走通完整支付流程，验证通过后按业务需求调整订单逻辑和页面跳转规则即可。

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