@geenius/payments

Commercial multi-provider billing primitives for checkout, subscriptions, invoices, and Convex-backed payment workflows.

Installation

pnpm add @geenius/payments

@geenius/payments is a commercial-licensed package for Lancio add-ons and the default Studio billing stack. Install from npm, then configure your commercial license and provider credentials in your app.

Install the framework peer dependencies you plan to use:

• React variants require react and react-dom
• SolidJS variants require solid-js

Import Surface

import {
  BasePaymentProvider,
  configurePayments,
  getPaymentProvider,
  getPlans,
  setPaymentProvider,
} from '@geenius/payments'

import {
  createPaymentProvider,
  resolveProviderFromEnv,
} from '@geenius/payments/factory'

import type { PaymentConfig, Subscription } from '@geenius/payments/shared'

import {
  CheckoutButton,
  PaymentProvider,
  PricingTable,
  usePayments,
  useSubscription,
} from '@geenius/payments/react'

import {
  CheckoutButton as CssCheckoutButton,
  PaymentProvider as CssPaymentProvider,
  PricingTable as CssPricingTable,
} from '@geenius/payments/react-css'

import {
  CheckoutButton as SolidCheckoutButton,
  PaymentProvider as SolidPaymentProvider,
  PricingTable as SolidPricingTable,
  createPayments,
  createSubscription,
} from '@geenius/payments/solidjs'

import {
  CheckoutButton as SolidCssCheckoutButton,
  PaymentProvider as SolidCssPaymentProvider,
  PricingTable as SolidCssPricingTable,
} from '@geenius/payments/solidjs-css'

import { componentDefinition } from '@geenius/payments/convex'

The package publishes these stable subpaths:

• @geenius/payments
• @geenius/payments/shared
• @geenius/payments/factory
• @geenius/payments/react
• @geenius/payments/react-css
• @geenius/payments/react-css/styles.css
• @geenius/payments/solidjs
• @geenius/payments/solidjs-css
• @geenius/payments/solidjs-css/styles.css
• @geenius/payments/convex

Usage

import { type PlanConfig } from '@geenius/payments'
import { createPaymentProvider } from '@geenius/payments/factory'
import { PaymentProvider, PricingTable } from '@geenius/payments/react'

const plans: PlanConfig[] = [
  {
    id: 'pro',
    name: 'Pro',
    description: 'Recurring access for your core product.',
    features: ['Unlimited seats', 'Priority support'],
    prices: [
      {
        id: 'price_pro_month',
        providerPriceId: 'price_pro_month',
        amount: 7900,
        currency: 'USD',
        interval: 'month',
      },
    ],
  },
]

createPaymentProvider({
  provider: 'stripe',
  apiKey: process.env.STRIPE_SECRET_KEY ?? '',
  currency: 'USD',
  plans,
})

export function BillingRoute() {
  return (
    <PaymentProvider userId="user_123">
      <PricingTable
        successUrl="https://app.geenius.dev/billing"
        cancelUrl="https://app.geenius.dev/pricing"
      />
    </PaymentProvider>
  )
}

Storybook

This package includes React and SolidJS Storybook apps for local review:

pnpm --filter ./apps/storybook-react dev
pnpm --filter ./apps/storybook-solidjs dev

Both storybooks render the Tailwind and vanilla CSS checkout surfaces side by side through the shared @geenius/storybook shell so parity stays visible during package development.

License

Commercial license. See LICENSE.