我正在尝试使用React“Elements”集成一个Stripe支付页面。我正在遵循https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#web-submit-payment的教程，我已经到了第5步，“向Stripe提交付款”。我的代码看起来与示例没有太大不同，但每当我尝试提交付款时，就会出现以下错误：
stripe.confirmPayment（）的值无效：元素应具有装载的付款元素。
从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()找不到任何元素：

的
但我还是不知道为什么。