> ## Documentation Index
> Fetch the complete documentation index at: https://flowglad.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Pricing Models & Products

> Learn how to surface your pricing models and product catalogs in your app

## Overview

Flowglad makes it simple to fetch [pricing models](/features/pricing-models) and [products](/features/products) to present to your customers.

If you're building in React or Next.js, use the `usePricing` hook to access pricing data client-side; on the server, call `flowglad(customerExternalId).getBilling()` or `flowglad(customerExternalId).getPricingModel()` to retrieve the same pricing model data. Pass YOUR app's user/organization ID as `customerExternalId`, not Flowglad's customer ID.
Refer to the [pricing model response object](/api-reference/customer/get-billing-details#response-pricing-model) for the data fields returned.

### Example: Accessing your pricing model & products

```tsx theme={null}
'use client'

import { usePricing } from '@flowglad/nextjs'

export function PricingProducts() {
  const pricingModel = usePricing()

  if (!pricingModel) {
    return <div>Loading pricing…</div>
  }

  const products = pricingModel.products.map((product) => {
    const defaultPrice = product.defaultPrice ?? product.prices?.[0] ?? null

    return {
      slug: product.slug,
      name: product.name,
      description: product.description,
      defaultPrice,
      features: product.features,
    }
  })

  return (
    <section>
      {products.map((product) => {
        const price = product.defaultPrice
        const priceLabel = price
          ? `${price.name ?? product.name} – $${(price.unitPrice / 100).toFixed(2)}${
              price.intervalUnit ? `/${price.intervalUnit}` : ''
            }`
          : 'Price not available'

        return (
          <article key={product.slug}>
            <h3>{product.name}</h3>
            <p>{product.description}</p>
            <p>{priceLabel}</p>
          </article>
        )
      })}
    </section>
  )
}
```