Question 223397 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – stripe elements not showing in nextJS app

I am working on nextJS app and integrating stripe web elements (card) but the elements are not showing up. I see empty in inspect. They are working fine in my other reactJS app but not here, even though the code is same. What am I doing wrong?

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>
        Card number
        <CardNumberElement
          options={options}
          id='cardNumber'
        />
      </label>
      <label>
        Expiration date
        <CardExpiryElement
          options={options}
        />
      </label>
      <label>
        CVC
        <CardCvcElement
          options={options}
        />
      </label>
      <button type="submit" disabled={!stripe}>
        Pay
      </button>
    </form>
  );
};

The card elements are not showing up, I have tried cardElement too.

Tags:

2

Answers


  1. 0

    The issue is most likely related to how you’re initialising stripePromise by running loadStripe asynchronously by calling
    async function loadStripePromise()

    I believe loadStripe needs to run synchronously in order to initialise the elements correctly. The docs have an example here

    const stripePromise = loadStripe(...)

...

return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
    Login or Signup to reply.
  2. 0

    According to the code you wrote, it appears as though you’re attempting to coordinate Stripe Components into a Next.js application. The code looks generally right, yet there’s a possible issue by they way you’re utilizing the loadStripe capability.

    The issue probably lies in the loadStripePromise capability. This capability is nonconcurrent and returns a commitment, which isn’t reasonable for passing straightforwardly to the stripe prop of the Components part. The stripe prop expects the genuine Stripe object, not a commitment.

    To determine the issue, you ought to utilize the loadStripe capability outside the part to get the Stripe object straightforwardly. Here is the adjusted code:

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

// Move the loadStripePromise outside the component
const stripePromise = loadStripe("PUBLISHABLE_KEY");

const AddStripeCreditCard: React.FC<AddStripeCreditCardProps> = ({
  show,
  close,
}) => {
  return (
    <CustomModal show={show} close={close} >
      {/* Pass the stripe object directly */}
      <Elements stripe={stripePromise}>
        <CardDetailsForm />
      </Elements>
    </CustomModal>
  );
};

    By moving the loadStripePromise outside the part and looking for it prior to passing it to the stripe prop, you guarantee that the Stripe object is accessible while delivering the CardDetailsForm component.

    Try to supplant ‘PUBLISHABLE_KEY’ with your real Stripe publishable key. Likewise, guarantee that you’ve imported the fundamental CSS documents for Stripe Components to accurately work. Import the Stripe CSS in your fundamental section record (e.g., _app.js or index.js) like this:

    import "@stripe/stripe-js"; // Import this to ensure the CSS is included

    In the wake of rolling out these improvements, the Stripe Components ought to appear accurately in your Next.js application. Assuming you’re actually confronting issues, confirm your Stripe account settings, Programming interface keys, and guarantee you’re running the application in a climate that permits correspondence with Stripe’s servers.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search