What is Lemon.js?
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.
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:
- Open Lemon Squeezy Checkout & Payment Method Update overlays
- Listen to & handle checkout & payment details overlay events
Pretty soon, we'll be introducing:
- Generating checkouts on the fly (soon)
- Grabbing localised pricing data (soon)
- And much more!
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.