colby-react-provider | Stripe Developers | Page 1

kind willowBOT Jun 21, 2023, 9:37 PM

#

bronze shoal Jun 21, 2023, 9:37 PM

#

Hi there

#

Hmm that is strange

#

Can you show me your code where you are calling elements()?

static void Jun 21, 2023, 9:41 PM

#

React js.

I have it in my index js file
(async () => {
try {
const response = await fetch("/config");
const config = await response.json();
const stripePromise = loadStripe(config.key);

ReactDOM.render(
  <Elements stripe={stripePromise}>
    <App />
  </Elements>,
  document.getElementById("root")
);

} catch (error) {
console.error("Error loading Stripe config:", error);
}
})();

Then in my form itself
<Elements stripe={stripePromise.current} options={{ appearance, clientSecret }}>
<PaymentForm

    />

  </Elements>

bronze shoal Jun 21, 2023, 9:42 PM

#

What is stripePromise.current?

#

should just be stripePromise, no?

kind willowBOT Jun 21, 2023, 9:44 PM

#

static void Jun 21, 2023, 9:44 PM

#

in my form i am using stripePromise like so
const stripePromise = useRef(null);
Then this is how im calling it

const getConfig = async () => {
const res = await fetch("/config");
const { key } = await res.json();
stripePromise.current = loadStripe(key);
};

bronze shoal Jun 21, 2023, 9:45 PM

#

Ah okay looks to me like you are rendering Elements multiple times here which is likely the issue

#

You only need to wrap your components in Elements at the top of your tree

#

We talk about it a bit here: https://stripe.com/docs/stripe-js/react#elements-provider

static void Jun 21, 2023, 9:47 PM

#

at the top or root? Cause would root be index.js?

rocky drum Jun 21, 2023, 9:50 PM

#

colby-react-provider

bronze shoal Jun 21, 2023, 9:53 PM

#

Yep mostly that is up to you. We recommend rendering your Elements provider at the root so that it is available throughout your whole app. That said, a lot of that will depend on your architecture and the main key is that you render it in a components that wraps wherever your payment form is located.

static void Jun 21, 2023, 9:56 PM

#

Gotcha, so essentially im rendering to calls to config and its making it act up. So I if I wrapp it in index, Like so
ReactDOM.render(
<Elements stripe={loadStripe(${process.env.PUBLISHABLE_KEY})}>
<React.StrictMode>
<App />
</React.StrictMode>,
</Elements>,
document.getElementById("root")
);
would I still need to call
const getConfig = async () => {
const res = await fetch("/config");
const { key } = await res.json();
stripePromise.current = loadStripe(key);
console.log("stripePromise", stripePromise.current);
};

await getConfig();

since I woudlnt have the promise ready?

rocky drum Jun 21, 2023, 9:58 PM

#

I'm sorry I know nothing about React and barely understand it and no one else on my team is around. I'm happy to try and help but my advice is going to mostly start with having you try things in Test mode first with clear logs to figure out what's happening

static void Jun 21, 2023, 9:59 PM

#

No worries, I tried it and its not giving me those issues anymore but ill keep reading thanks

#colby-react-provider