我正在尝试使用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()
找不到任何元素:
的
但我还是不知道为什么。
4条答案
按热度按时间1l5u6lss1#
我相信这是react-stripe-js中最近的一个bug:
https://github.com/stripe/react-stripe-js/issues/296
gajydyqb2#
在我的例子中,问题是在stripe请求
stripe.confirmPayment
期间,必须在页面上呈现具有Elements
组件的组件。例如,如果您从DOM中删除此组件以在请求期间显示加载动画,则将抛出错误。
zengzsys3#
我相信你的
loadStripe()
promise在传递给Elements提供者的时候没有被解决,因此useElements返回null。要么早点加载它,要么等待它,它应该会解决你的问题。nvbavucw4#
嗨@mapen我也面临着同样的问题,所以问题是与返回网址我认为
字符串
您的返回网址是不给正确的时间量条纹confirmpayment发送卡的详细信息到条纹服务器,所以你得到的错误,我猜所以尝试硬编码的网址(例如:“https://stackoverflow.com/questions“(给予确切的路径,它应该返回成功付款后)),看看它是否适合你或不.