Be sure to check out Linking Stripe Customers to learn more about how to identify Stripe customers with your own internal customer ID.
Evaluating access for a single feature
- Boolean features
- Limit features
Copy
import { useFeatureAccess } from "priceos/react";
import type { MyFeatures } from "./priceos.types";
export function PrioritySupportButton() {
const { hasAccess, isLoading } = useFeatureAccess<MyFeatures>("priority_support");
const onClick = () => {
if (!hasAccess){
// Customer does not have access
}
// Allow action
}
if (isLoading) return <div>Loading...</div>;
return (
<button onClick={onClick}>
Contact support
</button>
);
}
usage will be included if you’re using PriceOS to track usage for that feature.Copy
import { useFeatureAccess } from "priceos/react";
import type { MyFeatures } from "./priceos.types";
export function CreateNewButton() {
const {
hasAccess,
usage,
limit,
isLoading
} = useFeatureAccess<MyFeatures>("credits");
const onClick = () => {
if (!hasAccess){
// Customer does not have access
}
// If using PriceOS to track usage...
if (usage?.hasReachedLimit){
// Customer has hit usage limit
}
// If using your own system to track usage...
if (currentUsage >= limit){
// Customer has hit usage limit
}
}
return (
<button onClick={onClick}>
Create new
</button>
);
}
The
hasAccess field indicates whether the customer has access to the feature in general. It does not indicate that the usage limit has been reached. Use the usage.hasReachedLimit field for that.Evaluate access for all features
- Boolean features
- Limit features
Boolean features are simple on/off checks using
hasAccess.Copy
import { useFeatureAccess } from "priceos/react";
import type { MyFeatures } from "./priceos.types";
export function PrioritySupportButton() {
const { featureAccess, isLoading } = useFeatureAccess<MyFeatures>();
const onClick = () => {
const hasAccess = featureAccess.priority_support.hasAccess;
if (hasAccess){
// Allow action
}
}
if (isLoading) return <div>Loading...</div>;
return <button onClick={onClick}>Contact support</button>;
}
Limit features return usage data and the current limit window.
Copy
import { useFeatureAccess } from "priceos/react";
import type { MyFeatures } from "./priceos.types";
export function CreateNewButton() {
const { featureAccess, isLoading } = useFeatureAccess<MyFeatures>();
const onClick = () => {
const { hasAccess, usage, limit } = featureAccess.credits ?? {}
if (!hasAccess){
// Customer does not have access
}
// If using PriceOS to track usage...
if (usage?.hasReachedLimit){
// Customer has hit usage limit
}
// If using your own system to track usage...
if (currentUsage >= limit){
// Customer has hit usage limit
}
}
if (isLoading) return <div>Loading...</div>;
return <button onClick={onClick}>Create new</button>;
}
The
hasAccess field indicates whether the customer has access to the feature in general. It does not indicate that the usage limit has been reached. Use the usage.hasReachedLimit field for that.