amon1288

[slow hinge]

export const getServerSideProps: GetServerSideProps<
any,
{ id: string }

= async ({ params }) => {
const productId = params!.id;

const product = await stripe.products.retrieve(productId, {
expand: ["default_price"],
});

const price = product.default_price as Stripe.Price;

return {
props: {
product: {
id: product.id,
name: product.name,
imageUrl: product.images[0],
price: new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
}).format(price.unit_amount! / 100),
numberPrice: price.unit_amount! / 100,
description: product.description,
defaultPriceId: price.id,
},
},
// revalidate: 60 * 60 * 1 // 1 hour
};
};

this is how my function to get the product data looks like right now

[frosty garden]

Hello 👋
Have you tested the code already?

[slow hinge]

Hello Hanzo. Yes, my page is working already, the product is showing with all the info I want, the only thing that is missing for me to finish this project, is this logic behind the size of each outfit, I dont know if here on discord is the right place that I should be asking this, or in the stripe web support

[frosty garden]

Talking in Stripe terms, I believe you're trying to create a checkout session from these products/prices.

What's blocking you from getting the relevant IDs from rendered prices and passing them to the Checkout Session creation API?

[slow hinge]

I am unsure about how to obtain all of my price IDs. Currently, I am only able to retrieve the default price ID. Additionally, I am uncertain about the type of function I should implement for the "S," "M," and "L" buttons in order to facilitate the changing of the product price ID and send that price ID to the checkout session. Does this explanation make sense?

[frosty garden]

Ah so you're trying to retrieve all the prices of a product, correct?

In that case, you'd want to use List all prices endpoint for this and pass product ID as parameter
https://stripe.com/docs/api/prices/list

That should get you all the prices associated with a product

Once you have all the prices available, you can send the relevant ID to your endpoint that creates a checkout session.

For example,

• Product X has 4 prices for S, M, L and XL
• You call List all prices endpoint and pass prod_x_id as parameter, that gets you all the prices
• You render the prices/size options on your client-side app
• Customer makes a selection and chooses "M" size, you get the relevant price ID from client-side (ideally from your component state) and then send it over to your server-side code that creates the relevant checkout session

Does that clarify? @slow hinge

[slow hinge]

with the info you gave I was trying to make something out of it in my code:
const productPriceData = await stripe.prices.list({
expand: ["data.product"], //
}); I didnt had time to test it yet

but if this code I sent worked, I still didnt get how I should proceed in my button logic, what kind of code I insert there to make the product price change? you get what I mean? I should make a function and insert in the OnClick, that is not yet clear

[frosty garden]

but if this code I sent worked, I still didnt get how I should proceed in my button logic, what kind of code I insert there to make the product price change? you get what I mean? I should make a function and insert in the OnClick, that is not yet clear
That depends on your user story though right? Also I don't understand following
"what kind of code I insert there to make the product price change?"

What product/price change are you referring to? Like when customer clicks on a specific size, what exactly are you doing? are letting the customers add product in a cart and then create a checkout session for all items in the cart? OR are you creating a checkout session as soon as customer clicks on a size?

[slow hinge]

The user clicks on the product, and upon reaching the product page, they will encounter four buttons, each representing a distinct size: S, M, L, and XL. To achieve the intended experience, the user should initially choose their preferred size and then proceed by clicking the "Add to Cart" option. After completing their selections, they can advance to the checkout process by clicking the button situated within the cart. This outlines the desired user journey. I just don't get it the specific logic required for these buttons, ensuring that the price ID changes every time a button is clicked, that is what is supposed to happen right?

[slow hinge]

I'm going to have lunch now, I'll not answer in the last 30 minutes, when I come back, I'll reply to any message that you guys sent me