Lemon Squeezy

Use Lemon Squeezy in your Nuxt app.

Lemon Squeezy is a popular payment gateway that allows you to accept payments online.

Nuxt Scripts provides a useScriptLemonSqueezy composable and a headless Facade Component ScriptLemonSqueezy component to interact with lemon squeezy.

ScriptLemonSqueezy

The ScriptLemonSqueezy component is headless Facade Component wrapping the useScriptLemonSqueezy composable, providing a simple, performance optimized way to load Lemon Squeezy in your Nuxt app.

<template>
<ScriptLemonSqueezy>
  <NuxtLink href="https://harlantest.lemonsqueezy.com/buy/52a40427-36d2-4450-a514-ae80d9e1a333?embed=1">
    Buy me - $9.99
  </NuxtLink>
</ScriptLemonSqueezy>
</template>

It works by injecting a .lemonsqueezy-button class onto any a tags within the component then loading in the Lemon Squeezy script with the visibility Element Event Trigger.

Demo

Lemon Squeezy is not loaded
It loads in when the DOM element is within the viewport.

Component API

See the Facade Component API for full props, events, and slots.

Events

lemon-squeezy-event

Events emitted by the Lemon.js script are forwarded through this event. The payload is an object with an event key and a data key.

export type LemonSqueezyEventPayload = { event: 'Checkout.Success', data: Record<string, any> }
  & { event: 'Checkout.ViewCart', data: Record<string, any> }
  & { event: 'GA.ViewCart', data: Record<string, any> }
  & { event: 'PaymentMethodUpdate.Mounted' }
  & { event: 'PaymentMethodUpdate.Closed' }
  & { event: 'PaymentMethodUpdate.Updated' }
  & { event: string }

useScriptLemonSqueezy

The useScriptLemonSqueezy composable lets you have fine-grain control over the Lemon Squeezy SDK. It provides a way to load the Lemon Squeezy SDK and interact with it programmatically.

export function useScriptLemonSqueezy<T extends LemonSqueezyApi>(_options?: LemonSqueezyInput) {}

Please follow the Registry Scripts guide to learn more about advanced usage.

LemonSqueezyApi

export interface LemonSqueezyApi {
  /**
   * Initialises Lemon.js on your page.
   * @param options - An object with a single property, eventHandler, which is a function that will be called when Lemon.js emits an event.
   */
  Setup: (options: {
    eventHandler: (event: { event: 'Checkout.Success', data: Record<string, any> }
      & { event: 'Checkout.ViewCart', data: Record<string, any> }
      & { event: 'GA.ViewCart', data: Record<string, any> }
      & { event: 'PaymentMethodUpdate.Mounted' }
      & { event: 'PaymentMethodUpdate.Closed' }
      & { event: 'PaymentMethodUpdate.Updated' }
      & { event: string }
    ) => void
  }) => void
  /**
   * Refreshes `lemonsqueezy-button` listeners on the page.
   */
  Refresh: () => void

  Url: {
    /**
     * Opens a given Lemon Squeezy URL, typically these are Checkout or Payment Details Update overlays.
     * @param url - The URL to open.
     */
    Open: (url: string) => void

    /**
     * Closes the current opened Lemon Squeezy overlay checkout window.
     */
    Close: () => void
  }
  Affiliate: {
    /**
     * Retrieve the affiliate tracking ID
     */
    GetID: () => string

    /**
     * Append the affiliate tracking parameter to the given URL
     * @param url - The URL to append the affiliate tracking parameter to.
     */
    Build: (url: string) => string
  }
  Loader: {
    /**
     * Show the Lemon.js loader.
     */
    Show: () => void

    /**
     * Hide the Lemon.js loader.
     */
    Hide: () => void
  }
}

Example

Using the Lemon Squeezy SDK with a payment link.

<script setup lang="ts">
const { proxy } = useScriptLemonSqueezy()
onMounted(() => {
  proxy.Setup()
})
</script>

<template>
  <a href="https://harlantest.lemonsqueezy.com/buy/52a40427-36d2-4450-a514-ae80d9e1a333?embed=1" class="lemonsqueezy-button" />
</template>

Hotjar

Use Hotjar in your Nuxt app.

Stripe

Use Stripe in your Nuxt app.