Freemius Checkout JS SDK Installation

There are two primary ways to include the Checkout JS SDK in your project:

Using the hosted CDN

This is the quickest and recommended way to get started. It requires no build steps and you automatically get the latest version of the SDK.

Start by including the script tag in your HTML:

<script
  type="text/javascript"
  src="https://checkout.freemius.com/js/v1/"
></script>

The script exposes a global FS.Checkout class that you can instantiate.

const checkout = new FS.Checkout({
  product_id: '1234',
});

Loading the script asynchronously

You can load the script using the async or defer attribute on the script tag.

<script
  type="text/javascript"
  src="https://checkout.freemius.com/js/v1/"
  async
  defer
></script>

This ensures that the script does not block HTML parsing, improving page-load performance.

note

With asynchronous loading, any API calls must be made only after the script finishes executing. To ensure this, hook into the load event of window or use window.onload.

Example using the async or defer attribute

<script type="text/javascript">
  window.addEventListener('load', () => {
    const checkout = new FS.Checkout({
      product_id: '1234',
    });

    checkout.open({
      // plan
      plan_id: 9999,
      // number of sites
      licenses: 1,
      // billing cycles
      billing_cycle: 'annual',
    });
  });
</script>

Bundling using the npm package

Install the official npm package, and use a bundler such as Vite or Webpack to manage your application.

npm

npm i @freemius/checkout

Yarn

yarn add @freemius/checkout

pnpm

pnpm add @freemius/checkout

Bun

bun add @freemius/checkout

The main class exported by the package is Checkout.

import { Checkout } from 'freemius-checkout-js';

// instantiate
const checkout = new Checkout({
  product_id: '0001',
});

---

To learn how to use the SDK, proceed to the Usage Guide.