@lumra/sdk

Client-side SDK for Lumra. Provides createLumraClient, LumraProvider, and React hooks for access control and paywall management. Backend-agnostic — you wire up your own API endpoints.

Install

npm install @lumra/sdk @lumra/core

Setup (once at app root)

import { createLumraClient, LumraProvider } from '@lumra/sdk'

const client = createLumraClient({
  getUser: () => currentUser,        // return your user object (or null)
  getToken: () => getJwt(),          // return your auth token (or null)
  api: {
    // Called to check if the current user can watch a video
    checkAccess: async (resourceId) => {
      const res = await fetch(`/api/access?resourceId=${resourceId}`, {
        headers: { Authorization: `Bearer ${getJwt()}` },
      })
      return res.json()   // { allowed: boolean }
    },
    // Called when the user clicks Buy / Rent
    createCheckout: async ({ resourceId, optionId }) => {
      const res = await fetch('/api/checkout', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${getJwt()}`,
        },
        body: JSON.stringify({ resourceId, optionId }),
      })
      return res.json()   // { url: string }  — redirects to Stripe/PayPal
    },
  },
})

export function Providers({ children }) {
  return <LumraProvider client={client}>{children}</LumraProvider>
}

useFluxaPaywall hook

import { useFluxaPaywall } from '@lumra/sdk'

export function VideoPage({ videoId }) {
  const { locked, loading, unlock } = useFluxaPaywall(videoId)

  if (loading) return <div>Checking access...</div>

  return (
    <div>
      {locked ? (
        <button onClick={() => unlock('buy')}>Unlock — $9.99</button>
      ) : (
        <video src="..." />
      )}
    </div>
  )
}

unlock(optionId?) calls createCheckout({ resourceId, optionId }) and redirects the browser to the Stripe or PayPal checkout URL returned by your backend.

useFluxaAccess hook

Lower-level hook if you want to manage the UI yourself:

import { useFluxaAccess } from '@lumra/sdk'

const { allowed, loading, refetch } = useFluxaAccess('video-123')

Backend requirements

Your backend must expose two endpoints:

GET /api/access?resourceId=<id> — returns { allowed: boolean }
POST /api/checkout — body: { resourceId, optionId? } — returns { url: string }

The URL is a Stripe or PayPal hosted checkout page. The user is redirected there to complete payment. See @lumra/module-stripe-connect for the backend implementation.

© 2026 Reel Foundry AU. All rights reserved.
MIT License — see LICENSE