yarn add @heliofi/checkout-react
# or npm install @heliofi/checkout-react
# or pnpm add @heliofi/checkout-react

import {HelioCheckout} from '@heliofi/checkout-react'

const helioConfig = {
    paylinkId: "6571e7cd4a2bee8095ee84da",
    amount: "5.99",
};

function YourCheckoutComponent() {
  return <HelioCheckout config={helioConfig} />;
}

// Framer metadata: defines how this component behaves in layout
// - Width is fixed (manually set in Framer)
// - Height adapts to content
// - Intrinsic size fallback if unset
// @framerSupportedLayoutWidth fixed
// @framerSupportedLayoutHeight auto
// @framerIntrinsicWidth 400
// @framerIntrinsicHeight 600

import { useEffect, useRef, useState } from "react"
import { addPropertyControls, ControlType } from "framer"

// Props accepted from the Framer UI (sidebar)
interface Props {
    paylinkId: string // User-defined Paylink ID from MoonPay Commerce
}

// Declare a global `window.helioCheckout` interface to avoid TypeScript errors
declare global {
    interface Window {
        helioCheckout: (element: HTMLElement, config: any) => void
    }
}

// Main React component exported to Framer
export default function MoonPayCheckout({
    paylinkId = "66327978b90031d7202d38cd", // default demo Paylink
}: Props) {
    // Used just to differentiate instances for debugging
    const [id] = useState(() => Math.random())
    console.log({ id })

    // Reference to the div where the MoonPay widget will mount
    const containerRef = useRef<HTMLDivElement>(null)

    // Local loading/error state
    const [isLoading, setIsLoading] = useState(true)
    const [error, setError] = useState<string | null>(null)

    // Effect hook: inject MoonPay’s script and initialize the widget
    useEffect(() => {
        // Guard against non-browser environments or missing ref
        if (!containerRef.current || typeof window === "undefined") return

        // Create and configure <script> tag to load MoonPay's embed script
        const script = document.createElement("script")
        script.type = "module"
        script.crossOrigin = "anonymous"
        script.src = "https://embed.hel.io/assets/index-v1.js"

        // Once script is loaded, initialize the checkout widget
        script.onload = () => {
            if (window.helioCheckout && containerRef.current) {
                window.helioCheckout(containerRef.current, {
                    paylinkId, // The configured paylink from Framer
                    display: "button", // Display mode (can be "button", "new-tab" or "inline")
                    theme: {
                        themeMode: "dark", // Force dark theme
                    },
                })
                setIsLoading(false) // Done loading
            }
        }

        // Handle error if the script fails to load
        script.onerror = () => {
            setError("Failed to load MoonPay script")
            setIsLoading(false)
        }

        // Inject the script into the page
        document.head.appendChild(script)

        // Cleanup on component unmount
        return () => {
            if (containerRef.current) {
                containerRef.current.innerHTML = ""
            }
        }
    }, [paylinkId]) // Re-run if paylinkId changes

    // Render error state if script failed
    if (error) {
        return (
            <div className="hel-flex hel-items-center hel-justify-center hel-h-full hel-p-4">
                <div className="hel-text-red-500">{error}</div>
            </div>
        )
    }

    // Render the widget container and loading state
    return (
        <div className="hel-w-full hel-h-full hel-relative">
            {/* Show loading message until widget loads */}
            {isLoading && (
                <div className="hel-absolute hel-inset-0 hel-flex hel-items-center hel-justify-center">
                    <div className="hel-text-gray-500">
                        Loading MoonPay Checkout...
                    </div>
                </div>
            )}
            {/* Mount MoonPay widget here */}
            <div
                ref={containerRef}
                id="moonPayCheckoutContainer"
                className="hel-w-full hel-h-full"
            />
        </div>
    )
}

// Expose Paylink ID to the Framer UI sidebar
addPropertyControls(MoonPayCheckout, {
    paylinkId: {
        type: ControlType.String,
        title: "Paylink ID",
        defaultValue: "66327978b90031d7202d38cd", // Default/fallback Paylink
    },
})