> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cuprice.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Billing Widget

> Embed a subscription management widget for your customers

The billing widget lets your customers view plans, compare features, and select a subscription — all from your own website.

## Quick Start

```html theme={null}
<div data-cuprice-billing="YOUR_SHARE_ID"></div>
<script src="https://app.cuprice.io/embed.js" async></script>
```

## How it works

1. The widget loads your project's plans from the Cuprice API
2. Customers see plan names, prices, features, and a Monthly/Annual toggle
3. When a customer selects a plan, a `cuprice:plan-selected` event fires
4. You handle the event to start your checkout flow

## Listening for events

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

## React example

```tsx theme={null}
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" />;
}
```

## Vue example

```vue theme={null}
<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>
```

## Standalone mode

The billing widget also works as a standalone page. When a customer picks a plan there, Cuprice sends them to the checkout link you set for the project:

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

## Differences from pricing widget

| Feature | Pricing (`data-cuprice-id`) | Billing (`data-cuprice-billing`) |
| - | - | - |
| Shows plan cards with full design | Yes | No (compact list) |
| Custom CSS / themes | Yes | No (clean default) |
| Checkout | Hands off to your checkout link | Hands off to your checkout link, or fires an event you handle |
| Monthly/Annual toggle | Yes | Yes |
| Feature comparison | Yes | Yes (expandable) |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.