spike1466

[harsh ice]

Here's the code:

import React from 'react';
import './styles.scss';
import { Elements, PaymentElement } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe(
  '<hardcoded pk>'
);

const Subscription = () => {
  return (
    <div className='payments'>
      <p>Payments page</p>
      <Elements
        stripe={stripePromise}
        options={{
          clientSecret:
            '<hardcoded key>'
        }}
      >
        <p>Payments form</p>
        <form>
          <PaymentElement />
        </form>
      </Elements>
    </div>
  );
};

export default Subscription;

[charred oyster]

are there any errors in the console?

[harsh ice]

no errors unfortunately...

But the weird thing is I tried to make another barebone react app and copied and pasted the same code. it worked

i had the same react versions and stripe packages versions

[charred oyster]

probably something specific about your code or how you're integrating. Unfortunately, it's going to be difficult for me to troubleshoot any further without an minimally replicable example to look at. If you can try to create one using maybe something like codesandbox, I can try taking a closer look

[harsh ice]

oooohh, I resolved it now, it turns out that our production app was using an old nodejs version (16.10.0), I upgraded to 21.2.0