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

您需要检查是否有任何 error。 .confirmPayment() 返回一个 promise，当它解决时返回一个 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 文档中，它说返回的结果对象是要么支付意图< /strong> 或错误。

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

{ "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 正文开头的行后添加 console.log(paymentIntent) 并检查它的格式。如果它在paymentIntent 中包含amount 属性，那么在提取amount 属性之前添加支票，因为它可能需要一些时间来加载它。所以，

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

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

3 个答案: