@gebarbilling/react

Stripe-like React integration for GEBARBILLING.

Install

pnpm add @gebarbilling/react @gebarbilling/js

Quickstart

"use client";

import { GebarBillingProvider, CheckoutButton, BillingStatus } from "@gebarbilling/react";

export function BillingPage() {
  return (
    <GebarBillingProvider
      options={{
        publishableKey: process.env.NEXT_PUBLIC_GEBARBILLING_PUBLISHABLE_KEY!,
        baseUrl: process.env.NEXT_PUBLIC_GEBARBILLING_BASE_URL!
      }}
    >
      <CheckoutButton input={{ customerId: "cus_123", planId: "plan_growth" }} />
      <BillingStatus />
    </GebarBillingProvider>
  );
}

API Summary

Exports GebarBillingProvider, useGebarBilling, useBilling, useCustomer, useSubscription, useCheckout, usePortal, BillingStateProvider, CheckoutButton, PortalButton, BillingStatus, and PricingTable.

Common Pitfalls

Use this package in client-rendered React trees. In Next.js App Router, components like CheckoutButton must live in client components.

createCheckoutSession is safe to call without browser navigation. redirectToCheckout, openCheckout, and CheckoutButton require a browser runtime.