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 trial

JavaScript

Jack Morris
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jack Morris
Full Stack JavaScript Techdegree Graduate 24,146 Points

Redirect 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

Hello 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jack Morris
Full Stack JavaScript Techdegree Graduate 24,146 Points

no 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