Skip to main content
The FunnelFox Billing Web SDK integrates your paywall page with FunnelFox Billing Subscription Engine API and Primer’s Headless checkout, automating subscription management. It provides a clean, promise-based API, event-driven architecture, robust error handling, and full TypeScript support.

​
Key features

  • Type-Safe: Complete TypeScript definitions and type safety.
  • Dynamic pricing: Update prices on the fly without page reloads.
  • Event-driven: Subscribe to lifecycle events for success, errors, and state changes.
  • Production-ready: Built-in validation, retries, and structured errors.
  • Lightweight: ~15KB minified with minimal dependencies.
  • Browser support: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+. Internet Explorer is not supported.
Check out complete integration examples to see the SDK in action and get started quickly.

​
Get started

​
1. Install

You can install the Billing SDK either by including it via a CDN or by using NPM.
Primer’s Web SDK must be loaded first on the page before the FunnelFox Billing SDK.
Include Primer’s Headless Checkout scripts and styles, then include the FunnelFox Billing SDK script:
<!-- Include Primer SDK first -->
<script src="https://sdk.primer.io/web/v2.59.10/Primer.min.js"></script>
<link rel="stylesheet" href="https://sdk.primer.io/web/v2.59.10/Checkout.css" />

<!-- Include FunnelFox Billing SDK -->
<script src="https://unpkg.com/@funnelfox/[email protected]/dist/funnelfox-billing.min.js"></script>

​
2. Create your first checkout

You can create a checkout in just a few lines. For example, to create a checkout for a given price and customer and render it on your page: 
import { createCheckout } from '@funnelfox/billing';

await createCheckout({
  orgId: 'your-org-id',
  priceId: 'price_123',
  customer: {
    externalId: 'user_456',
    email: '[email protected]',
  },
  container: '#checkout-container',
});
Required parameters:
​
orgId
string
required
Your organization’s ID (required for all operations). Must be provided either globally in configure() or in each API call.
​
priceId
string
required
The price identifier for the subscription or product.
​
customer
object
required
Customer information (requires externalId and email).
​
container
string
required
A CSS selector for the DOM element where the checkout form will be mounted.
After calling createCheckout(), the Primer-powered checkout form will appear in the specified container, ready for the user to complete payment.
Learn about all available createCheckout parameters, including optional callbacks and customization options.