Lemon Squeezy

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

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>