#mahima-thacker_error
grave bayBOT
👋 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/1294254600462794775
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
sour dune
This is Next.js right? I would assume the page/component you're trying to render the Payment Element in is a server component? You likely need to declare it as a client side component: https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/components/ElementsForm.tsx#L1
tulip lintel
Thank you for the quick response, I have defined both pages as a client component
sour dune
You'll need to share some more code and/or a reproduction I'm afraid
Can't really help with the limit info you've shared!
sour dune
OK, and where do you invoke the <PaymentForm /> component?
tulip lintel
sour dune
And when/how does the error occur? On page load? When you click something?
tulip lintel
Yes, on page load. I can see the Input for the card details etc but not getting other elements. I have implemented lcl.host as well.
sour dune
Which 'other elements'?
tulip lintel
Options to change the payment methods
This is the URL generated using LCL.host:- https://summit-listings-frontend.localhost:44359/payment/
sour dune
I suspect that's unrelated to the error and probably an account configuration issue. What's the pi_xxx ID of an intent you're using to render the Element?
tulip lintel
NEXT_PUBLIC_PUBLISHER_KEY = "pk_test_51Q3h80LvjjGjabAacuveZZfVQFAEKbk8QBlNyXlNs0RioGgc7Fe6mbpzn0LzUUoKpjRvmCD5m9rHKrcU8IXZSTVr005G6vWAH7"
sour dune
No, that's your publishable key
tulip lintel
Which ID then?
sour dune
Nevermind, I found one: pi_3Q8gzbLvjjGjabAa1aIdmmHz
tulip lintel
Oh, That's great
sour dune
Checking
tulip lintel
Okay, no worries
sour dune
This is the URL generated using LCL.host:- https://summit-listings-frontend.loca...
This doesn't work for me
tulip lintel
It's for localhost that's why
sour dune
Hmm, your code is a bit confused. You're combining both deferred and non-deferred integration paths. Can you remove the conditional rendering from the <PaymentElement /> component? This line:
{clientSecret && <PaymentElement />}
You're initialising the Elements with amount, currency params so you don't need a client secret to render the Payment Element
tulip lintel
Actually, I am new to stripe and I followed this tut:- https://www.youtube.com/watch?v=2JDKquIMJws
tulip lintel
You're initialising the Elements with `amount`, `currency` params so you don't n...
Okay, let me give it a try
This is how it looks like after removing clientSecret but It is not showing GPay option
tulip lintel
Yep, I am from India. Oh okay, got it
grave bayBOT
tulip lintel
Thanks for the help:)