Browser — custom UI

You want our auth and billing infrastructure (so trials, checkout, customer portal, sessions all “just work”) — but you render your own pricing page, login form, and gate components. The SDK gives you BillingClient for prices/checkout/state and AuthClient for login flows; you control every pixel of the UI.

import { BillingClient, AuthClient } from '@monetize.software/sdk/core';
 
const auth = new AuthClient({
  paywallId: '3',
  apiOrigin: 'https://YOUR_DOMAIN'
});
 
const billing = new BillingClient({
  paywallId: '3',
  apiOrigin: 'https://YOUR_DOMAIN',
  auth
});
 
// Render your own pricing cards
const prices = await billing.getPrices();
// ... your JSX / your DOM ...
 
// Your "Buy" button:
async function onBuyClick(priceId) {
  if (!auth.user) {
    await auth.signInWithEmail({ email, password });
  }
  const { url } = await billing.createCheckout({ priceId, idempotencyKey: crypto.randomUUID() });
  window.location.assign(url);
}

When to pick this

• You already have a strong design system and don’t want to fit our paywall modal into it.
• You want your pricing page indexed for SEO (not hidden inside a modal).
• You need login UX that matches the rest of your app (your own copy, layout, A/B tests).
• You want full control over trial UX, upsell timing, customer-portal layout.
• You’re selling per-request AI access from the browser without a backend (API Gateway — only fits this path).

Form factors

This scenario works the same way in any browser context:

• Web / SPA — just import { BillingClient } from '@monetize.software/sdk/core' and go.
• Chrome Extension (MV3) — use the /core export in your popup, options page, or content script. Skip @monetize.software/sdk-extension (which is built around PaywallUI for the drop-in scenario) — your popup renders its own UI directly.
• Telegram Mini App — same as SPA. Watch bundle size; import narrowly from /core.

What’s in this path

What’s next

Cross-cutting features useful in this scenario: