点击按钮跳转到下一题js

Posted 2023-04-14

参考技术A 1、首先给按钮元素添加“onclick等于"location.href等于\'url\'"”语句进行跳转。
2、其次首先给按钮元素绑定点击事件。
3、最后指定触发点击事件时，会执行的函数。

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

【中文标题】MERN应用支付成功后如何跳转到下一页？

【英文标题】：How to route to next page after successful payment in MERN app?

【发布时间】：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="[phone]";
            var email="[e-mail]";
            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) 
            
        
    

【参考方案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