How to use Lemon Squeezy as a payment in next.js

import Script from "next/script"

export default function LemonPay({handler}) {
    function lemonLoaded() {
        window.createLemonSqueezy()
        LemonSqueezy.Setup({
            eventHandler: (event) => {
                if (handler) {
                    handler(event)
                }
            }
        })
    }
    return (
        <Script src="https://app.lemonsqueezy.com/js/lemon.js" onLoad={lemonLoaded}></Script>
    )
}

'use client'

import { WalletCards } from "lucide-react"

const lemonStore = process.env.NEXT_PUBLIC_LEMONSQUEEZY_STORE
const lemonProduct = process.env.NEXT_PUBLIC_LEMONSQUEEZY_VARIANT_ID

export default function Profile({ }) {
    function buy() {
        const params = new URLSearchParams()
        params.set('checkout[email]', 'user@example.com')
        params.set('checkout[custom][type]', 'gpt2api')
        params.set('checkout[custom][value]', '600000')
        params.set('checkout[custom][email]', 'user@example.com')
        const checkoutUrl = `https://${lemonStore}.lemonsqueezy.com/checkout/buy/${lemonProduct}?` + params.toString()
        LemonSqueezy.Url.Open(checkoutUrl)
    }
    function lemonHanlder(evt) {
        console.info('lemon event', evt)
        if (evt.event === 'Checkout.Success') {
            // do something after checkout success.
        }
    }
    return (
        <>
            <div className="flex flex-col gap-4">
                <div className="w-full" onClick={buy}>
                    <WalletCards className="mr-1 w-4 h-4" /><span>Checkout</span>
                </div>
                <LemonPay handler={lemonHanlder} />
            </div>
        </>
    )
}