Question

我一直在尝试将条纹添加到我现在想获得其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});

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>

我不是最好的，到目前为止还找不到任何可以帮助我的东西。拜托了，谢谢

Answer 1

createToken可以返回错误，但是它不会拒绝promise（有些讨论here），相反，返回的token将为null。必须像这样处理错误：

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

如果执行此操作，则应查看潜在的错误是什么。

Answer 2

从您的代码看来，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函数为什么它没有返回正确的响应。

Answer 3

使用：

显示错误

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

另外，就我而言，我输入的是澳大利亚邮政编码（仅4位数字），而条纹实际上期望使用不同的格式，为了避免这种情况，我使用了以下属性：

 <CardElement hidePostalCode={true} />

我希望这对您有帮助

Answer 4

找不到

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

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

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

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

4 个答案: