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:
Or you can open any checkout URL using the
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.
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:
|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
The object passed to the handler contains an
Checkout.Success events also get passed an Order object in
data so you have instant access to the order that was just created.
To find out all the things possible with Lemon.js read the full Lemon.js documentation.