React+Spring Boot集成Razorpay支付验证接口参数缺失致400错误

问题原因 #

前端通过application/json格式的请求体传递orderId、paymentId、signature参数，但后端的verifyPayment方法使用@RequestParam注解接收参数。@RequestParam仅能从URL查询参数或**表单编码数据（application/x-www-form-urlencoded）**中提取参数，无法读取JSON请求体中的数据，因此导致参数缺失，返回400 Bad Request错误。

解决方案 #

修改后端接口，使用@RequestBody注解接收JSON请求体中的参数，有两种实现方式：

方式一：创建DTO类接收参数 #

1. 创建一个用于接收验证请求的DTO类：

public class PaymentVerificationRequest {
    private String orderId;
    private String paymentId;
    private String signature;

    // Getters and Setters
    public String getOrderId() {
        return orderId;
    }

    public void setOrderId(String orderId) {
        this.orderId = orderId;
    }

    public String getPaymentId() {
        return paymentId;
    }

    public void setPaymentId(String paymentId) {
        this.paymentId = paymentId;
    }

    public String getSignature() {
        return signature;
    }

    public void setSignature(String signature) {
        this.signature = signature;
    }
}

2. 修改PaymentController中的verifyPayment方法：

@PostMapping("/verify")
@ResponseBody
public boolean verifyPayment(@RequestBody PaymentVerificationRequest request) {
    try {
        String orderId = request.getOrderId();
        String paymentId = request.getPaymentId();
        String signature = request.getSignature();
        
        System.out.println("Received orderId: " + orderId);
        System.out.println("Received paymentId: " + paymentId);
        System.out.println("Received signature: " + signature);
        
        RazorpayClient razorpayClient = new RazorpayClient("rzp_test_UqBICcJOEJD4nH", "J3vxuNudUteoWa9zX7UDoEmd");
        String verificationData = orderId + "|" + paymentId;

        boolean isValidSignature = Utils.verifySignature(verificationData, signature, "J3vxuNudUteoWa9zX7UDoEmd");

        return isValidSignature;
    } catch (RazorpayException e) {
        e.printStackTrace();
        return false;
    }
}

方式二：使用Map直接接收参数（快速实现） #

如果不想创建DTO类，可以直接用Map<String, String>接收请求体：

@PostMapping("/verify")
@ResponseBody
public boolean verifyPayment(@RequestBody Map<String, String> request) {
    try {
        String orderId = request.get("orderId");
        String paymentId = request.get("paymentId");
        String signature = request.get("signature");
        
        System.out.println("Received orderId: " + orderId);
        System.out.println("Received paymentId: " + paymentId);
        System.out.println("Received signature: " + signature);
        
        RazorpayClient razorpayClient = new RazorpayClient("rzp_test_UqBICcJOEJD4nH", "J3vxuNudUteoWa9zX7UDoEmd");
        String verificationData = orderId + "|" + paymentId;

        boolean isValidSignature = Utils.verifySignature(verificationData, signature, "J3vxuNudUteoWa9zX7UDoEmd");

        return isValidSignature;
    } catch (RazorpayException e) {
        e.printStackTrace();
        return false;
    }
}

额外注意事项 #

• 开启跨域支持：去掉PaymentController上的//@CrossOrigin("*")注释，解决前后端跨域问题。
• 前端请求无需修改：当前前端的axios请求已经正确设置Content-Type: application/json，参数传递格式符合要求。

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