Components
The VioUI module provides a set of ready-to-use Jetpack Compose components for displaying products, managing the cart, and handling checkout.
Product Components
VioProductCard
A single product card that displays a product image, name, price and an add-to-cart button.
import live.vio.VioUI.Components.VioProductCard
VioProductCard(
product = product,
onAddToCart = { selectedProduct ->
// Handle add to cart
},
onProductClick = { selectedProduct ->
// Open product detail
}
)VioProductCarousel
A horizontally scrollable carousel of product cards. Fetches products automatically from a channel.
import live.vio.VioUI.Components.VioProductCarousel
VioProductCarousel(
channelId = "your-channel-id",
onProductClick = { product ->
// Handle product tap
}
)VioProductSlider
A horizontal product slider with optional pagination indicators.
import live.vio.VioUI.Components.VioProductSlider
VioProductSlider(
channelId = "your-channel-id",
showPagination = true
)VioProductBanner
A full-width product banner component, ideal for hero sections.
import live.vio.VioUI.Components.VioProductBanner
VioProductBanner(
channelId = "your-channel-id",
isCampaignGated = false,
showSponsor = true
)VioProductStore
A full product grid store view with cart support.
import live.vio.VioUI.Components.VioProductStore
VioProductStore(
channelId = "your-channel-id"
)Cart & Checkout Components
VioMarketSelector
A component that allows the user to select their shipping market.
import live.vio.VioUI.Components.compose.market.VioMarketSelector
VioMarketSelector(
cartManager = cartManager,
onSelected = { market ->
// Handle market selection
},
imageLoader = imageLoader
)VioFloatingCartIndicator
A floating button showing the current number of items in the cart.
import live.vio.VioUI.Components.VioFloatingCartIndicator
VioFloatingCartIndicator(
onClick = {
// Open checkout overlay
}
)VioCheckoutOverlay
Manages the full checkout flow as an overlay/modal.
import live.vio.VioUI.VioCheckoutOverlay
VioCheckoutOverlay(
cartManager = cartManager,
onBack = { showCheckout = false },
initialStep = null,
isCampaignGated = false
)VioGooglePayManager
Handles the integration with Google Pay for seamless checkout.
import live.vio.VioCore.managers.VioGooglePayManager
// Check availability
VioGooglePayManager.isGooglePayAvailable(activity) { isAvailable ->
// Update UI
}
// Request payment
val request = VioGooglePayManager.createPaymentDataRequest(
gateway = "stripe",
gatewayMerchantId = "pk_test_...",
price = "10.00",
currency = "USD"
)
VioGooglePayManager.launchGooglePay(activity, request)VioProductDetailOverlay
Displays full product details (images, description, variants) in a bottom sheet overlay.
import live.vio.VioUI.Components.VioProductDetailOverlay
VioProductDetailOverlay(
product = selectedProduct,
isVisible = showDetail,
onDismiss = { showDetail = false }
)Promotional Components
VioOfferBannerDynamic
Displays a promotional offer banner with countdown timer or message dynamically.
import live.vio.VioUI.Components.compose.offers.VioOfferBannerDynamic
VioOfferBannerDynamic(
channelId = "your-channel-id"
)Engagement Components
These components are part of the VioEngagementUI module.
Poll Overlay
Displays interactive polls during a live broadcast.
import live.vio.VioEngagementUI.Components.VioEngagementPollCard
VioEngagementPollCard(
poll = currentPoll,
onVote = { optionId ->
// Submit vote
}
)Contest Overlay
Displays contest cards during a live event.
import live.vio.VioEngagementUI.Components.VioEngagementContestCard
VioEngagementContestCard(
contest = currentContest
)VioSponsorMomentCard
A contextual card triggered by “Sponsor Moments” to show promotional content, products, or links.
import live.vio.VioEngagementUI.Components.VioSponsorMomentCard
VioSponsorMomentCard(
sponsorSlot = currentSponsorSlot,
onDismiss = { /* Hide card */ },
onCtaClick = { type ->
// Handle interaction based on type (lead, link, poll_cta, etc.)
}
)Product Cards (Engagement)
Displays product interaction cards during a live broadcast.
import live.vio.VioEngagementUI.Components.VioEngagementProductCard
import live.vio.VioEngagementUI.Components.VioEngagementProductGridCard
VioEngagementProductCard(
product = currentProduct,
onClick = { /* Handle click */ }
)
VioEngagementProductGridCard(
product = currentProduct,
onClick = { /* Handle click */ }
)