Checkout

Checkout overlay

In contrast to using the hosted checkout link, you can leverage the checkout overlay. In short — it's a modal or pop-up that you can place on any website. Whether you're using WordPress, Webflow, Wix, etc. you can easily add your products.

You can also toggle on and off features from:

  • Store logo
  • Product media
  • Product description
  • 'Name' field
  • Discount code

Copy and paste the HTML embed code to add a "Buy" link to your web page. Style the link however you wish.

Use with JS Frameworks

The checkout overlay works by embedding a JavaScript lemon.js file in your HTML. When this script is loaded, it automatically initialises itself to listen for .lemonsqueezy-button clicks.

However, when using the checkout overlay with modern JavaScript frameworks such as React, Vue, etc. the lemon.js initialisation might happen before your component has been rendered.

In these cases, you should manually call the window.createLemonSqueezy(); method after the component has mounted. You can call this method as many times as is required.

React

useEffect(() => { window.createLemonSqueezy() }, [])

Vue

onMounted(() => { window.createLemonSqueezy() })

For more information on Lemon.js refer to the full Lemon.js docs.

Previous
Hosted checkout