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

Question

使用 React 制作电子商务应用。这是一个“handleSubmit”函数，每次我尝试结帐时都会返回错误。

我已导入“db”并声明“paymentIntent”。它仍然在浏览器中出现此错误。

    const handleSubmit = async (event) => {
        //do fancy stripe stuff
        event.preventDefault()
        setProcessing(true)

        // const payload = await stripe

        const payload = await stripe.confirmCardPayment(clientSecret, {
            payment_method: {
                card: elements.getElement(CardElement)
            }
        }).then(({ paymentIntent }) => {
            //paymetnIntent = payment Confirmation

           db
            .collection('users') 
            .doc(user?.uid)
            .collection('orders')
            .doc(paymentIntent?.id)
            .set({
                basket: basket,
                amount: paymentIntent.amount,
                created: paymentIntent.created,
            })

            setSucceeded(true);
            setError(null)
            setProcessing(false)
            dispatch({
                type: 'EMPTY_BASKET'
            })

            history.replace('/orders')
        })

    }```

Answer 1

您需要检查是否有任何errors。 .confirmPayment() 返回一个承诺，当它被解决时返回一个 result object。它有两个键，paymentIntent（你已经使用的那个）和error（你需要检查的那个）：

.then(({ error, paymentIntent }) => {
  // check if there is any error
  if (error || !paymentIntent) {
    // handle error, tell the user
    // ...
    // return to exit code
    return;
  }

  db.collection('users')
    .doc(user?.uid)
    .collection('orders')
    .doc(paymentIntent.id)
    .set({
      basket: basket,
      amount: paymentIntent.amount,
      created: paymentIntent.created,
    });

  setSucceeded(true);
  setError(null);
  setProcessing(false);
  dispatch({
    type: 'EMPTY_BASKET',
  });

  history.replace('/orders');
});

Answer 2

我前段时间遇到了同样的问题，我们必须注意到在confirmCardPayment 的 stipe 文档中，它说返回的结果对象是要么 付款意图 或错误。

因此，如果请求成功，您将收到响应的支付意图对象，

{
   "id": "xxx", 
   "amount": 30, 
   "created": 123213,
    ... 
}

或者如果请求失败，响应将是一个错误，

{
   "error": {
      "code": "parameter_unknown",
      "message": "Error message",
      "payment_intent": {
          "id": "xxx",
          "amount": 30,
          ...
       }
   }
}

请注意，在成功响应中，您将获得付款意图对象本身，因此响应对象中不会有paymentIntent 的属性，这就是您将其作为undefined 的原因。所以在你的代码中你必须这样做，

.then(({ id, amount, created, error }) => {
     if(error) {
        // error handling
        // dispatch error action
      } else {
        db.collection('users') 
         .doc(user?.uid)
         .collection('orders')
         .doc(id) // destructured id from paymentIntent object
         .set({
            basket: basket,
            amount, // destructured amount from paymentIntent object
            created, // destructured created from paymentIntent object
           })

         setSucceeded(true);
         setError(null)
         setProcessing(false)
         dispatch({
              type: 'EMPTY_BASKET'
         })

         history.replace('/orders')
      }
})

Answer 3

尝试在 then 正文开头的 line 之后添加 console.log(paymentIntent) 并检查它的格式。如果它在 paymentIntent 中包含 amount 属性，则在提取 amount 属性之前添加 检查，因为它可能需要一些时间来加载它。所以，

       .set({
            basket: basket,
            amount: paymentIntent?.amount, //Add check here
            created: paymentIntent?.created, //Also check here
        })