Connect your billing provider

This guide walks through connecting a payment provider, configuring a plan, and implementing checkout - creating the actual product/plan/price catalog is a dashboard task, not something your app’s code does at runtime.

Prerequisites

A Kerne app
A Stripe account
Your app already configured with authentication - see Authentication setup

1. Connect a payment provider

In the Kerne dashboard: Settings → Billing → Connect Stripe, then complete the OAuth flow. Use test mode during development.

Other providers may come sooner or later, and Stripe is the only one supported for now.

2. Create a product and plan

This is a dashboard action, not an SDK call - catalog configuration (products, plans, prices) is control-plane: it’s you configuring your own SaaS, not something your running app does. In the dashboard: Billing → Products → create a product → add a plan with pricing.

3. Display pricing

This section builds a pricing page from the raw data, to show what’s underneath. For a complete one already wired to checkout - plan cards, a price-label toggle - see <PricingTable> instead.

kerne.billing.plans() is the one catalog read exposed to your app - public, meant for a pricing page:

// Anywhere - this route needs no session, just x-app-id
const plans = await kerne.billing.plans('acme'); // product slug or id

price.interval is {count}{unit} (unit is D, M, or Y - e.g. "1M", "3M", "1Y"), not a word - never render it directly to an end user. Written out by hand below; @kerne/react/ui exports the same formatInterval() (and formatMoney()) if you’re already pulling in that package:

import { useCheckout } from '@kerne/react';

const INTERVAL_UNIT = { D: 'day', M: 'month', Y: 'year' } as const;

function formatInterval(interval: string): string {
  const count = parseInt(interval, 10);
  const unit = INTERVAL_UNIT[interval.slice(-1) as keyof typeof INTERVAL_UNIT];
  return count === 1 ? unit : `${count} ${unit}s`;
}

function PricingPage({ plans }) {
  const { openCheckout } = useCheckout();

  return (
    <div>
      {plans.map((plan) => (
        <div key={plan.id}>
          <h3>{plan.name}</h3>
          {plan.prices.map((price) => (
            <button key={price.id} onClick={() => openCheckout(price.id)}>
              Subscribe - {price.amount / 100} {price.currency}/{formatInterval(price.interval)}
            </button>
          ))}
        </div>
      ))}
    </div>
  );
}

Checkout takes a price id (plan.prices[i].id), not the plan’s own id - a plan can have several prices (monthly, yearly).

4. Implement checkout

import { useCheckout } from '@kerne/react';

function UpgradeButton({ planPriceId }: { planPriceId: string }) {
  const { openCheckout } = useCheckout();

  return <button onClick={() => openCheckout(planPriceId)}>Upgrade</button>;
}

5. Handle success

The subscription is created once the provider confirms payment (asynchronously - not necessarily the instant the browser lands back on your app after checkout):

function SuccessPage() {
  return (
    <div>
      <h1>Welcome to Pro!</h1>
      <p>Your subscription is now active.</p>
    </div>
  );
}

6. Provide a billing portal

import { usePortal } from '@kerne/react';

function BillingSettings() {
  const { openPortal } = usePortal();
  return <button onClick={() => openPortal()}>Manage subscription</button>;
}

Next steps

Gating features to gate on what a customer bought
Design pricing for best practices

Quick starts

Common tasks

Connect your billing provider

Prerequisites

1. Connect a payment provider

2. Create a product and plan

3. Display pricing

4. Implement checkout

5. Handle success

6. Provide a billing portal

Next steps

​Prerequisites

​1. Connect a payment provider

​2. Create a product and plan

​3. Display pricing

​4. Implement checkout

​5. Handle success

​6. Provide a billing portal

​Next steps

Prerequisites

1. Connect a payment provider

2. Create a product and plan

3. Display pricing

4. Implement checkout

5. Handle success

6. Provide a billing portal

Next steps