Lemon Squeezy

在你的 Nuxt 应用中使用 Lemon Squeezy。

Lemon Squeezy 是一个流行的支付网关，允许你在线接受付款。

Nuxt Scripts 提供了一个 useScriptLemonSqueezy 组合式函数和一个无头门面组件 ScriptLemonSqueezy 组件，以便与 Lemon Squeezy 交互。

ScriptLemonSqueezy

ScriptLemonSqueezy 组件是一个无头的门面组件，封装了 useScriptLemonSqueezy 组合式函数，提供了一种简单且性能优化的方式在你的 Nuxt 应用中加载 Lemon Squeezy。

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

它通过向组件内的所有 a 标签注入 .lemonsqueezy-button 类名，然后使用 visibility 元素事件触发器 来加载 Lemon Squeezy 脚本进行工作。

演示

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

组件 API

完整的 props、事件和插槽请参阅 门面组件 API。

事件

lemon-squeezy-event

由 Lemon.js 脚本发出的事件会通过此事件转发。负载是一个带有 event 和 data 键的对象。

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

useScriptLemonSqueezy 组合式函数让你可以更细粒度地控制 Lemon Squeezy SDK。它提供了一种加载 Lemon Squeezy SDK 并以编程方式与之交互的方式。

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

请参阅 Registry Scripts 指南以了解更多高级用法。

LemonSqueezyApi

export interface LemonSqueezyApi {
  /**
   * 在页面上初始化 Lemon.js。
   * @param options - 一个带有单个属性 eventHandler 的对象，当 Lemon.js 发出事件时会调用该函数。
   */
  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
  /**
   * 刷新页面上所有 `lemonsqueezy-button` 监听器。
   */
  Refresh: () => void

  Url: {
    /**
     * 打开指定的 Lemon Squeezy URL，通常是结账或支付详情更新的覆盖层。
     * @param url - 要打开的 URL。
     */
    Open: (url: string) => void

    /**
     * 关闭当前打开的 Lemon Squeezy 结账覆盖窗口。
     */
    Close: () => void
  }
  Affiliate: {
    /**
     * 获取联盟追踪 ID
     */
    GetID: () => string

    /**
     * 向指定 URL 添加联盟追踪参数
     * @param url - 要添加联盟追踪参数的 URL。
     */
    Build: (url: string) => string
  }
  Loader: {
    /**
     * 显示 Lemon.js 加载器。
     */
    Show: () => void

    /**
     * 隐藏 Lemon.js 加载器。
     */
    Hide: () => void
  }
}

示例

使用 Lemon Squeezy SDK 和支付链接。

<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

在你的 Nuxt 应用中使用 Hotjar。

PayPal

在您的 Nuxt 应用中使用 PayPal。