Skip to main content

​
Overview

Accessing a customer’s purchase history lets you tailor onboarding, upsell paths, and support flows. Flowglad provides past purchases and current subscriptions for easy consumption.

​
How to use

  • Fetch all customer’s subscriptions: Use the subscriptions field from useBilling on client side or access subscriptions from the getBilling() result on server. Refer to the subscriptions response object for the data fields returned.
  • Fetch customer’s current active subscriptions: Use the currentSubscriptions field from useBilling on client side or access currentSubscriptions from the getBilling() result on server. Refer to the currentSubscriptions response object for the data fields returned. These subscription statuses are considered current: active, trialing, past_due, unpaid, credit_trial, cancellation_scheduled.
  • Fetch all customer’s purchases (subscription, single payment, or usage price type): Use the purchases field from useBilling on client side or access purchases from the getBilling() result on server. Refer to the purchases response object for the data fields returned.

​
Example: Rendering Purchase History & Active Subscriptions

'use client'

import { useBilling } from '@flowglad/nextjs'

export function CustomerPurchasesPanel() {
  const { loaded, errors, currentSubscriptions, subscriptions, purchases } =
    useBilling()

  if (!loaded) {
    return <p>Loading customer billing…</p>
  }

  if (errors?.length) {
    return <p>Unable to load billing data right now.</p>
  }

  return (
    <div>
      <section>
        <h3>Current subscriptions</h3>
        <ul>
          {(currentSubscriptions ?? []).length === 0 && (
            <li>No active subscriptions</li>
          )}
          {(currentSubscriptions ?? []).map((subscription) => {
            const label = subscription.name ?? subscription.id
            return (
              <li key={subscription.id}>
                {label} · {subscription.status}
              </li>
            )
          })}
        </ul>
      </section>

      <section>
        <h3>All subscriptions</h3>
        <ul>
          {(subscriptions ?? []).length === 0 && (
            <li>No subscription history yet</li>
          )}
          {(subscriptions ?? []).map((subscription) => {
            const label = subscription.name ?? subscription.id
            return (
              <li key={subscription.id}>
                {label} · {subscription.status}
              </li>
            )
          })}
        </ul>
      </section>

      <section>
        <h3>Recent purchases</h3>
        <ul>
          {(purchases ?? []).length === 0 && <li>No purchases yet</li>}
          {(purchases ?? []).map((purchase) => (
            <li key={purchase.id}>
              {purchase.name} · {purchase.priceType} · {purchase.status}
            </li>
          ))}
        </ul>
      </section>
    </div>
  )
}