Stripe product order changes after saving

[Myrinw]

Hey guys,

I have been facing an issue with the stripe integration, The project is running well and my products from Stripe are showing up on the page. However, I've noticed that when I make a change in stripe (for example update the price or description), the order of products gets changed. I currently have 3 products set up (basic, standard, and pro subscriptions), and if I make an edit to the basic product in Stripe, The position of the basic plan would get changed to third instead of first

I also checked the database and I can see that the order of product rows changes after saving a product, and Ideally I would like this order to never change.

I've checked the webhooks.ts file and I didn't find a cause for why this is happening so I think this might be a Supabase issue. Has anyone experienced the same and perhaps found a solution to this?

[daniel-farina]

You can fix this by adding the following to Pricing.tsx

  // Sort products by price in ascending order
  const sortedProducts = [...products].sort((a, b) => {
    const priceA = a.prices.find(price => price.interval === billingInterval);
    const priceB = b.prices.find(price => price.interval === billingInterval);
    return (priceA?.unit_amount || 0) - (priceB?.unit_amount || 0);
  });

Then replace

{products.map((product) => {

with

 {sortedProducts.map((product) => {

[beardsleym]

I think this is meant to be in the query, but it doesn't work because a) I think the referenceTable approach is deprecated and b) there could be multiple prices.

export const getProducts = cache(async (supabase: SupabaseClient) => {
  const { data: products, error } = await supabase
    .from('products')
    .select('*, prices(*)')
    .eq('active', true)
    .eq('prices.active', true)
    .order('metadata->index')
    .order('unit_amount', { referencedTable: 'prices' });

  return products;
});