Access a customer’s state and use it to display information in your React app
The useCustomer
hook provides access to customer data and related operations. You can use it from your frontend to retrieve customer information, manage loading states, and create entities.
To use Autumn’s React hooks, you should set up the autumnHandler
in your
backend and the <AutumnProvider />
in your frontend, as described in the
quickstart guide. This
gives the hooks access to the customerId making the request.
Array of additional data to include in the customer response. Options may
include invoices
, trials_used
or rewards
.
customer
The customer object containing all customer data.
attach()
Opens a checkout URL for the user to make a payment. If the payment method already exists, a payment confirmation dialog (AttachDialog) will be opened.
You can override the default dialog by passing in a dialog
prop, or disable it by passing in disableDialog: true
into <AutumnProvider />
.
Check out the billing flows page to see how to handle upgrade/downgrade confirmation flows.
Parameters
The ID of the product to attach.
A dialog that pops up to confirm the purchase (eg, for upgrades/downgrades). See the billing flows page.
The ID of the entity (eg, user seat) to attach the product to.
Array of feature options to configure for the attachment. Each option contains
featureId
(string) and quantity
(number).
Array of additional product IDs to attach simultaneously.
Whether to disable free trials for this product. Only applicable if the product has a free trial.
URL to redirect to after successful attachment/checkout.
Additional metadata to pass onto Stripe.
Whether to force the checkout flow even if the payment method already exists. Not available for upgrades/downgrades.
Whether to open the checkout URL in a new tab.
allowed
Check if a user has access to a specific feature or product. This will be read from the customer
state object on the frontend (so no API call is made).
Parameters
The ID of the feature to check access for.
The ID of the product to check access for.
check()
Check if a user has access to a specific feature or product. This will make an API call to Autumn to check access. You can use this to always get the most up-to-date usage data.
Parameters
The ID of the feature to check access for.
The ID of the product to check access for.
A dialog that pops up to act as a paywall (eg, when a feature runs out). See the billing flows page.
The ID of the entity (customer/user) to check access for.
The required balance/usage amount to check against.
Whether to send an event when checking access.
Return preview data to display to the user. Using this with a featureID
will
return paywall data, and using it with a productId
will return
upgrade/downgrade data.
track()
Track usage events for features or custom analytics.
Parameters
The ID of the feature to track usage for.
Custom event name for tracking.
The ID of the entity (customer/user) to track usage for.
The value/quantity to track (e.g., number of API calls, storage used).
Unique key to prevent duplicate tracking events.
openBillingPortal()
Open the billing portal for customers to manage their subscriptions, payment methods, and billing information.
Parameters
URL to redirect to when the customer exits the billing portal.
cancel()
Cancel a product or subscription for a user/entity.
Parameters
The ID of the product to cancel.
Whether to cancel the product immediately. If false, the product will be cancelled at the end of the billing cycle.
The ID of the entity (customer/user) to cancel the product for.
refetch
Function to manually refetch the customer
data, eg when updating a customer’s usage or balance to display.
createEntity
Function to create one or more entities for the customer.
Parameters
The ID of the entity to create.
Display name for the entity.
The feature ID for the entity being created. Must be a continuous_use
feature.
isLoading
Boolean indicating whether the customer data is currently being fetched.
error
Any error that occurred while fetching customer data.