LumnPricing

Drop-in pricing table component. Auto-fetches products from your Lumn account and renders pricing cards with interval switching.

typescript

import { LumnProvider, LumnPricing } from '@lumnsh/react';

function App() {
  return (
    <LumnProvider apiKey={process.env.NEXT_PUBLIC_LUMN_API_KEY} baseUrl={process.env.NEXT_PUBLIC_LUMN_API_BASE_URL}>
      <LumnPricing
        customerId="cus_123"
      />
    </LumnProvider>
  );
}

LumnPricingProps

Parameter reference

Parameter	Type	Required	Description	Example
customerId	string	Optional	Optional customer ID to show personalized plan statuses.	'cus_123'
products	Product[]	Optional	Manual products list. Auto-fetches from Lumn API if omitted.	-
intervals	PricingInterval[]	Optional	Available intervals. Default: ['monthly', 'yearly']	['monthly', 'yearly']
defaultInterval	PricingInterval	Optional	Initial selected interval. Default: 'monthly'	'monthly'
locale	string	Optional	BCP 47 locale for price formatting (e.g. 'zh-CN').	'en-US'
onSelectPlan	function	Optional	Callback when a user clicks a plan. Receives product, interval, and checkout helper.	-
renderCard	function	Optional	Custom render hook for the entire pricing card.	-
formatPrice	function	Optional	Custom formatter for price display (e.g. "$10/mo").	-
loadingComponent	ReactNode	Optional	Custom loader shown during API fetch.	-
emptyComponent	ReactNode	Optional	Custom UI shown when no products are found.	-
errorComponent	function	Optional	Custom error UI if the fetch fails.	-
className	string	Optional	Additional CSS classes for the container.	-

Interactive UI & Output

Paste your API key above to try

Parameters

customerId

defaultInterval