Les éléments Stripe dans l'application NextJS ne s'affichent pas

Question

Je développe une application basée sur nextJS et les éléments web (cartes) intégrés de Stripe, mais ces éléments ne sont pas affichés. J'ai vu en inspection qu'il était vide. Ils fonctionnent bien dans mes autres applications ReactJS, mais pas ici, même si le code est le même. Qu'ai-je fait de mal?

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

L'élément card n'apparaît pas, j'ai aussi essayé cardElement.

Answer 1

Le problème vient probablement de votre appel via asynchroneloadStripe来初始化stripePromise有关，方法是通过调用async function loadStripePromise()

Je pense que loadStripe doit être exécuté de manière synchrone pour initialiser correctement les éléments. Il y a un exemple dans la documentation ici

const stripePromise = loadStripe(...)

...

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