Using Lemon.js: Lemon Squeezy

Lemon.js is a small package created to make it easy to interact with Lemon Squeezy on your website's frontend.

Add the script to your app

You can add the script using a simple <script> tag into the head or bottom of the body of your page.

Buy buttons and checkout overlays

With Lemon.js on your page, you can make checkout URLs automatically open in our checkout overlay by adding our lemonsqueezy-button CSS class to your links:

Buy this

Or you can open any checkout URL using the LemonSqueezy.Url.Open() method:

const checkoutUrl = 'https://my-store.lemonsqueezy.com/checkout/custom/...'; LemonSqueezy.Url.Open(checkoutUrl);

This is great if you're generating custom checkout URLs on-the-fly using the API.

Opening other overlays

You can also load the update payment method URLs in an overlay using Lemon.js, creating a much more seamless experience inside your app.

const updatePaymentMethodUrl = 'https://app.lemonsqueezy.com/subscription/.../payment-details...'; LemonSqueezy.Url.Open(updatePaymentMethodUrl);

Handling events

When a Lemon.js overlay is in use (either a checkout or an update payment method form), you can listen for certain events that happen during the form flow.

These events are:

Event	Description
Checkout.Success	Checkout was successful
PaymentMethodUpdate.Mounted	Payment Method Update Overlay has been loaded
PaymentMethodUpdate.Closed	Payment Method Update Overlay has been closed
PaymentMethodUpdate.Updated	Payment method has been updated successfully

You can listen for these events by specifying an eventHandler option in a LemonSqueezy.Setup() call.

LemonSqueezy.Setup({ eventHandler: (data) => { if (data.event == "PaymentMethodUpdate.Updated") { // Do something when the payment method has been updated } } })

The object passed to the handler contains an event.

{ event: "PaymentMethodUpdate.Closed" }

Checkout.Success events also get passed an Order object in data so you have instant access to the order that was just created.

{ event: "Checkout.Success", data: { "store_id": 1, "customer_id": 1, "identifier": "104e18a2-d755-4d4b-80c4-a6c1dcbe1c10", "order_number": 1, ... } }

Advanced usage

To find out all the things possible with Lemon.js read the full Lemon.js documentation.