Skip to main content

RCheckoutOverlay

Complete checkout flow component built with Jetpack Compose. Handles cart review, payment method selection, and order completion.

Overview​

The RCheckoutOverlay provides a complete checkout experience with:

  • Cart review and item management
  • Payment method selection (Stripe, Klarna, Vipps)
  • Discount code application
  • Address and shipping information
  • Order confirmation

Architecture​

The checkout overlay uses a separation of concernspattern:

  • RCheckoutOverlay(Controller) - Business logic and state management
  • RCheckoutOverlayCompose(UI) - Jetpack Compose UI implementation

This separation makes the component:

  • More testable
  • Easier to customize
  • Reusable across different UI frameworks

Basic Usage​

MainActivity.kt
import androidx.compose.runtime.*
import io.reachu.ReachuUI.Components.RCheckoutOverlay
import io.reachu.ReachuUI.Components.RCheckoutOverlayCompose
import io.reachu.ReachuUI.Managers.CartManager

@Composable
fun CheckoutScreen(
 cartManager: CartManager,
 checkoutDraft: CheckoutDraft,
 onDismiss: () -> Unit
) {
 val checkoutOverlay = remember {
 RCheckoutOverlay(cartManager, checkoutDraft)
 }
 
 RCheckoutOverlayCompose(
 overlay = checkoutOverlay,
 onDismiss = onDismiss
 )
}

Checkout Steps​

The overlay manages multiple checkout steps:

enum class CheckoutStep {
 OrderSummary, // Review cart items
 Review, // Final review before payment
 Success, // Order confirmed
 Error // Error state
}

// Go to next step
checkoutOverlay.goToNextStep()

// Go to previous step
checkoutOverlay.goToPreviousStep()

// Go to specific step
checkoutOverlay.goToStep(CheckoutStep.Review)

Payment Methods​

Select Payment Method​

// Select payment method
checkoutOverlay.selectPaymentMethod(PaymentMethod.Stripe)

// Check if method is allowed
if (checkoutOverlay.isMethodAllowed(PaymentMethod.Klarna)) {
 // Show Klarna option
}

// Get allowed methods
val allowedMethods = checkoutOverlay.allowedPaymentMethods

Payment Method Resolution​

The overlay automatically resolves allowed payment methods by:

  1. Checking configuration (supportedPaymentMethods)
  2. Querying backend for available methods
  3. Taking intersection of both
  4. Falling back to defaults if empty

Discount Codes​

Apply Discount​

// Apply discount code
checkoutOverlay.applyDiscount("SAVE10")

// Apply or create discount (creates if doesn't exist)
checkoutOverlay.applyDiscountOrCreate(
 code = "NEW10",
 percentage = 10,
 typeId = 2
)

// Remove discount
checkoutOverlay.removeDiscount()

Discount State​

// Check discount state
val isApplying = checkoutOverlay.isApplyingDiscount
val message = checkoutOverlay.discountMessage
val codeInput = checkoutOverlay.discountCodeInput

Address Management​

Update Address​

checkoutOverlay.updateAddressDraft(
 firstName = "John",
 lastName = "Doe",
 email = "john@example.com",
 phone = "+4712345678",
 address1 = "Karl Johans gate 1",
 city = "Oslo",
 zip = "0154",
 country = "NO"
)

Sync Market​

// Sync selected market to draft
checkoutOverlay.syncSelectedMarket()

// Update phone code from cart
checkoutOverlay.updatePhoneCodeFromCart()

Customization​

Custom UI Implementation​

Since the overlay separates logic from UI, you can create your own UI:

@Composable
fun CustomCheckoutUI(overlay: RCheckoutOverlay) {
 when (overlay.currentStep) {
 CheckoutStep.OrderSummary -> {
 // Custom order summary UI
 }
 CheckoutStep.Review -> {
 // Custom review UI
 }
 // ...
 }
}

Theming​

Use Reachu Design System tokens for consistent theming:

import io.reachu.ReachuDesignSystem.Tokens.*

@Composable
fun ThemedCheckout() {
 Column(
 modifier = Modifier
 .padding(ReachuSpacing.lg)
 .background(ReachuColors.surface)
 ) {
 Text(
 text = "Checkout",
 style = ReachuTypography.title2.toComposeTextStyle(),
 color = ReachuColors.textPrimary
 )
 }
}

State Management​

The overlay manages all checkout state:

// Current step
val currentStep = checkoutOverlay.currentStep

// Payment method
val paymentMethod = checkoutOverlay.selectedPaymentMethod

// Loading states
val isPlacingOrder = checkoutOverlay.isPlacingOrder
val isApplyingDiscount = checkoutOverlay.isApplyingDiscount

// Address editing
val isEditingAddress = checkoutOverlay.isEditingAddress

Complete Example​

CompleteCheckoutExample.kt
import androidx.compose.runtime.*
import androidx.compose.ui.window.Dialog
import io.reachu.ReachuUI.Components.*

@Composable
fun CompleteCheckoutExample(
 cartManager: CartManager,
 checkoutDraft: CheckoutDraft,
 showCheckout: Boolean,
 onDismiss: () -> Unit
) {
 if (showCheckout) {
 Dialog(onDismissRequest = onDismiss) {
 val checkoutOverlay = remember {
 RCheckoutOverlay(cartManager, checkoutDraft)
 }
 
 RCheckoutOverlayCompose(
 overlay = checkoutOverlay,
 onDismiss = onDismiss
 )
 }
 }
}

Best Practices​

  1. Initialize once: Create RCheckoutOverlay with remember to maintain state
  2. Handle dismiss: Always provide onDismiss callback
  3. Monitor state: Observe currentStep to show appropriate UI
  4. Handle errors: Check for error states and display appropriate messages
  5. Test thoroughly: Test all payment methods and discount flows

Next Steps​

Ready to customize?

Continue to API Reference →:::