Interactive testing environment for react-shared components
Current: Default
Display product pricing with support for sale prices, intervals, and flexible payment options.
Customize the Price properties and see the changes in real-time.
Common use cases and variations.
/Month
Complete list of props and their descriptions.
| Prop | Type | Default | Description |
|---|---|---|---|
| amount | number | undefined | Regular price amount |
| saleAmount | number | string | undefined | Sale price (shows original as strikethrough) |
| currency | string | 'USD' | Currency code for formatting |
| interval | string | undefined | Billing interval (e.g., 'month', 'year') |
| layout | 'default' | 'opaque' | 'stroke' | 'rounded' | 'border' | 'default' | Visual layout style |
| variant | 'default' | 'pdp' | 'default' | Display variant (pdp = product detail page with larger text) |
| stanFlexiblePaymentPrice | object | undefined | Flexible payment plan configuration |
| showFlexiblePrice | boolean | false | Show flexible payment option text |
| className | string | undefined | Additional CSS classes |
When saleAmount is provided, it displays prominently with the original amount shown as strikethrough.
Enable installment payment options by providing stanFlexiblePaymentPrice configuration with enabled, amount, duration, and interval.
The component respects theme configuration for layout through the useThemeLayout hook. Some themes may display custom icons.
Prices are automatically formatted based on the currency prop using the formatCurrency utility function.