Handling Events with Lemon.js

Handling overlay events with Lemon.js is easy-peasy. Overlay events are triggered by actions from within the Checkout and Payment Method Update overlays themselves.


You can listen to the overlay events easily with a few lines of code. You’ll need to make sure you’ve got the Lemon.js library installed on your page first.

Every time an event is fired from the overlay,

LemonSqueezy.Setup({
  eventHandler: (event) => {
    // Do whatever you want with this event data
  }
})

You will be able to determine which event happened by checking the value in event.event.

{
  event: "PaymentMethodUpdate.Mounted"
}

Checkout.Success events will be passed an Order object in event.data, which you can use to access or save data immediately after purchase.

{
  "event": "Checkout.Success",
  "data": {
    "type": "orders",
    "id": "1",
    "attributes": {
      "store_id": 1,
      "customer_id": 1,
      ...
    },
    ...
  }
}

Available events

The following events are available in Lemon.js:

EventDescription
Checkout.SuccessCheckout was successful
PaymentMethodUpdate.MountedPayment Method Update Overlay has been loaded
PaymentMethodUpdate.ClosedPayment Method Update Overlay has been closed
PaymentMethodUpdate.UpdatedPayment method has been updated successfully

Was this page helpful?