NextJS應用程式中的Stripe Elements未顯示

Question

我正在開發一個基於nextJS的應用，並且整合了stripe的web元素（卡片），但是這些元素沒有顯示出來。我在檢查中看到是空的。它們在我的其他reactJS應用程式中工作正常，但是在這裡不行，即使程式碼是一樣的。我做錯了什麼？

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

卡片元素沒有顯示出來，我也嘗試了cardElement。

Answer 1

問題很可能與您透過非同步呼叫loadStripe來初始化stripePromise有關，方法是透過呼叫async function loadStripePromise()

我認為loadStripe需要同步運行，以正確初始化元素。文檔中有一個範例在這裡

const stripePromise = loadStripe(...)

...

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