title: Unhandled Rejection (TypeError): Cannot read property 'id' of undefined Stripe Javascript
body: <p>I have been attempting to add stripe into an app I am trying to get an MVP of at the moment. Whenever I type in the test credit card and click send I get sent to a screen with the following error code.</p>
  
  <p>Error Code</p>
  
  <pre><code>Unhandled Rejection (TypeError): Cannot read property 'id' of undefined
  CheckoutForm._callee$
  src/components/CheckoutForm.js:17
    14 |       let response = await fetch("/charge", {
    15 |         method: "POST",
    16 |         headers: {"Content-Type": "text/plain"},
  &gt; 17 |         body: token.id
    18 |       });
    19 | 
    20 |       if (response.ok) this.setState({complete: true});
  </code></pre>
  
  <p>Server.js</p>
  
  <pre><code> const app = require("express")();
   const stripe = require("stripe")("STRIPE_SECRET_KEY");
   app.use(require("body-parser").text());
   app.post("/charge", async (req, res) =&gt; {
      try {
        let {status} = await stripe.charges.create({
             amount: 2000,
             currency: "usd",
             description: "An example charge",
             source: req.body
           });
  
             res.json({status});
           } catch (err) {
             res.status(500).end();
           }
         });
         app.listen(9000, () =&gt; console.log("Listening on port 9000"));
  </code></pre>
  
  <p>CheckoutForm.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import {CardElement, injectStripe} from 'react-stripe-elements';
  
  
  class CheckoutForm extends Component {
    constructor(props) {
       super(props);
       this.state = {complete: false};
       this.submit = this.submit.bind(this);
    }
  
    async submit(ev) {
      let {token} = await this.props.stripe.createToken({name: "Name"});
      let response = await fetch("/charge", {
        method: "POST",
        headers: {"Content-Type": "text/plain"},
        body: token.id
      });
  
      if (response.ok) this.setState({complete: true});
    }
  
  render() {
     if (this.state.complete) return &lt;h1&gt;Purchase Complete&lt;/h1&gt;;
  
  return (
    &lt;div className="checkout"&gt;
       &lt;p&gt;Would you like to complete the purchase?&lt;/p&gt;
       &lt;CardElement /&gt;
       &lt;button onClick={this.submit}&gt;Send&lt;/button&gt;
   &lt;/div&gt;
     );
   }
  }
  
  export default injectStripe(CheckoutForm);
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import {Elements, StripeProvider} from 'react-stripe-elements';
  import CheckoutForm from './components/CheckoutForm';
  
    &lt;StripeProvider apiKey="STRIPE_PUBLISHABLE_KEY"&gt;
      &lt;div className="example"&gt;
        &lt;h1&gt;React Stripe Elements Example&lt;/h1&gt;
        &lt;Elements&gt;
          &lt;CheckoutForm /&gt;
        &lt;/Elements&gt;
      &lt;/div&gt;
    &lt;/StripeProvider&gt;
  </code></pre>
  
  <p>I am not the best and haven't been able to find anything to help me so far.
  Please and Thank you </p>