Implementation:Helicone Helicone UseUpgradePlan
| Knowledge Sources | |
|---|---|
| Domains | Billing, Subscription Management |
| Last Updated | 2026-02-14 06:32 GMT |
Overview
React hook that initiates Stripe-based plan upgrades to the team bundle, handling both new and existing customer flows.
Description
The useUpgradePlan hook provides a streamlined interface for upgrading an organization's subscription plan via Stripe checkout. It first fetches the current subscription status using GET /v1/stripe/subscription to determine whether the organization is a new or existing (canceled) customer. Based on this status, it selects the appropriate Jawn endpoint:
- For existing customers with a canceled subscription:
/v1/stripe/subscription/existing-customer/upgrade-to-team-bundle - For new customers:
/v1/stripe/subscription/new-customer/upgrade-to-team-bundle
The handleUpgradeTeam function triggers the mutation and opens the returned Stripe checkout URL in a new browser tab for payment processing.
Usage
Use this hook in upgrade buttons, pricing modals, and feature gate dialogs where users need to upgrade to a paid plan. It handles the full flow from subscription status detection through Stripe redirect.
Code Reference
Source Location
- Repository: Helicone
- File: web/hooks/useUpgradePlan.ts
Signature
export function useUpgradePlan(): {
handleUpgradeTeam: () => Promise<boolean>;
isLoading: boolean;
};
Import
import { useUpgradePlan } from "@/hooks/useUpgradePlan";
I/O Contract
Parameters
This hook takes no parameters. It reads the current organization from the useOrg context.
Return Value
| Property | Type | Description |
|---|---|---|
| handleUpgradeTeam | () => Promise<boolean> |
Initiates the Stripe checkout flow and opens the checkout URL in a new tab; always returns true
|
| isLoading | boolean |
Whether the upgrade mutation is currently in progress |
Internal Queries
| Query Key | Endpoint | Purpose |
|---|---|---|
| ["subscription", orgId] | GET /v1/stripe/subscription |
Fetches current subscription status to determine customer type |
Usage Examples
import { useUpgradePlan } from "@/hooks/useUpgradePlan";
function UpgradeButton() {
const { handleUpgradeTeam, isLoading } = useUpgradePlan();
return (
<button onClick={handleUpgradeTeam} disabled={isLoading}>
{isLoading ? "Redirecting..." : "Upgrade to Team"}
</button>
);
}