Stripe 付款表单不断重新加载@stripe/react-stripe-js PreventDefault 不起作用？

Question

我遵循了这个示例https://stripe.com/docs/ payments/link/add-link-elements-integration

我看到了您输入信用卡信息的表格。 单击表单内部和外部，它会不断重新呈现，页面刷新。 我认为 PreventDefault 表单不起作用。 此问题出现在 chrome、chrome incognito 和 safari 中。

知道为什么页面不断刷新吗？

// PayScreen.tsx
const stripePromise = loadStripe(config.stripePublishableKey)
export default function CreatePaymentScreen() {
  // this code is updated from the comments below. still same problem.

  const { data, isLoading } = useQuery({
    queryFn: async () => await createPaymentIntent(), 
    // stripe_client().PaymentIntent.create backend function
  })
  const clientSecret = data?.intent?.client_secret
  const email = data?.customer?.email

  if (isLoading || !stripe)
   return null
  return (
    <Elements stripe={stripePromise} options={{ clientSecret }}>
        <CheckoutForm email={email} />
    </Elements>
  )
}

// CheckoutForm.tsx literal verbatim from https://stripe.com/docs/stripe-js/react#elements-provider
import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js'

const CheckoutForm = () => {
  const stripe = useStripe()
  const elements = useElements()

  const handleSubmit = async (event: any) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault()

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return
    }

    const result = await stripe.confirmPayment({
      // `Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    })

    if (result.error) {
      // Show error to your customer (for example, payment details incomplete)
      console.log(result.error.message)
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  }

  return (
    <div>
      <PaymentElement />
      <button onSubmit={handleSubmit} disabled={!stripe}>Submit</button>
    </div>
  )
}

export default CheckoutForm

// package.json
    "@stripe/react-stripe-js": "^2.4.0",
    "@stripe/stripe-js": "^2.4.0",

我的问题与 Stripe 付款表单使用 @stripe/react-stripe-js 不断重新渲染

Answer 1

您应该直接将

stripePromise

传递给

<Elements>

。无需使用

useEffect

和

useState

挂钩来设置

Stripe

的实例。有关更多详细信息，请参阅集成doc。