noah_react-paymentelement | Stripe Developers | Page 1

bronze topazBOT Apr 22, 2024, 4:44 PM

#

sharp shoreBOT Apr 22, 2024, 4:44 PM

#

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

noah-cho_code, 6 hours ago, 5 messages

bronze topazBOT Apr 22, 2024, 4:44 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1232009027982983248

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

mellow scroll Apr 22, 2024, 4:44 PM

#

`//Loading Stripe
const [stripePromise, setStripePromise] = useState(null);
const [clientSecret, setClientSecret] = useState("");

useEffect(() => {
const loadStripeWithKey = async () => {
try {
const response = await makeRequest.get(
process.env.REACT_APP_STRIPE_CONFIG_URL,
null,
{ withCredentials: true },
);
if (response.status === 200) {
const { publishableKey } = response.data;
setStripePromise(loadStripe(publishableKey));
}
} catch (error) {
console.log(error);
}
};
loadStripeWithKey();
}, []);

useEffect(() => {
const createPaymentIntent = async () => {
try {
const response = await makeRequest.post(
process.env.REACT_APP_STRIPE_INTENT_URL,
{ amount: finalAmount, currency: currency.cur.toLowerCase() },
{ withCredentials: true },
);
if (response.status === 200) {
const { clientSecret } = response.data;
setClientSecret(clientSecret);
}
} catch (error) {
console.log(error);
}
};
if (currentPayment && currentPayment.title === "Stripe") {
createPaymentIntent();
}
}, [currency.cur, finalAmount, currentPayment]);`

#

<Elements stripe={stripePromise} options={{ clientSecret }}> <StripeCheckoutForm isPaymentLoading={isPaymentLoading} isOrderLoading={isOrderLoading} state={state} payOrder={payOrder} dispatch={dispatch} setIsReviewed={setIsReviewed} setCurrentPayment={setCurrentPayment} createdOrder={createdOrder} /> </Elements>

sharp shoreBOT Apr 22, 2024, 4:49 PM

#

paper kestrel Apr 22, 2024, 4:52 PM

#

Hello, looking in to this, will get back to you with what we can find.

#

Can you try logging your publishable key just before it is used to make sure the value is set properly?

#

If that does not work, can you try removing node_modules and resinstalling everything?

sharp shoreBOT Apr 22, 2024, 5:14 PM

#

mellow scroll Apr 22, 2024, 5:29 PM

#

Seems like the value is set properly. The Elements component is not rendered before user reviews the order. When user reviews order (clicks specific button), Elements render with the proper value from stripePromise state

{currentPayment && currentPayment.title === "Stripe" && isReviewed && !updatedOrder.isPaid && ( <Elements stripe={stripePromise} options={{ clientSecret }}> <StripeCheckoutForm isPaymentLoading={isPaymentLoading} isOrderLoading={isOrderLoading} state={state} payOrder={payOrder} dispatch={dispatch} setIsReviewed={setIsReviewed} setCurrentPayment={setCurrentPayment} createdOrder={createdOrder} /> </Elements> )}

basically i followed the video from stripe developer youtube:
https://www.youtube.com/watch?v=e-whXipfRvg&t=116s

proper sandal Apr 22, 2024, 5:30 PM

#

Can you add a log before rendering Elements to log the exact value of clientSecret and other values?

#

noah_react-paymentelement

#

I'd also suggest working on a way simpler demo where you hardcode the value, load the PaymentElement at the root of your app just to see it work first

mellow scroll Apr 22, 2024, 5:39 PM

#

someone recommended "Removed node_modules and reinstalled and added import { loadStripe } from '@stripe/stripe-js/pure';"

#

tried logging secret and promise and the values are ok

#

no undefined or null when rendering Elements

#

https://stackoverflow.com/questions/70923674/maybestripe-apply-is-not-a-function

This guy had a similar problem on page load

proper sandal Apr 22, 2024, 5:48 PM

#

yeah sorry we're struggling to follow what your issue could be. I'd recommend starting fresh with a really simple app/demo that only loads Stripe.js and then renders PaymentElement and nothing else first

#

try hardcoding the values like the pk_test_123 to make sure they are set properly

mellow scroll Apr 22, 2024, 5:49 PM

#

should i try '@stripe/stripe-js/pure' first then test a demo?

#

that solution was from 01/22 that's why I'm asking

proper sandal Apr 22, 2024, 5:52 PM

#

The problem is that we don't understand your issue at all right now unfortunately. We need a clear and simple repro exposing the issue completely outside of your own code right now to understand what is going wrong

mellow scroll Apr 22, 2024, 5:53 PM

#

okay i will do a repro and try to replicate

proper sandal Apr 22, 2024, 5:55 PM

#

let us know once you have a basic demo and we can investigate/repro

bronze topazBOT Apr 22, 2024, 6:47 PM

