React

import { useEffect } from "react";

export default function Pricing() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://app.cuprice.io/embed.js";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
      if (window.Cuprice) window.Cuprice.destroy();
    };
  }, []);

  return <div data-cuprice-id="YOUR_SHARE_ID" />;
}

import { useEffect } from "react";

export default function Billing() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://app.cuprice.io/embed.js";
    script.async = true;
    document.body.appendChild(script);

    const handlePlan = (e: CustomEvent) => {
      const { planId, planName, billingInterval } = e.detail;
      console.log(`Selected: ${planName} (${billingInterval})`);
    };
    document.addEventListener("cuprice:plan-selected", handlePlan as EventListener);

    return () => {
      document.body.removeChild(script);
      document.removeEventListener("cuprice:plan-selected", handlePlan as EventListener);
      if (window.Cuprice) window.Cuprice.destroy();
    };
  }, []);

  return <div data-cuprice-billing="YOUR_SHARE_ID" />;
}