Retrieve Product Variant's Prices in Storefront

In this document, you'll learn how to show a product's variants' prices in the storefront, including handling sale prices.

Pricing Query Parameters#

When you retrieve products either with the List Products or Retrieve Products API routes, you must include in the beginning of the fields query parameter the value *variants.calculated_price.

You also must pass at least one of the following query parameters to retrieve the correct product variant price:

• region_id: The ID of the customer's region. This parameter must be included if you want to apply taxes on the product variant's price.
• country_code: The customer's country code. This parameter must be included if you want to apply taxes on the product variant's price.
• province: The province, which can be taken from a customer's address. This parameter helps further narrowing down the taxes applied on a the product variant's prices.
• cart_id: The ID of the customer's cart, if available. If set, the cart's region and shipping address's country code and province are used instead of the region_id, country_code, and province parameters.

For example:

Code
1const queryParams = new URLSearchParams({2  fields: `*variants.calculated_price`,3  region_id: region.id,4})5
6fetch(`http://localhost:9000/store/products/${id}?${queryParams.toString()}`, {7  credentials: "include",8  headers: {9    "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",10  },11})12.then((res) => res.json())13.then(({ product }) => {14  // TODO use product15  console.log(product)16})

In this example, you pass the selected region's ID as a query parameter with the fields query parameter set to *variants.calculated_price.

Prices for Authenticated Customer#

If you pass the customer's authentication token / session in the request, the customer and their group, if available, are used to retrieve more accurate prices.

For example, if a promotion applies to the customer's group, the promotion's prices are used.

Product Variant's Price Properties#

If you pass the parameters mentioned above, each variant has a calculated_price object with the following properties:

Examples#

• Example: Show Product Variant's Price.
• Example: Show Product Variant's Sale Price.
• Example: Show Product Variant's Price with Taxes.