Stripe-Elemente in der NextJS-App werden nicht angezeigt

Question

Ich entwickle eine Anwendung, die auf nextJS und integrierten Webelementen (Karten) von Stripe basiert, aber diese Elemente werden nicht angezeigt. Bei der Inspektion sah ich, dass es leer war. Sie funktionieren in meinen anderen ReactJS-Apps einwandfrei, hier jedoch nicht, obwohl der Code derselbe ist. Was habe ich falsch gemacht?

import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

async function loadStripePromise(){
    const stripePromise = await loadStripe('PUBLISHABLE_KEY');
    return stripePromise;
}

const AddStripeCreditCard: React.FC<AddStripeCreditCardProps> = ({
  show,
  close,
}) => {
  return (
    <CustomModal show={show} close={close} >
      <Elements stripe={loadStripePromise()}>
        <CardDetailsForm />
      </Elements>
    </CustomModal>
  );
};

import { useElements, useStripe } from '@stripe/react-stripe-js';
import {
    CardNumberElement,
    CardCvcElement,
    CardExpiryElement,
    CardElement
  } from "@stripe/react-stripe-js";
  
const CardDetailsForm = () => {
  
  return (
    <form onSubmit={handleSubmit}>
        
      <label>
        卡号
        <CardNumberElement
          options={options}
          id='cardNumber'
        />
      </label>
      <label>
        有效期
        <CardExpiryElement
          options={options}
        />
      </label>
      <label>
        CVC
        <CardCvcElement
          options={options}
        />
      </label>
      <button type="submit" disabled={!stripe}>
        支付
      </button>
    </form>
  );
};

Das Kartenelement wird nicht angezeigt, ich habe auch cardElement ausprobiert.

Answer 1

问题很可能与您通过异步调用loadStripe来初始化stripePromise有关，方法是通过调用async function loadStripePromise()

我认为loadStripe需要同步运行，以正确初始化元素。文档中有一个示例在这里

const stripePromise = loadStripe(...)

...

return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );