未處理的拒絕（TypeError）：無法讀取未定義的 Stripe Javascript 的屬性“id”

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

服務器.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"));

結帳表格.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);

應用程序.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 可以返回錯誤，但它不會拒絕承諾（ 這里有一些討論），而是返回的令牌將為空。 有必要像這樣處理錯誤：

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 位數字），其中 stripe 實際上期望使用不同的格式，為了避免這種情況，我使用了以下屬性：

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

之后，您應該會看到潛在的錯誤。