Checkout Widget Improvements
We’re rolling out a set of powerful enhancements to the Checkout Widget, giving you more control over customization, behavior, and integration with your product’s purchasing flow.
🆕 What’s New
1. New Callback Support
You can now hook into key user interactions throughout the checkout flow using three new callbacks:
- onBillableFeatureChange - triggered when the value of plan's billable features (charges) changes
- onAddonChange - triggered when an add-on is added, removed, or updated
- onBeforeStepChange - invoked before the widget transitions between checkout steps
These callbacks give you deeper insight into user intent and allow for advanced analytics, validation, and UI coordination.
2. Add-on Visibility Configuration
The checkout widget now fully honors your add-on visibility rules.
You decide which add-ons are shown are shown to customers in Stigg widgets and the widget automatically enforces your configuration.
3. Support for Add-on Types
The widget now respects whether an add-on is:
- Single-instance (can be added once), or
- Multiple-instance (users can add multiple units)
This ensures that your packaging and purchasing rules are represented accurately in the UI.
4. Add-on Billing Period
The widget will now automatically hide add-ons that don't support the selected billing period.
5. Annual Prices in Summary
Prices in the summary will now appear in an annual format (e.g. $100.00 / year) when the selected plan only supports an annual billing period.
📦 Availability
These improvements are now available in the latest SDKs:
- React: v7.12.0
- Vue: v5.7.0
- Embed: v6.7.0