Razorpay订阅仅支持银行卡支付，需添加多支付方式（如UPI）

问题描述 #

使用Razorpay支付网关创建订单（Order）时，结账界面可显示多种支付方式，但创建订阅（Subscription）时仅支持银行卡支付。需实现订阅结账界面也支持多种支付方式（主要为UPI）。

现有代码参考 #

订单支付实现 #

后端代码

const instance = new Razorpay({
    key_id: process.env.KEY,
    key_secret: process.env.SECRET_KEY,
});

app.get("/createOrder", async (req, res) => {
    try {
        var options = {
            amount: 1000, // 金额为最小货币单位（如印度卢比的派萨）
            currency: "INR",
        };
        const order = await instance.orders.create(options);
        if (!order) {
            throw new Error("订单创建失败");
        }
        res.status(200).json({
            status: true,
            msg: `订单创建成功`,
            orderID: order.id,
        });
    } catch (error) {
        console.log("Error[createOrder]: ", error);
        res.status(500).json({
            status: false,
            error: error.message,
        });
    }
});

前端代码

document.getElementById("order").addEventListener("click", async () => {
    try {
        const response = await fetch("http://localhost:4000/createOrder");
        if (!response.ok) {
            throw new Error("服务器错误 - 500");
        }
        const order = await response.json();
        console.log("订单状态: ", order);
        if (!order.status && !order.orderID) {
            return;
        }
        const options = {
            key: "rzp_test_...", // 从Razorpay控制台获取的Key ID
            amount: "1000", // 金额为最小货币单位
            currency: "INR",
            order_id: order.orderID, // 传入步骤1中获取的订单ID
            handler: function (response) {
                console.log(
                    response.razorpay_payment_id,
                    response.razorpay_order_id,
                    response.razorpay_signature
                );
            },
        };
        const rzp1 = new Razorpay(options);
        rzp1.open();
        rzp1.on("payment.failed", function (response) {
            console.log("支付失败: ", response);
        });
    } catch (error) {
        console.log("错误: ", error.message);
    }
});

订单支付方式界面截图：展示包含UPI、银行卡等在内的多种支付选项。

订阅支付现有实现 #

后端代码

const instance = new Razorpay({
    key_id: process.env.KEY,
    key_secret: process.env.SECRET_KEY,
});

app.get("/createSub", async (req, res) => {
    try {
        const options = {
            plan_id: process.env.PLAN_ID,
            total_count: 4,
        };
        const sub = await instance.subscriptions.create(options);
        console.log(sub);
        res.status(200).json({
            status: true,
            msg: `订阅创建成功`,
            subID: sub.id,
        });
    } catch (error) {
        console.log("Error[createSub]: ", error);
        res.status(500).json({
            status: false,
            error: error.message,
        });
    }
});

前端代码

document.getElementById("sub").addEventListener("click", async () => {
    try {
        const response = await fetch("http://localhost:4000/createSub");
        if (!response.ok) {
            throw new Error("服务器错误 - 500");
        }
        const sub = await response.json();
        console.log("订阅状态: ", sub);
        if (!sub.status && !sub.subID) {
            return;
        }
        const options = {
            key: "rzp_test_...",
            subscription_id: sub.subID,
            handler: function (response) {
                console.log(response);
                fetch("http://localhost:4000/checkoutHandler", {
                    method: "POST",
                    body: JSON.stringify({
                        data: [
                            response.razorpay_payment_id,
                            response.razorpay_order_id,
                        ],
                    }),
                    headers: {
                        "Content-Type": "application/json",
                        "x-razorpay-signature": `${response.razorpay_signature}`,
                    },
                });
            },
            prefill: {
                contact: "797...",
            },
        };
        const rzp1 = new Razorpay(options);
        rzp1.open();
        rzp1.on("payment.failed", function (response) {
            console.log("支付失败: ", response);
        });
    } catch (error) {
        console.log("错误: ", error.message);
    }
});

订阅支付方式界面截图：仅显示银行卡支付选项。

解决方案配置 #

1. 后端创建订阅时添加支付方式配置 #

修改后端订阅创建代码，添加自动支付捕获规则并指定允许的支付方式（可选）：

app.get("/createSub", async (req, res) => {
    try {
        const options = {
            plan_id: process.env.PLAN_ID,
            total_count: 4,
            payment_capture: 'automatic', // 自动捕获首笔支付
            payment_method: ["card", "upi"] // 指定允许的支付方式，不设置则默认加载所有可用方式
        };
        const sub = await instance.subscriptions.create(options);
        console.log(sub);
        res.status(200).json({
            status: true,
            msg: `订阅创建成功`,
            subID: sub.id,
        });
    } catch (error) {
        console.log("Error[createSub]: ", error);
        res.status(500).json({
            status: false,
            error: error.message,
        });
    }
});

2. 前端初始化时明确支付配置 #

修改前端Razorpay初始化参数，补充核心支付配置项：

document.getElementById("sub").addEventListener("click", async () => {
    try {
        const response = await fetch("http://localhost:4000/createSub");
        if (!response.ok) {
            throw new Error("服务器错误 - 500");
        }
        const sub = await response.json();
        console.log("订阅状态: ", sub);
        if (!sub.status && !sub.subID) {
            return;
        }
        const options = {
            key: "rzp_test_...",
            subscription_id: sub.subID,
            currency: "INR",
            amount: "1000", // 对应计划的金额（最小货币单位）
            allowed_payment_methods: ["card", "upi"], // 可选，限制显示的支付方式
            handler: function (response) {
                console.log(response);
                fetch("http://localhost:4000/checkoutHandler", {
                    method: "POST",
                    body: JSON.stringify({
                        data: [
                            response.razorpay_payment_id,
                            response.razorpay_order_id,
                        ],
                    }),
                    headers: {
                        "Content-Type": "application/json",
                        "x-razorpay-signature": `${response.razorpay_signature}`,
                    },
                });
            },
            prefill: {
                contact: "797...",
                email: "user@example.com" // 建议添加邮箱预填，提升结账体验
            },
        };
        const rzp1 = new Razorpay(options);
        rzp1.open();
        rzp1.on("payment.failed", function (response) {
            console.log("支付失败: ", response);
        });
    } catch (error) {
        console.log("错误: ", error.message);
    }
});

3. 商家后台配置检查 #

• 登录Razorpay商家控制台，确保已开启UPI等目标支付方式的支持
• 检查对应订阅计划（Plan）的设置，确认允许非银行卡支付方式作为首笔支付
• 注意：UPI等支付方式不支持自动扣款，若用户选择UPI支付首笔订阅费用，后续周期需用户手动完成支付，或在后端逻辑中处理后续订单的创建与提醒

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