Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialJack Morris
Full Stack JavaScript Techdegree Graduate 24,146 PointsRedirect using React
import React from 'react'; import StripeCheckout from 'react-stripe-checkout'; import { connect } from 'react-redux'; import * as actions from '../actions'; import Logo from '../images/celtic-logo.png';
import axios from 'axios'; import { Redirect } from 'react-router-dom';
import PAYMENT_SERVER_URL from '../constants/server';
const CURRENCY = 'EUR';
const successPayment = data => {
alert('Payment Successful');
console.log(data);
if(data === data){
console.log('Working');
return <Redirect TO ='/confirmation'/>
}
};
const errorPayment = data => { alert('Payment Error');
} ;
const onToken = () => token => axios.post(PAYMENT_SERVER_URL,{ description: 'Boyle Celtic Registration', amount: 6000, source: token.id, currency: CURRENCY
})
.then(successPayment)
.catch(errorPayment);
const Payments = ({description}) => <StripeCheckout name="Boyle Celtic Registration 20/21" amount={6000} currency= 'EUR' token={onToken(description)} image={Logo} stripeKey={process.env.REACT_APP_STRIPE_KEY}
>
<button className="green btn-flat right white-text" >
Pay Now
</button>
</StripeCheckout>
export default connect(null,actions)(Payments);
I am trying to Redirect the user when the successful payment goes through but nothing happens on screen. My alert message appears and in the console I get the message Working and the data object as well.
In my App.js file I have the Route set up for the confirmation page and it can be accessed when I type it into the browser, just having trouble trying to redirect .
Any suggestions
2 Answers
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 PointsHello Jack Morris,
If the string “Working” is being logged to the console, then your issue would appear to be that you have “TO” capitalized. The prop in the react-router-dom documentation is to.
Here’s a link to the docs: https://reactrouter.com/web/api/Redirect
Try making that change, and if that doesn’t work reach back out.
Jack Morris
Full Stack JavaScript Techdegree Graduate 24,146 PointsI solved it ! I used windows.location.replace('/confirmation);
Jack Morris
Full Stack JavaScript Techdegree Graduate 24,146 PointsJack Morris
Full Stack JavaScript Techdegree Graduate 24,146 PointsHi Brandon yeah I will give that a go and see if it will work . Cheers
Jack Morris
Full Stack JavaScript Techdegree Graduate 24,146 PointsJack Morris
Full Stack JavaScript Techdegree Graduate 24,146 Pointsno unfortunately it made no difference . When I check the developer tools after the payment process , it still logs out the data object and the console.log('Working'). But doesnt move onto the confirmation page
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 PointsBrandon White
Full Stack JavaScript Techdegree Graduate 35,771 PointsAre you able to provide a link to your repo (if you have one)?
Jack Morris
Full Stack JavaScript Techdegree Graduate 24,146 PointsJack Morris
Full Stack JavaScript Techdegree Graduate 24,146 PointsI uploaded mine to heroku but you maybe able to download the repo by using the command heroku git:clone -a polar-island-96823