#Suyype
orchid lion
Hi, can you share more details here? Step by step details on what you're doing would be helpful
How are you integrating with Stripe? What documentation are you using?
fierce hawk
Im using https://stripe.com/docs/js/elements_object/create, as docs and im just importing it to my addtobutton.js component in nextjs. I can send you the file if needed, I dont know much about the API and such.
orchid lion
Please don't send a file. So what is the exact issue? Can you share step by step details here so we can debug this together?
fierce hawk
I really dont know but it just seems to be that its outputting this error
'Cannot read properties of undefined (reading 'retrieve')' at one of my parts of code
orchid lion
You should start logging in your code and seeing exact where this error is thrown. This error typically means that you have a variable that is undefined. Can you start there?
fierce hawk
it seems that const price = await stripe.prices.retrieve(priceId); is where the error is occuring in my cart.js file
fierce hawk
My code is in javascript, the framework is Next.Js
orchid lion
What are you using on your server side code?
fierce hawk
as in server side code, I am using the normal Stripe.js API
orchid lion
It looks like your code to retrieve the price is correct:
const price = await stripe.prices.retrieve
Can you explicitly pass the price id on your retrieve instead of passing priceId?
fierce hawk
how could I achieve that?
orchid lion
Were in your code do you have this variable priceId?
Find that and pass that id explicitly in your code above.
fierce hawk
I have a priceId that gets passed from this tag in a index.js page <AddToCartButton priceId={'price_1MmQ7QH0DaIfyf0YMDy17QTo'} />
orchid lion
Ok, can you pass the price_ here? Your code will look something like this:
const price = await stripe.prices.retrieve( 'price_1MmQ7QH0DaIfyf0YMDy17QTo' );
fierce hawk
well, the thing is, I have a component of a add to cart button because it needs to get repeated for different items that are added to cart, I cant have a price like that because that is just one constant price that will apply to all addtocart buttons.
orchid lion
I know but we're just trying to debug what the issue might be... if this works, then we know with 100% certainty where the issue lies
orchid lion
Also, this should be in your server side code.
fierce hawk
what do you mean as server-side?
orchid lion
You need to retrieve the price from your server-side code, https://stripe.com/docs/api/prices/retrieve?lang=node using your secret API key: https://stripe.com/docs/keys
fierce hawk
ok, now it is returning the name and image and price, but in my mongoDB it is returning the priceId as null
and I think thats because we took out the priceId out of the button
orchid lion
Yeah, I'd keep debugging this on your code..
fierce hawk
It just seems weird...
orchid lion
How do you mean?
fierce hawk
idk, its just weird, but coding in general is weird 🤣
echo vigilBOT
fierce hawk
I fixed it, but now Im trying to show the image part for this link "https://files.stripe.com/links/MDB8YWNjdF8xTDhzUFJIMERhSWZ5ZjBZfGZsX3Rlc3RfVUtoZ0VZUjJsZkJuemVCbEozR2xaR09w00cIM9Zm5X" but that link just leads me to a download link so how could I pull the direct image link?
young tiger
Hi @fierce hawk I'm talking over, give me a sec to catch up
fierce hawk
ok, thanks.
young tiger
Is you question about how to display a image in <AddToCartButton /> component?
fierce hawk
actually, I kinda moved on from that, its now a how to display a image in this function CartList({ items }) { // component to display items in the cart return ( <div> {items.map((item) => ( <div key={item._id}> <p>Name: {item.name}</p> <p>Price: {item.price}$</p> <Image src={item.image} alt={item.name} /> </div> ))} </div> ); } and that connects to my mongoDB but I get the image, name, and price from the priceId it shows, it shows the price and name, but not the link since that link sends me to a download the image page.
young tiger
What do you by link ? I don't see a <Link> in the code that you provided earlier/
fierce hawk
no, my bad for not specifing, I mean as in this link https://files.stripe.com/links/MDB8YWNjdF8xTDhzUFJIMERhSWZ5ZjBZfGZsX3Rlc3RfVUtoZ0VZUjJsZkJuemVCbEozR2xaR09w00cIM9Zm5X and that link shows in my database from my priceId but if you click it, it will just download the image.
fierce hawk
I present it in here function CartList({ items }) { // component to display items in the cart return ( <div> {items.map((item) => ( <div key={item._id}> <p>Name: {item.name}</p> <p>Price: {item.price}$</p> <Image src={item.image} alt={item.name} /> </div> ))} </div> ); } and its the ```<Image src={item.image} alt={item.name} />
young tiger
Is this <Image> component a custom component you own?
fierce hawk
nope, just one that I imported from import Image from "next/image"
young tiger
You might want to check with the developer who created this component and ask how it renders a image.
fierce hawk
but even if I try the <img> tag it looks the same.