Opening overlays: Lemon Squeezy

Programmatically opening overlays is really easy with Lemon.js. Once you've included our JavaScript library, you can call the Url.Open() method to open an overlay link.

Generating & opening a custom checkout

Generating a custom checkout via the Checkouts API is simple, make the call with the necessary options and you'll receive a url in the Checkout object response body.

{ ... "data": { "type": "checkouts", "id": "...", "attributes": { ... "url": "https://my-store.lemonsqueezy.com/checkout/custom/..." }, ... } }

Now you'll want to pass this URL to your frontend where it can be used by Lemon.js. You can open the custom checkout with:

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

You can call the Url.Open() method anywhere in your frontend, and the overlay will display on top of the page.

Updating payment details overlay

In many applications you will want your customers to be able to update their own payment and billing information within the confines of your own app. This is easy peasy with Lemon.js.

First, you'll need to retrieve a subscription via the Subscriptions API. The response will provide you with a customer-facing signed URL, which is valid for 24 hours.

{ {...}, "data": { {...}, "attributes": { ... "urls": { "update_payment_method": "https://my-store.lemonsqueezy.com/subscription/.../payment-details...", ... }, ... }, {...} } }

Opening this URL via the Lemon.js Url.Open() Method allows you to open this overlay from anywhere inside your app.

const checkoutUrl = 'https://my-store.lemonsqueezy.com/subscription/.../payment-details...'; LemonSqueezy.Url.Open(checkoutUrl);

Anyone who has access to the update_payment_method URL will be able to modify the payment information for this subscription. Make sure you only provide this URL to the appropriate customer.