> ## Documentation Index
> Fetch the complete documentation index at: https://funnelfox.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Web SDK quickstart guide

> Get started with the FunnelFox Web SDK. Installation, initialization, event tracking, and basic integration in under 10 minutes.

The [FunnelFox Billing Web SDK](https://github.com/adaptyteam/funnelfox-billing-js) integrates your paywall page with FunnelFox Billing Subscription Engine API and [Primer's Headless checkout](https://primer.io/docs/checkout/headless), 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.

<Tip>
  Check out [complete integration examples](/develop/examples) to see the SDK in action and get started quickly.
</Tip>

## Get started

### 1. Install

You can install the [Billing SDK](https://github.com/adaptyteam/funnelfox-billing-js) either by including it via a CDN or by using NPM.

<Warning>
  Primer's Web SDK must be loaded first on the page before the FunnelFox Billing SDK.
</Warning>

<Tabs>
  <Tab title="CDN">
    Include Primer's Headless Checkout scripts and styles, then include the FunnelFox Billing SDK script:

    ```html theme={null}
    <!-- 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/billing@0.6.4/dist/funnelfox-billing.min.js"></script>
    ```
  </Tab>

  <Tab title="NPM">
    Install the SDK from npm (along with Primer's checkout library):

    ```bash theme={null}
    npm install @funnelfox/billing @primer-io/checkout-web
    ```

    This will add the FunnelFox Billing SDK and the Primer SDK dependency to your project.
  </Tab>
</Tabs>

### 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:

```javascript theme={null}
import { createCheckout } from '@funnelfox/billing';

await createCheckout({
  orgId: 'your-org-id',
  priceId: 'price_123',
  customer: {
    externalId: 'user_456',
    email: 'user@example.com',
  },
  container: '#checkout-container',
});
```

**Required parameters:**

<ParamField body="orgId" type="string" required>
  Your [organization's ID](https://app.funnelfox.com/integrations/billing) (required for all operations). Must be provided either globally in [configure()](/develop/configure) or in each API call.
</ParamField>

<ParamField body="priceId" type="string" required>
  The price identifier for the subscription or product.
</ParamField>

<ParamField body="customer" type="object" required>
  Customer information (requires `externalId` and `email`).
</ParamField>

<ParamField body="container" type="string" required>
  A CSS selector for the DOM element where the checkout form will be mounted.
</ParamField>

After calling `createCheckout()`, the Primer-powered checkout form will appear in the specified container, ready for the user to complete payment.

<Tip>
  Learn about all available [createCheckout](/develop/create-checkout) parameters, including optional callbacks and customization options.
</Tip>