Interactive testing environment for react-shared components
Current: Default
A one-time offer component for upselling additional products during checkout.
Current State: Unchecked
Bonus Training Module for just $4,900
Premium Support Package for just $9,900
Advanced Course Bundle for just $9,900($19,900 Value)
Exclusive Templates for just €2,900
Lifetime Access for just £14,900
Quick Start Guide PDF for just $500
1-on-1 Coaching Session for just $29,900($49,900 Value)
| Prop | Type | Default | Description |
|---|---|---|---|
secondBuiltInProduct | OrderBumpProduct | Required | Product data for the upsell offer |
user | OrderBumpUser | Required | User data including currency preference |
id | string | undefined | Custom ID for the checkbox (auto-generated if not provided) |
isPageProcessing | boolean | false | Disables the checkbox during processing |
className | string | undefined | Additional CSS classes |
onStateChanged | (checked: boolean) => void | undefined | Callback when checkbox state changes |
interface OrderBumpProduct {
data: {
product: {
title: string;
price: Price;
};
currency_override?: {
enabled?: boolean;
currency?: string;
};
};
}
interface OrderBumpUser {
data: {
currency?: string;
};
}
interface Price {
amount: number;
sale_amount: number;
sale_amount_available: boolean;
}Currency Logic: The component first checks for currency_override in the product data. If enabled, it uses that currency; otherwise, it falls back to the user's currency preference.
Sale Pricing: When sale_amount_available is true, the component displays both the sale price and the original price with a strikethrough.
Translations: The component uses translation keys for "One Time Offer", "Yes", and the offer text. Make sure these are defined in your locale files.
State Management: Use the onStateChanged callback to track when users opt-in to the upsell and update your cart/checkout accordingly.
Processing State: Set isPageProcessing to true during checkout submission to prevent users from changing their selection.
Best Practices: Place this component strategically in your checkout flow, typically after the main product selection but before payment details.