What is Lemon.js?: Lemon Squeezy

Lemon.js is our simple JavaScript library for bringing Lemon Squeezy functionality right into your application. You can get started using Lemon.js by embedding our tiny (2.3kB) library via our CDN into the head or body of your page.

We're constantly pushing new updates to bring new functionality and a better developer experience. You can help us improve the experience by chatting to us about your experience.

By default, any anchor tag <a> on the page with the class lemonsqueezy-button assigned will, when clicked, open a Lemon Squeezy link. This makes it easy to open a Lemon Squeezy checkout overlay without having to write any JavaScript.

Buy My Amazing Product

Please don't self-host Lemon.js, you may miss out on new features and important security patches.

Advanced usage

As a developer, you may want to tightly integrate Lemon Squeezy within the various flows of your application, such as during the registration process.

Lemon.js exposes optional functionality you can use within your application:

Pretty soon, we'll be introducing:

Generating checkouts on the fly (soon)
Grabbing localised pricing data (soon)
And much more!

Loading Lemon.js in Next.js

To optimize the loading of the script, use the Next.js inbuilt next/script component. Setting the strategy to lazyOnload will only load and execute when that page (or group of pages) is opened in the browser.

Script component with lazyOnload strategy can be placed inside of any page or layout.

import Script from 'next/script' export default function Page() { return ( <> ) }

Using with TypeScript

To enable code completion in TypeScript for Lemon.js, declare Lemon.js methods in a shims.d.ts file, ensuring TypeScript recognition, for example:

// shims.d.ts interface Window { createLemonSqueezy: () => void LemonSqueezy: { /** * Initialises Lemon.js on your page. * @param options - An object with a single property, eventHandler, which is a function that will be called when Lemon.js emits an event. */ Setup: (options: { eventHandler: (event: { event: string }) => void }) => void /** * Refreshes `lemonsqueezy-button` listeners on the page. */ Refresh: () => void Url: { /** * Opens a given Lemon Squeezy URL, typically these are Checkout or Payment Details Update overlays. * @param url - The URL to open. */ Open: (url: string) => void /** * Closes the current opened Lemon Squeezy overlay checkout window. */ Close: () => void } Affiliate: { /** * Retrieve the affiliate tracking ID */ GetID: () => string /** * Append the affiliate tracking parameter to the given URL * @param url - The URL to append the affiliate tracking parameter to. */ Build: (url: string) => string } } }

Default behaviour with JS Frameworks

The checkout overlay works by embedding a JavaScript lemon.js file in your HTML. When this script is loaded, it automatically initialises itself to listen for .lemonsqueezy-button clicks.

However, when using the checkout overlay with modern JavaScript frameworks such as React, Vue, etc. the lemon.js initialisation might happen before your component has been rendered.

In these cases, you should manually call the window.createLemonSqueezy(); method after the component has mounted. You can call this method as many times as is required.

React

useEffect(() => { window.createLemonSqueezy() }, [])

Vue

onMounted(() => { window.createLemonSqueezy() })