未处理的拒绝（TypeError）：无法读取未定义的 Stripe Javascript 的属性“id”

Question

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.

Error 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"},
> 17 |         body: token.id
  18 |       });
  19 | 
  20 |       if (response.ok) this.setState({complete: true});

Server.js

 const app = require("express")();
 const stripe = require("stripe")("STRIPE_SECRET_KEY");
 app.use(require("body-parser").text());
 app.post("/charge", async (req, res) => {
    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, () => console.log("Listening on port 9000"));

CheckoutForm.js

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 <h1>Purchase Complete</h1>;

return (
  <div className="checkout">
     <p>Would you like to complete the purchase?</p>
     <CardElement />
     <button onClick={this.submit}>Send</button>
 </div>
   );
 }
}

export default injectStripe(CheckoutForm);

App.js

import {Elements, StripeProvider} from 'react-stripe-elements';
import CheckoutForm from './components/CheckoutForm';

  <StripeProvider apiKey="STRIPE_PUBLISHABLE_KEY">
    <div className="example">
      <h1>React Stripe Elements Example</h1>
      <Elements>
        <CheckoutForm />
      </Elements>
    </div>
  </StripeProvider>

I am not the best and haven't been able to find anything to help me so far. Please and Thank you

Answer 1

createToken can return an error, but it doesn't reject the promise(some discussion here ), instead the returned token will be null. It's necessary to handle the error like this :

this.props.stripe.createToken({name : 'Name').then(({token, error}) => {
  if (error) {
    // handle error
  } else {
    // handle token
  }
});

If you do this, you should see what the underlying error is.

Answer 2

From you code it seems that this.props.stripe.createToken does not return an object with property token as you are destructuring the response. Its value is undefine right now. Your response for this.props.stripe.createToken should be like this to work this code ;

let response = await this.props.stripe.createToken({name: "Name"});

 response = {
  token: {
   id: 'some id'
  },
  //other properties.
 }

You may need to check createToken function why its not returning right response.

Answer 3

Display the error using :

this.props.stripe.createToken({name : 'Name'}).then(({token, error}) => {
  if (error) {
    console.log(error);
  } else {
    // handle token
  }
});

Also, in my case, I was putting an australian post code (only 4 digits), where stripe is actually expecting a different format, In order to avoid this, I used this property :

 <CardElement hidePostalCode={true} />

I hope this helps

Answer 4

localhost:3001/charge is not found because there is indeed no such thing. Instead you should modify the code to send request to backend. For example:

let response = await fetch("http://localhost:8081/charge", {
      method: "POST",
      headers: {"Content-Type": "text/plain"},
      body: token.id
    });

After that you should see the underlying error.