LumnCheckout

Embedded checkout component. Wraps Stripe Checkout in an iframe — pass customerId and productSlug, get a complete checkout flow.

typescript

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

function CheckoutPage() {
  return (
    <LumnProvider apiKey={process.env.NEXT_PUBLIC_LUMN_API_KEY} baseUrl={process.env.NEXT_PUBLIC_LUMN_API_BASE_URL}>
      <LumnCheckout
        customerId="user_123"
        productSlug="pro"
        priceInterval="monthly"
        branding={{
          background_color: '#0a0a0a',
          button_color: '#22c55e',
          border_style: 'rounded',
        }}
        onComplete={() => console.log('Checkout complete!')}
      />
    </LumnProvider>
  );
}

LumnCheckoutProps

Parameter reference

Parameter	Type	Required	Description	Example
customerId	string	Required	Customer identifier in your system.	'user_123'
productSlug	string	Required	Unique product identifier (slug).	'pro'
priceInterval	PricingInterval	Optional	Billing interval. Default: 'monthly'	'monthly'
branding	CheckoutBranding	Optional	UI customization for the checkout iframe (colors, font, borders).	-
branding.background_color	string	Optional	Hex color for the checkout background.	'#0a0a0a'
branding.button_color	string	Optional	Hex color for the primary CTA button.	'#22c55e'
branding.border_style	'pill' \| 'rectangular' \| 'rounded'	Optional	Border style for inputs and buttons.	'rounded'
onComplete	function	Optional	Callback when the checkout flow is successfully completed.	-
className	string	Optional	Additional CSS classes for the iframe container.	-

Interactive UI & Output

Paste your API key above to try

Parameters

customerId

productSlug

priceInterval