Skip to content

Commit 9dbd473

Browse files
ujjavaldesai07ujjavaldesai07
committed
Added payment success and cancel page
1 parent 3e02bf2 commit 9dbd473

28 files changed

+664
-479
lines changed

‎client/src/actions/index.js

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
BAD_REQUEST_ERROR_CODE,
1212
SAVE_QUERY_STATUS,
1313
SHIPPING_ADDRESS_CONFIRMED,
14-
PAYMENT_INFO_CONFIRMED,
14+
PAYMENT_INFO_CONFIRMED, PAYMENT_RESPONSE,
1515
} from './types';
1616
import history from "../history";
1717
import {Base64} from 'js-base64';
@@ -117,17 +117,22 @@ export const sendPaymentToken = (token) => async dispatch => {
117117
axios(config)
118118
.then(function (response) {
119119
console.log(JSON.stringify(response.data));
120+
dispatch({
121+
type: PAYMENT_RESPONSE,
122+
payload: JSON.stringify(response.data)
123+
})
124+
125+
if(response.data.paymentFailed) {
126+
history.push('/checkout/cancel-payment')
127+
} else {
128+
history.push(`/checkout/success-payment/${response.data.charge_id}`)
129+
}
130+
120131
})
121132
.catch(function (error) {
133+
history.push('/checkout/cancel-payment')
122134
console.log(error);
123135
});
124-
125-
// const response = await paymentServiceAPI.get("/payment", config).catch(err => {
126-
// log.info(`[ACTION]: unable to fetch response for API = ${err}`)
127-
// // dispatch({type: type, payload: {isLoading: false, statusCode: INTERNAL_SERVER_ERROR_CODE}});
128-
// // responseError = true
129-
// });
130-
// log.info(`response = ${JSON.stringify(response)}`)
131136
}
132137

133138

‎client/src/actions/types.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export const SAVE_SORT_LIST = "SAVE_SORT_LIST";
2727
export const SHIPPING_ADDRESS_CONFIRMED = "SHIPPING_ADDRESS_CONFIRMED";
2828
export const SHIPPING_OPTION_CONFIRMED = "SHIPPING_OPTION_CONFIRMED";
2929
export const PAYMENT_INFO_CONFIRMED = "PAYMENT_INFO_CONFIRMED";
30+
export const PAYMENT_RESPONSE = "PAYMENT_RESPONSE";
31+
3032

3133
// js cookie IDs
3234
export const HANDLE_TOKEN_ID = "HANDLE_TOKEN_ID";

‎client/src/api/service_api.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import axios from 'axios';
22

33
export const paymentServiceAPI = axios.create({
4-
baseURL: 'http://localhost:6000'
4+
baseURL: 'http://localhost:9050'
55
})
66

77
export const authServiceAPI = axios.create({

‎client/src/components/app.js

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import history from "../history";
3-
import {Router, Route} from 'react-router-dom';
3+
import {Router, Route, Switch} from 'react-router-dom';
44
import log from "loglevel"
55
import NavBar from "./routes/navbar/navBar";
66
import {TabPanelList} from "./routes/navbar/tabPanelList";
@@ -11,22 +11,30 @@ import Product from "./routes/product/product";
1111
import ProductDetail from "./routes/detail/productDetails";
1212
import Checkout from "./routes/checkout/checkout";
1313
import ShoppingBag from "./routes/shoppingBag";
14+
import {SuccessPayment} from "./routes/successPayment";
15+
import {CancelPayment} from "./routes/cancelPayment";
16+
import {BadRequest} from "./ui/error/badRequest";
1417

1518
const App = () => {
1619
log.info(`[App]: Rendering App Component window`)
1720

1821
return (
1922
<Router history={history}>
20-
<Route path="/" component={NavBar}/>
21-
<Route path="/" component={TabPanelList}/>
22-
<Route path="/" exact component={Home}/>
23-
<Route path="/login" exact component={Login}/>
24-
<Route path="/signup" exact component={SignUp}/>
25-
<Route path="/shopping-bag" exact component={ShoppingBag}/>
26-
<Route path="/checkout" exact component={Checkout}/>
27-
<Route path="/products/details/:shopping-bag" exact component={ShoppingBag}/>
28-
<Route path="/products/:details" exact component={ProductDetail}/>
29-
<Route path="/products" exact component={Product}/>
23+
<NavBar/>
24+
<TabPanelList/>
25+
<Switch>
26+
<Route path="/" exact component={Home}/>
27+
<Route path="/login" exact component={Login}/>
28+
<Route path="/signup" exact component={SignUp}/>
29+
<Route path="/shopping-bag" exact component={ShoppingBag}/>
30+
<Route path="/checkout" exact component={Checkout}/>
31+
<Route path="/products/details/shopping-bag" exact component={ShoppingBag}/>
32+
<Route path="/products/:details" exact component={ProductDetail}/>
33+
<Route path="/products" exact component={Product}/>
34+
<Route path="/checkout/success-payment/:id" exact component={SuccessPayment}/>
35+
<Route path="/checkout/cancel-payment" exact component={CancelPayment}/>
36+
<Route path="*" exact component={BadRequest}/>
37+
</Switch>
3038
</Router>
3139
)
3240
}

‎client/src/components/routes/cancelPayment.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react'
2+
import log from 'loglevel'
3+
import {Grid} from "@material-ui/core";
4+
5+
export const CancelPayment = () => {
6+
7+
log.info('[CancelPayment] Rendering SuccessPayment Component')
8+
return (
9+
<Grid item xs={8} container style={{padding: "2rem", margin: "2rem", border: "1px solid black",
10+
fontSize: "1.2rem"}}>
11+
<Grid item xs={12}
12+
style={{border: "1px solid red", padding: "2rem", fontSize: "2rem", fontWeight: "bold"}}>
13+
Payment Cancelled. Sorry your payment is declined.
14+
</Grid>
15+
<Grid item xs={12} style={{marginTop: "2rem", fontWeight: "bold"}}>
16+
Try again later or use different payment method.
17+
</Grid>
18+
19+
<Grid item xs={12} style={{marginTop: "2rem", fontWeight: "bold"}}>
20+
Go back to Checkout.
21+
</Grid>
22+
23+
</Grid>
24+
)
25+
}

‎client/src/components/routes/checkout/checkout.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const useGridStyles = makeStyles((theme) => ({
7171
const shippingAddressPanel = 'shipAddrPanel'
7272
const shippingOptionPanel = 'shipOptPanel'
7373
const paymentPanel = "paymentPanel"
74-
const stripePromise = loadStripe("pk_test_51H805OJVXUotWOgTatoPJeLPXI2ZehJ0s4QSQK0WjEJKx1PNH3mJxeUkAQOSjRpusTVcxyh5bDuulBildNrp3MWn005xEkAdJ4")
74+
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISH_KEY)
7575

7676
function Checkout() {
7777
const shippingAddress = useSelector(state => state.shippingAddressReducer)
@@ -152,9 +152,9 @@ function Checkout() {
152152
style={{height: "fit-content", marginTop: "1rem", position: "sticky", top: 80}}>
153153
<Paper square style={{width: "inherit"}}>
154154
<PriceDetails buttonName="PLACE ORDER"
155-
disabled={!shippingOption.submitted}
155+
156156
/>
157-
<PaymentButton/>
157+
<PaymentButton disabled={!shippingOption.submitted}/>
158158
</Paper>
159159
</Grid>
160160
</Hidden>

‎client/src/components/routes/checkout/formTextField.js

Lines changed: 0 additions & 65 deletions
This file was deleted.

0 commit comments

Comments
 (0)