getting error after successful payment in PayUMoney in reactjs

Question

I have integrated the PayUMoney payment method in my react js project. It's working fine for till payment. After successful payment, it's redirecting to the success url given by me, its correct but it's giving an error.

cannot post /success

server.js file here I have put my all logic to integrate PayUMoney.

const express = require('express');
const app = express();
const port = process.env.PORT || 5001
const path = require('path');
const fs = require('fs')
const router = express.Router();
const request = require('request');

app.post('/admission', (req, res) => {
        
        var txnid = "";
        var length = 10; // 10 digits random transaction ID.
        var sample = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        for(var i = 0; i < length; i++) {
            txnid += sample.charAt(Math.floor(Math.random() * sample.length));
        }
        // console.log(txnid);

        var amount = 10;
        var productinfo = 'Myproduct';
        var firstname = 'geeta';
        var email = '[email protected]';
        var phone = '9999111111';

        var surl = 'http://localhost:5001/admissionForm';
        var furl = 'http://localhost:5001/failure';
        
        var key = 'Mykey';
        var salt = 'mysalt';
             // string hash format
        var str = key + '|' + txnid + '|' + amount + '|' + productinfo + '|' + firstname + '|' + email + '|' +
        '||||||||||' + salt;
        var hash = require('crypto').createHash('sha512').update(str).digest('hex');
        
        var service_provider = 'payu_paisa';

        var formData = {
            'key' : key,
            'txnid' : txnid,
            'amount' : amount,
            'productinfo' : productinfo,
            'firstname' : firstname,
            'email' : email,
            'phone' : phone,
            'surl' : surl,
            'furl' : furl,
            'hash' : hash,  
            'service_provider' : service_provider
        }

             var request = require('request');
        // for live key and salt - use 'https://secure.payu.in/_payment' 
        request.post('https://test.payu.in/_payment', {form: formData}, function(err, response, body) {
            var location = response.caseless.dict.location;
            res.redirect(location);
        }); 

});

app.use(express.static(path.resolve(__dirname, './build')));

app.get('*', function(request, response) {
  const filePath = path.resolve(__dirname, './build', 'index.html');
  response.sendFile(filePath);
});

app.listen(port, () => console.log(`Listening on port right now ${port}`));

this is my UI code:

> import React, { Component } from "react"; import {Container, Col, Row,
> Button, Form } from 'react-bootstrap';
> 
>  
> 
> class payment extends Component {
> 
> 
>   render() {
>     return (
>       <React.Fragment>
>                   <div className="paymentWrapper">
>                     <Form action="admission" method="post">
>                       <Container>
>                         <Row>
>                           <Col sm={6}>
>                             <Form.Group controlId="paymentWrapper.firstname">
>                               <Form.Label>First Name</Form.Label>
>                               <Form.Control type="text" placeholder="First Name" name="firstname" />
>                             </Form.Group>   
>                             <Form.Group controlId="admissionForm.phoneno">
>                               <Form.Label>Phone No</Form.Label>
>                               <Form.Control type="number" placeholder="Phone No" name='phone' />
>                             </Form.Group>
>                             <Form.Group controlId="admissionForm.phoneno">
>                               <Form.Label>Product Info</Form.Label>
>                               <Form.Control type="text" placeholder="Product Info" name='productinfo' />
>                             </Form.Group>
>                           </Col>
>                           <Col sm={6}>
>                             <Form.Group controlId="admissionForm.lastname">
>                               <Form.Label>Last Name</Form.Label>
>                               <Form.Control type="text" placeholder="Last Name" />
>                             </Form.Group>
>                             <Form.Group controlId="admissionForm.email">
>                               <Form.Label>Email</Form.Label>
>                               <Form.Control type="email" placeholder="Email" name='email' />
>                             </Form.Group>
>                             <Form.Group controlId="admissionForm.phoneno">
>                               <Form.Label>Amount</Form.Label>
>                               <Form.Control type="number" placeholder="Amount" name='amount' />
>                             </Form.Group>                            
>                              <Button variant="primary" type="submit">Submit </Button>
>                           </Col> 
>                         </Row>
>                       </Container>
>                     </Form>
>                   </div>
>       </React.Fragment>
>     );   } }   export default payment;

Answer 1

Check if it helps by using event.preventDefault(); Reference URL: Cannot post error react js