支付
Lemon Squeezy
在您的 Nuxt 应用中使用 Lemon Squeezy。
Lemon Squeezy 是一款流行的支付网关，允许您在线接受付款。
Nuxt Scripts 提供了一个 useScriptLemonSqueezy 可组合函数和一个无头 Facade 组件 ScriptLemonSqueezy 组件来与 lemon squeezy 进行交互。
ScriptLemonSqueezy
ScriptLemonSqueezy 组件是一个无头 Facade 组件，包装了 useScriptLemonSqueezy 可组合函数，提供了一种简单、性能优化的方式来在您的 Nuxt 应用中加载 Lemon Squeezy。
<template>
<ScriptLemonSqueezy>
<NuxtLink href="https://harlantest.lemonsqueezy.com/buy/52a40427-36d2-4450-a514-ae80d9e1a333?embed=1">
Buy me - $9.99
</NuxtLink>
</ScriptLemonSqueezy>
</template>
它的工作原理是在组件中的任何 a 标签上注入一个 .lemonsqueezy-button 类，然后使用 visibility 元素事件触发器 加载 Lemon Squeezy 脚本。
演示
未加载 Lemon Squeezy
当 DOM 元素位于视窗内时，它会加载。
组件 API
查看 Facade 组件 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) {}
请遵循 注册表脚本 指南以了解有关高级用法的更多信息。
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
}
}
示例
使用 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>