Billing Widget

<div data-cuprice-billing="YOUR_SHARE_ID"></div>
<script src="https://app.cuprice.io/embed.js" async></script>

document.addEventListener("cuprice:plan-selected", function(e) {
  console.log(e.detail);
  // {
  //   planId: 42,
  //   planName: "Growth",
  //   billingInterval: "month",  // or "year"
  //   shareId: "abc123"
  // }
});

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;
      // Start your checkout flow here
      console.log(`Selected: ${planName} (${billingInterval})`);
    };
    document.addEventListener("cuprice:plan-selected", handlePlan);

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

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

<template>
  <div data-cuprice-billing="YOUR_SHARE_ID"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";

let script;
const handlePlan = (e) => {
  console.log("Plan selected:", e.detail);
};

onMounted(() => {
  script = document.createElement("script");
  script.src = "https://app.cuprice.io/embed.js";
  script.async = true;
  document.body.appendChild(script);
  document.addEventListener("cuprice:plan-selected", handlePlan);
});

onUnmounted(() => {
  if (script) document.body.removeChild(script);
  document.removeEventListener("cuprice:plan-selected", handlePlan);
  if (window.Cuprice) window.Cuprice.destroy();
});
</script>

https://app.cuprice.io/share/YOUR_SHARE_ID/billing