Using Lemon.js

Add the script to your app

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.

<script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>

Buy buttons and checkout overlays

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

<a class="lemonsqueezy-button" href="https://[STORE].lemonsqueezy.com/checkout/buy/...">
    Buy this
</a>

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

const checkoutUrl = 'https://[STORE].lemonsqueezy.com/checkout/custom/...';
LemonSqueezy.Url.Open(checkoutUrl);

This is useful 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:

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,
    ...
  }
}