Redirect React Component when submit form express - node.js

Question

I'm trying to redirect to a React Component when submit the form with express. This is my code:
Express.js
app.use(bodyParser.urlencoded({extended: true}))
app.use(express.static(publicPath));
app.get('*', (req, res) => {
res.sendFile(path.join(publicPath, 'index.html'))
})
app.post('/charge', (req, res) => {
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)
stripe.charges.create({
amount: req.body.totalAmount * 100,
currency: 'eur',
source: req.body.stripeToken,
description: "Example charge",
receipt_email: req.body.receiptEmail
}).then((charge) => {
console.log(req.body)
}).catch((err) => {
console.log(err)
})
CheckoutForm.js
handleSubmit = (e) => {
e.preventDefault()
this.props.stripe.createToken({ name: this.state.name }).then(({ token }) => {
console.log(token)
this.stripeTokenHandler(token)
})
}
stripeTokenHandler = (token) => {
const form = document.getElementById('form')
const hiddenInput = document.createElement('input')
hiddenInput.setAttribute('type', 'hidden')
hiddenInput.setAttribute('name', 'stripeToken')
hiddenInput.setAttribute('value', token.id)
form.appendChild(hiddenInput)
form.submit()
}
render() {
return (
<div className="payment-container">
<form id="form" className="checkout-form" onSubmit={this.onSubmit}>
<label>
Card Number
<CardNumberElement
onChange={this.onChange}
style={{ base: { color: 'white' } }}
/>
</label>
<label>
Titular Name
<input
type="text"
value={this.state.name}
onChange={this.handleText}
className="input-text"
placeholder="Full Name"
/>
</label>
<label>
Expiration Date
<CardExpiryElement style={{base: {color: 'white'}}} />
</label>
<label>
CVC
<CardCVCElement style={{base: {color: 'white'}}} />
</label>
<label>
Email
<input
type="text"
value={this.state.email}
onChange={this.handleEmail}
className="input-text"
name="receiptEmail"
placeholder="Email"
/>
</label>
<button className="btn-buy">Pay now</button>
</form>
</div>
)}
}
The form submitted correctly and register the payment. When I submitted now gets the request body. What's the way to redirect a component with the request form?

Answer 1

If what you're looking for is your component to redirect once you hit the "Pay Now" button then I suggest you change your <button> to a <Link> component using React Router.
It would look like this
<Link to='/charge' className='btn-buy' onClick={this.formSubmit}>Pay Now</Link>
Then just remove the this.formSubmit from the form itself since its now on the button. It will redirect and submit.
If you want to WAIT to redirect after you get a reply, then in your formSubmit function, after you get a reply back from the server you can use this.props.history.push('/charge') in then then portion of your form submitter.
Keep in mind you will need to import { Link } from 'react-router-dom' for this.
Hope it helps!

Answer 2

Another way you could handle this is by using a Redirect component from React Router. Something like this:
// in the route, if the post was successful
res.json({data: 'whatever data you want', success: true})
// and if it was unsuccessful
res.json({success: false})
And here's a really stripped down react component to go with it:
class FormComponent extends Component {
constructor() {
super();
this.state = {
// inputs or whatever
success: true,
}
this.handleFormSubmit = this.handleFormSubmit.bind(this)
}
handleFormSubmit(e) {
e.preventDefault();
fetch('send the data', { with: 'some options' })
.then(res => res.json())
.then(jsonRes => {
const { success } = jsonRes;
this.setState({ success });
})
.catch(err => console.log(err))
}
// assorted other stuff to handle inputs or whatever
render() {
return (
<div>
<form onSubmit={this.handleFormSubmit}>
{/* inputs or whatever */}
</form>
{this.state.success && <Redirect push to='/some-other-url' />}
</div>
)
}
}
If this.state.success evaluates to true, the redirect will render; otherwise, it won't at all.
This allows you to make sure the request was successful before redirecting to another page. It also lets you give the user an error message, do something with whatever the response is, etc etc. Maybe you'd need to move the state and so on further up your component tree so more components have access to the response data, if that's something they need.