MERN应用支付成功后如何跳转到下一页？答案

【问题标题】：How to route to next page after successful payment in MERN app?MERN应用支付成功后如何跳转到下一页？
【发布时间】：2021-02-08 15:20:00
【问题描述】：

我正在使用 Paytm 支付网关进行交易。我的前端在 reactjs 中，后端在 nodejs 和 expressjs 中。我希望在付款成功后重定向下一页。

后端代码- 用于检查校验和和交易。

    PaytmChecksum.generateSignature(JSON.stringify(paytmParams.body), paytmconfig.merchantkey).then(function(checksum){
        paytmParams.head = {

            "signature" : checksum
        };
        var post_data = JSON.stringify(paytmParams);
        var options = {
            /* for Staging */
            hostname: 'securegw-stage.paytm.in',
            /* for Production */
            // hostname: 'securegw.paytm.in',
            port: 443,
            path: '/v3/order/status',
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Content-Length': post_data.length
            }
        };
        // Set up the request
        var response = "";
        var post_req = https.request(options, function(post_res) {
            post_res.on('data', function (chunk) {
                response += chunk;
            });

            post_res.on('end', function(){
                console.log('Response: ', response);
                res.write(response)
            });
        });
        // post the data
        post_req.write(post_data);
        post_req.end();
    });

前端代码：将调用 onPayment 函数进行付款

onPayment= async(e)=>{
        e.preventDefault();
        try {
            var amount="1.00";
            var mobile_number="+919999999999";
            var email="abcd@gmail.com";
            var orderId="ORDER_ID"+(new Date().getTime());
            let params={
                orderId:orderId,
                email:email,
                amount:amount,
                mobile_number:mobile_number
            }
            var url="http://localhost:4000/payment/paynow";
            var request={
                url:url,
                params:params,
                method:"get"
            }

            const response = await Axios(request);
            const processParams=await response.data;
            console.log(processParams);

            var details={
                action : "https://securegw-stage.paytm.in/order/process",
                // params : params
                params : processParams
            }

            this.post(details);

        } catch (error) {
            
        }
    }

【问题讨论】：

标签： node.js reactjs payment-gateway payment paytm

【解决方案1】：

您可以使用react-router-dom

import {useHistory} from 'react-router-dom'


const history = useHistory()


history.push('yourNextPage', {details:detail})

任何一个 history.replace 都应该可以工作：

history.replace('yourNextPage', {details:detail})

编辑

{details:detail} 是为了以防您想将上一页的状态传递给下一页

如果你不想通过任何状态

这就够了

history.push('yourNextPage')

【讨论】：

【解决方案2】：

请参考以下存储库中可用的代码以获取 node.js 中的校验和。

https://github.com/paytm/Paytm_Node_Checksum

你也可以参考下面的 React 仓库（前端）

https://github.com/paytm/paytm-blink-checkout-react

【讨论】：