reactjs - stripe.confirmPayment() 的无效值 : elements should have a mounted Payment Element

Question

我正在尝试使用 React“元素”集成 Stripe 支付页面。我正在按照 https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#web-submit-payment 中的教程进行操作我已经到了第 5 步，“将付款提交给 Stripe”。我的代码看起来与示例没有太大区别，但每当我尝试提交付款时，都会出现此错误:

Invalid value for stripe.confirmPayment(): elements should have a mounted Payment Element.

从 stripe.confirmPayment 抛出.我已经包含了 <Elements/>和 <PaymentElement/>在页面上，并传递了 useElements() 的返回值所以我真的不确定我错过了什么。

---

这是我的结帐表格:

function StripeCheckoutForm({paymentIntent,booking}: StripeCheckoutFormProps) {
    const stripe = useStripe();
    const elements = useElements();
    const [confirming,setConfirming] = useState(false)

    const handleSubmit = async (ev: FormEvent<HTMLFormElement>) => {
        ev.preventDefault();

        if (!stripe || !elements) {
            notifyWarning("Still loading. Please wait a few seconds and then try again.");
            return;
        }

        setConfirming(true)
        try {
            const {error} = await stripe.confirmPayment({
                //`Elements` instance that was used to create the Payment Element
                elements,
                confirmParams: {
                    return_url: resolveRoute('customerPaymentReceived',{key:booking.key}),
                },
            })
            if(error) {
                notifyError(error.message)
                setConfirming(false)
            }
        } catch(error) {
            setConfirming(false)
            if(error?.message) {
                notifyError(error.message)  // <-- error shown here
            } else {
                notifyError("Something went wrong");
            }
        }
    }

    return (
        <form onSubmit={handleSubmit}>
            <PaymentElement/>
            <BlockSpacer height="1rem"/>
            <ActionButton disabled={!stripe || !elements || confirming} type="submit" className="btn-phone btn-fullwidth">Pay {paymentIntent.amountFormatted}</ActionButton>
        </form>
    )
}

并且该表单位于此组件内部，类似于步骤 4 中显示的示例:

import {Elements as StripeElements} from '@stripe/react-stripe-js';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

function StripePaymentForm({stripeAccountId,paymentIntent,booking}: StripePaymentFormProps) {
    const options = {
        clientSecret: paymentIntent.clientSecret,
        loader: 'always',
    }
    return (
        <StripeElements stripe={getStripeConnect(stripeAccountId)} options={options}>
            <StripeCheckoutForm paymentIntent={paymentIntent} booking={booking}/>
        </StripeElements>
    )
}

我能看到的唯一不同之处在于我使用的是 Connect 帐户，因此我在加载 Stripe 时传入了帐户 ID。 getStripeConnect基本上是

loadStripe(STRIPE_PUBLIC_KEY, {stripeAccount: CONNECTED_ACCOUNT_ID})

---

如果有帮助，您可以在此处查看 React 组件树:

我错过了什么？

---

我猜这源于 useElements()没有找到任何元素:

但我还是不知道为什么。

Answer 1

我相信这是 react-stripe-js 最近的一个错误:

https://github.com/stripe/react-stripe-js/issues/296