UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'amount' of undefined

by

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] (Use node --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.

1 thought on “UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'amount' of undefined”

  1. Destructuring is what resolved the error here at the end of the day and also passing in amount to the arrow function inside of handleToken:

    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, amount, description) =>
            this.props.handleToken(
              token,
              this.props.amount,
              this.props.description
            )
          }
          stripeKey={process.env.REACT_APP_STRIPE_KEY}
        />
      </div>
    );
  }
}

export default connect(null, actions)(SunnySampler);

    And here is the destructuring part in my billingsRoute.js:

    const keys = require("../config/keys");
const stripe = require("stripe")(keys.stripeSecretKey);

module.exports = (app) => {
  app.post("/api/stripe", async (req, res) => {
    const { amount, token, description } = req.body;
    console.log(req.body.description);
    // const description = req.body.data.description;
    const charge = await stripe.charges.create({
      amount: amount,
      currency: "usd",
      description: description,
      source: token.id,
    });

    console.log(charge);
  });
};
    Reply

Leave a Comment