Drop in Autumn’s components to handle upgrades, downgrades, paywalls etc
productDetails
prop to add information to the pricing card contents.
React
/components
directory, under a /autumn
folder.
productDetails
, which can be used to pass in content that can override the default contents (which are generated from your Autumn products). The example below was used to render the screenshot above.
You can choose which products should be displayed, and what items each card should have. The items array can either take an object with primaryText
and secondaryText
properties, or a string with the featureId
, which will just take the item from Autumn’s default contents.
/components
directory, under a /autumn
folder.
attach-dialog
component to the attach()
hook. This allows Autumn to automatically open the attach dialog when they want to change their active product. The dialog will open if:
attach-dialog
, a @/lib/autumn/attach-content.tsx
file is also installed. This file contains the dialog texts for each scenario
(returned from the attach
function), which you can customize how you want.
check-dialog
component in your /components
directory, under a /autumn
folder.
check-dialog
component to the check
function (exported from the useCustomer
hook).
check()
function, Autumn will automatically pass in the withPreview: true
parameter. If data.allowed: false
is returned for the feature, the paywall will open with the following details:
check({withPreview: true})
call can return a preview
object that contains a scenario
enum, which is used to control the dialog’s contents. It can be one of the following:
Scenario | Description |
---|---|
usage_limit | The customer has hit a usage limit for the feature |
feature_flag | The customer doesn’t have access to the feature |
preview
object also contains a products
array, which contains the products that the customer can purchase to access the feature.
When the check-dialog
component is installed, a /lib/autumn/check-content.tsx
file is also installed. This file contains the dialog texts for each scenario (depending on the available products), which you can customize how you want.