Skip to main content

​
Overview

Flowglad makes it simple to fetch pricing models and products to present to your customers. If you’re building in React or Next.js, use the useBilling 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 for the data fields returned.

​
Example: Accessing your pricing model & products

'use client'

import { useBilling } from '@flowglad/nextjs'

export function PricingProducts() {
  const billing = useBilling()

  if (!billing.loaded) {
    return <div>Loading pricing…</div>
  }

  if (billing.errors || !billing.pricingModel) {
    return <div>Unable to load pricing data.</div>
  }

const products = billing.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>
  )
}