I am working on wiring up the ExpressJS part of a Stripe payment system. I wanted to pass some properties dynamically, such as amount
and description
.
I have these three different components that represent the products: <SunnySampler />
, <Grasses />
, and <HalfPound />
.
In them I pass the amount
and description
props like so: <Grasses amount={1500} description="Tray" />
.
Then on my StripCheckout
component I pass the amount and description from the props given to the above components. And I also pass the amount
and description
to the handleToken
function:
import React, { Component } from "react";
import StripeCheckout from "react-stripe-checkout";
import { connect } from "react-redux";
import * as actions from "../actions";
class SunnySampler extends Component {
render() {
return (
<div>
<StripeCheckout
name='Microurb Farms'
description={this.props.description}
amount={this.props.amount}
shippingAddress
billingAddress={false}
zipCode={true}
token={(token) =>
this.props.handleToken(
token,
this.props.amount,
this.props.description
)
}
stripeKey={process.env.REACT_APP_STRIPE_KEY}
/>
</div>
);
}
}
export default connect(null, actions)(SunnySampler);
This is what my action creator looks like:
export const handleToken = (token, amount, description) => async (dispatch) => {
const res = await axios.post("/api/stripe", { token, amount, description });
dispatch({ type: FETCH_USER, payload: res.data });
};
So that was the client side, now in on the server side I have a billingRoute.js
file that looks like this:
const keys = require("../config/keys");
const stripe = require("stripe")(keys.stripeSecretKey);
module.exports = (app) => {
app.post("/api/stripe", async (req, res) => {
// const token = req.body.data.token;
const amount = req.body.data.amount;
const description = req.body.data.description;
const charge = await stripe.charges.create({
amount: amount,
currency: "usd",
description: description,
source: req.body.id,
});
console.log(charge);
});
};
Unfortunately, I am getting the following error in terminal:
(node:99567) UnhandledPromiseRejectionWarning: TypeError: Cannot read
property ‘amount’ of undefined [0] at
/Projects/NodeCRA/routes/billingRoutes.js:7:34 [0]
at Layer.handle [as handle_request]
(/Projects/NodeCRA/node_modules/express/lib/router/layer.js:95:5)
[0] at next
(/Projects/NodeCRA/node_modules/express/lib/router/route.js:137:13)
[0] at Route.dispatch
(/Projects/NodeCRA/node_modules/express/lib/router/route.js:112:3)
[0] at Layer.handle [as handle_request]
(/Projects/NodeCRA/node_modules/express/lib/router/layer.js:95:5)
[0] at
/Projects/NodeCRA/node_modules/express/lib/router/index.js:281:22
[0] at Function.process_params
(/Projects/NodeCRA/node_modules/express/lib/router/index.js:335:12)
[0] at next
(/Projects/NodeCRA/node_modules/express/lib/router/index.js:275:10)
[0] at SessionStrategy.strategy.pass
(/Projects/NodeCRA/node_modules/passport/lib/middleware/authenticate.js:343:9)
[0] at
/Projects/NodeCRA/node_modules/passport/lib/strategies/session.js:69:12
[0] at pass
(/Projects/NodeCRA/node_modules/passport/lib/authenticator.js:337:31)
[0] at deserialized
(/Projects/NodeCRA/node_modules/passport/lib/authenticator.js:349:7)
[0] at
/Projects/NodeCRA/services/passport.js:14:5 [0]
at processTicksAndRejections (internal/process/task_queues.js:97:5)
[0] (Usenode --trace-warnings ...
to show where the warning was
created)
I thought maybe token
, amount
and description
needed to be passed as properties to the data
object inside the action creator but that gives me a syntax error.
Destructuring is what resolved the error here at the end of the day and also passing in
amount
to the arrow function inside ofhandleToken
:And here is the destructuring part in my
billingsRoute.js
: