Opening Overlays with Lemon.js

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);