#ManuX

1 messages · Page 1 of 1 (latest)

jolly valeBOT
atomic spade
#

Hi 👋 I'm not familiar with the Next framework, so I'm not too familiar with what could be going on here. I'll leave the thread open though in case anyone in the community has insight to share.

proud forum
#

No worries. However you can think about this issue even without considering next.js. Right now loadStripe doesn't seem to be conceived to be passed API keys dynamically right? I think the normal usage would be to pass it a hardcoded ENV variable. So how would you deal in a normal react app if you needed to pass it a dynamic API key that you get from the server?

#

While keeping it outside of the component that is...

jolly valeBOT
torn roost
#

Hi there. Taking over for toby as they have to step out. Let me see if I can find some options

proud forum
#

Hey! Let me check this out. Thanks a lot for the assistance.

proud forum
#

@torn roost

I tried this but it doesn't work :

` const [stripe, setStripe] = React.useState(null);

React.useEffect(() => {
if (typeof window !== undefined) {
if (window.Stripe) {
// this.setState({stripe: window.Stripe('pk_test_12345')});
setStripe(window.Stripe(stripe_account_pk));
} else {
document.querySelector("#stripe-js").addEventListener("load", () => {
// Create Stripe instance once Stripe.js loads
// this.setState({stripe: window.Stripe('pk_test_12345')});
setStripe(window.Stripe(stripe_account_pk));
});
}
}
}, [stripe_account_pk]);

const options = useMemo(() => {
return {
clientSecret,
appearance: {
theme: "stripe",
},
locale,
};
}, [clientSecret, locale]) as StripeElementsOptions;

return (
<Box className="notranslate">
{clientSecret && (
<Elements options={options} stripe={stripe}>
<FormsContainer formsContainerData={formsContainerData} />
</Elements>
)}
</Box>
);
};`

#

I'm getting:

Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'addEventListener')

torn roost
#

Yeah don't follow the docs for react-stripe-elements

#

That's our old client library

#

You'll need to work on implementation yourself. I just meant a similar approach as outlined in Stackoverflow post (not the react-stripe-elements docs) can be used

#

Recommend you try ^

proud forum
#

Nice, let me see 👍

torn roost