#

tidal cairn Apr 22, 2024, 7:04 PM

#

@mellow scroll are you there still?

tidal cairn Apr 22, 2024, 7:28 PM

#

@mellow scroll reopened

mellow scroll Apr 22, 2024, 7:51 PM

#

Works now, so i figured with that maybeStripe.apply error i also get this warning:

It looks like Stripe.js was loaded more than one time. Please only load it once per page.

but i dont know what could cause stripe.js to load multiple times

#

i recreated a demo but everything works there correctly

#

no errors

tidal cairn Apr 22, 2024, 7:53 PM

#

@mellow scroll are you still blocked, or unblocked? sorry couldn't get it from your msg

mellow scroll Apr 22, 2024, 7:53 PM

#

oh, im unblocked

#

i mean regarding sending a message here

#

what i meant by "works now"

tidal cairn Apr 22, 2024, 8:32 PM

#

@mellow scroll can you pls tell me what you need help with? I read

oh, im unblocked

as you're fully unblocked

mellow scroll Apr 22, 2024, 8:36 PM

#

As i was saying the maybeStripe.apply error still occurs but with it there is also a warning that might be a hint for whats causing the error:

[Stripe.js] It looks like Stripe.js was loaded more than one time. Please only load it once per page.
index.mjs:128 Uncaught (in promise) TypeError: maybeStripe.apply is not a function
at initStripe (index.mjs:128:1)

but i dont know what could cause stripe.js to load multiple times

i recreated a demo but everything works there correctly

tidal cairn Apr 22, 2024, 8:38 PM

#

maybeStripe.apply error still occurs

where is that coming from in yoru code? are you calling that somewhere?

mellow scroll Apr 22, 2024, 8:39 PM

#

#

i think its from stripe-js package

#

i dont mention maybeStripe nowhere in my code

tidal cairn Apr 22, 2024, 8:42 PM

#

ah I See, looking

bronze topazBOT Apr 22, 2024, 8:44 PM

#

mellow scroll Apr 22, 2024, 8:46 PM

#

there is some connection to this part from "CheckoutSummary.jsx"

//Loading Stripe
` const [stripePromise, setStripePromise] = useState(null);
const [clientSecret, setClientSecret] = useState("");

useEffect(() => {
const loadStripeWithKey = async () => {
try {
const response = await makeRequest.get(
process.env.REACT_APP_STRIPE_CONFIG_URL,
null,
{ withCredentials: true },
);
if (response.status === 200) {
const { publishableKey } = response.data;
console.log(publishableKey);
setStripePromise(loadStripe(publishableKey));
}
} catch (error) {
toast.error(error?.data?.message || error.message);
}
};
loadStripeWithKey();
}, []);`

tidal cairn Apr 22, 2024, 8:49 PM

#

have to step away but caught up a colleague, give them a min

mellow scroll Apr 22, 2024, 8:50 PM

#

allright, thank you for your help so far

amber jungle Apr 22, 2024, 8:59 PM

#

Looks like you're logging your publishable key within loadStripeWithKey. Do you see it logged twice? Trying to get to the bottom of why your app tries to load stripe more than once

#

In any case, you need to try and remove loadStripe from your effect. That's why Stripe.js will be intialized multiple times

mellow scroll Apr 22, 2024, 9:03 PM

#

its logged only once when i reload at that route

#

the effect shouldnt cause it to initialize more than once if no dependency is given

#

i made a recreation of a simpler demo but it works there and i also used 1:1 the same useeffect

#

basically the frontend is almost identical between the demo and my app. What is different is that in my app i use ES6 modules

#

so the backend is a bit different

#

in demo:
const stripe = require("stripe")(process.env.STRIPE_CLIENT_SECRET);

and in my App:
import Stripe from "stripe";
export const stripe = new Stripe(process.env.STRIPE_CLIENT_SECRET);

amber jungle Apr 22, 2024, 9:15 PM

#

Is anything else different besides the backend? This is a frontend error

#

I think at this point it makes sense to write in to support with a link to a repro provided (along with your code), so folks can investigate async: https://support.stripe.com/contact/email

mellow scroll Apr 22, 2024, 9:21 PM

#

I will try to drill deeper into this and then I will send an email if I cant resolve it. Thanks for help everyone.

amber jungle Apr 22, 2024, 9:22 PM

#

No problem

mellow scroll Apr 22, 2024, 9:27 PM

#

solved it

#

I just had to specify when to run the function which loads Stripe.

Because i have multiple options for payment i had to do

if (currentPayment && currentPayment.title === "Stripe") {
loadStripeWithKey();
}

inside the useeffect

#

previously it loaded Stripe before the Elements component even rendered

amber jungle Apr 22, 2024, 9:30 PM

#

Ah nice that'll do it

#noah_react-paymentelement