Elemen Jalur dalam apl NextJS tidak dipaparkan

Question

Saya sedang membangunkan aplikasi berdasarkan nextJS dan elemen web (kad) jalur bersepadu, tetapi elemen ini tidak dipaparkan. Saya melihat pada pemeriksaan bahawa ia kosong. Mereka berfungsi dengan baik dalam aplikasi reactJS saya yang lain, tetapi tidak di sini, walaupun kodnya sama. Apa yang saya buat salah?

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>
  );
};

Elemen kad tidak muncul, saya juga mencuba cardElement.

Answer 1

Masalahnya berkemungkinan besar dengan panggilan async andaloadStripe来初始化stripePromise有关，方法是通过调用async function loadStripePromise()

Saya rasa loadStripe perlu dijalankan serentak untuk memulakan elemen dengan betul. Terdapat contoh dalam dokumentasi di sini

const stripePromise = loadStripe(...)

...

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