未处理的拒绝 (TypeError)：无法读取未定义 Stripe Javascript 的属性“id”答案

【问题标题】：Unhandled Rejection (TypeError): Cannot read property 'id' of undefined Stripe Javascript未处理的拒绝 (TypeError)：无法读取未定义 Stripe Javascript 的属性“id”
【发布时间】：2019-01-24 02:48:19
【问题描述】：

我一直在尝试将条带添加到我目前正在尝试获得 MVP 的应用程序中。每当我输入测试信用卡并单击发送时，我都会被发送到带有以下错误代码的屏幕。

错误代码

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});

服务器.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>

我不是最好的，到目前为止还没有找到任何可以帮助我的东西。请和谢谢你

【问题讨论】：

标签： javascript token stripe-payments

【解决方案1】：

localhost:3001/charge 没有找到，因为确实没有这样的东西。相反，您应该修改代码以将请求发送到后端。例如：

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

之后，您应该会看到潜在的错误。

【讨论】：

【解决方案2】：

使用：显示错误：

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

另外，在我的例子中，我输入了一个澳大利亚邮政编码（只有 4 位数字），其中 stripe 实际上期待不同的格式，为了避免这种情况，我使用了这个属性：

 <CardElement hidePostalCode={true} />

希望对你有帮助

【讨论】：

【解决方案3】：

createToken 可以返回错误，但它不会拒绝承诺（一些讨论here），而是返回的令牌将为空。有必要像这样处理错误：

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

如果您这样做，您应该会看到潜在的错误是什么。

【讨论】：

它有一个 POST localhost:3001/charge 404 (Not Found) 错误，我已经尝试查找这个，没有任何想法？

【解决方案4】：

从您的代码看来，this.props.stripe.createToken 在解构响应时不会返回具有属性token 的对象。现在它的值是undefine。您对this.props.stripe.createToken 的回复应该是这样才能使用此代码；

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

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

您可能需要检查createToken 函数为什么它没有返回正确的响应。

【讨论】：